{"id":3446,"date":"2015-06-05T16:22:35","date_gmt":"2015-06-05T14:22:35","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=3446"},"modified":"2015-06-05T16:22:35","modified_gmt":"2015-06-05T14:22:35","slug":"hover-css-bounce-js","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js","title":{"rendered":"Hover.css & Bounce.js"},"content":{"rendered":"

Hover.css: 50 Hover-Effekte f\u00fcr deine Website<\/h2>\n

Hover.css<\/strong> stellt dir eine Ansammlung von Hover-Effekten bereit, die du auf unterschiedliche Bereiche deiner Seite anwenden kannst. Heute wird dir die kleine, aber sehr informative CSS-Bibliothek vorgestellt.<\/p>\n

\"Hover-css\"<\/p>\n

Animationen ohne Vendor-Pr\u00e4fix<\/h3>\n

Bei CSS3 stehen Webdesignern viele Mittel zur Verf\u00fcgung, um Internetseiten noch spannender zu gestalten. Die besonders interessanten Features sind CSS-Transitions. Sie erm\u00f6glichen, dass ein Teil mit einer Animation von einem Stadium in einen anderen gebracht werden kann. Der Support f\u00fcr diese Animation ist in den Browsern jedoch unterschiedlich eingerichtet. Oftmals muss deshalb auf die Vendor-Pr\u00e4fixe (-webkit-transition, -moz-tansition usw.) zur\u00fcckgegriffen werden.<\/p>\n

F\u00fcr die Verwirklichung der Transitions f\u00fcr Hover-Zust\u00e4nde bietet Hover.css eine einfache L\u00f6sung. Die CSS-Bibliothek<\/a> Hover.css wurde von Ian Lunn entwickelt. Sie stellt verschiedene Animationen bereit, die zur Verwirklichung von ansprechenden Hover-Zust\u00e4nden von Logos, Buttons, Bildern oder anderen m\u00f6glichen Elementen deiner Internetseite verwendet werden k\u00f6nnen.<\/p>\n

CSS3 als Basis<\/h4>\n

Die Anwendung von Hover.css funktioniert sehr einfach. Du kopierst die Klassendefinitionen der gew\u00fcnschten Effekte in dein eigenes Stylesheet oder bindest das ca. 50 Kilobyte (unkomprimiert und nicht minifiziert) gro\u00dfe Stylesheet direkt in deine Webseite ein. Mit den entsprechenden Klassen von Hover.css kannst du dann ohne Probleme die Effekte auf die von dir gew\u00fcnschten Elemente anwenden. Dir steht eine detaillierte Anleitung<\/a> f\u00fcr den einfachen Einstieg in Hover.css zur Verf\u00fcgung.<\/p>\n

Hover.css basiert auf CSS3-Funktionen wie Animationen, Transformationen, Transitions und Pseudo-Elementen. Die Bibliothek funktioniert deshalb nur in neueren Browsern. Besonders der Support f\u00fcr den Browser Internet Explorer ist erwartungsgem\u00e4\u00df nicht besonders gut. Die CSS-Bibliothek ist auf GitHub<\/a> und auf der offiziellen Internetseite von Hover.css<\/a> und verf\u00fcgbar.<\/p>\n

Bounce.js – Ein CSS3-Tool zum Verlieben<\/h2>\n

CSS3-Animationen sind toll, allerdings k\u00f6nnen sie auch ziemlich schnell un\u00fcbersichtlich bei der Programmierung werden. Mit dem Service Bouncejs.com wird dir ein Interface geboten, das du lieben wirst. Warum das so ist, liest du am Besten in diesem Artikel.<\/p>\n

\"Bounce-js\"<\/p>\n

Die einfache Bedienung des Interface<\/h3>\n

Seri\u00f6se Entwickler halten meist nichts von Generatoren. Umst\u00e4ndliche Bedienung und schlechter CSS-Code sind nur einige Probleme dieser Tools. Nun gibt es, neben den CSS3-Verlauf-Generatoren, auch noch ein weiteres Programm, das dir hier vorgestellt werden soll: Bouncejs.com.<\/p>\n

Animationen erstellen<\/h4>\n

Mit den sogenannten \u201eComponents\u201c kannst du deine Animation selbst Schritt f\u00fcr Schritt aufbauen. Nat\u00fcrlich kannst du auch die fertigen Templates nutzen. Diese k\u00f6nnen dann auch einfach nach deinen W\u00fcnschen abgewandelt werden. Mit einem Klick exportierst du deine Animation als CSS-Code.<\/p>\n

Alle Animationsparameter werden praktischerweise in einer URL gespeichert, daher kannst du mit Bounce.js deine Animationen einfach an Freunde und Kollegen weiterleiten. Mit der Zeitlupenfunktion wird die Animation verlangsamt, so kannst du dir die einzelnen \u201eComponents\u201c und deren Auswirkungen live genauer ansehen. Bounce.js ist daher auch sehr gut geeignet, um zu lernen, wie CSS3-Animationen funktionieren. Nach dem Export zu CSS kannst du die Animation einfach weiter bearbeiten. Die Datei liefert dir daf\u00fcr die Parameter mit. Du kannst die Animation somit jederzeit und sehr bequem \u00fcber den Online-Service \u00e4ndern.<\/p>\n

Zur Zeit nur als Online-Service verf\u00fcgbar<\/h5>\n

Der Name Bounce.js l\u00e4sst vermuten, dass es sich bei dem Tool um eine JavaScript-Bibliothek handelt. Doch so weit ist es noch nicht – zumindest zur Zeit: Der Entwickler von Bounce.js, Joel Besada<\/a>, arbeitet zwar regelm\u00e4\u00dfig an seinem Tool. Vorerst kannst du allerdings nur den Online-Service bouncejs.com<\/a> verwenden.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hover.css: 50 Hover-Effekte f\u00fcr deine Website Hover.css stellt dir eine Ansammlung von Hover-Effekten bereit, die du auf unterschiedliche Bereiche deiner Seite anwenden kannst. Heute wird dir die kleine, aber sehr informative CSS-Bibliothek vorgestellt. Animationen ohne Vendor-Pr\u00e4fix Bei CSS3 stehen Webdesignern viele Mittel zur Verf\u00fcgung, um Internetseiten noch spannender zu gestalten. Die besonders interessanten Features sind CSS-Transitions. Sie erm\u00f6glichen, dass ein Teil mit einer Animation von einem Stadium in einen anderen gebracht werden kann. Der Support f\u00fcr diese Animation ist in den Browsern jedoch unterschiedlich eingerichtet. Oftmals muss deshalb auf die Vendor-Pr\u00e4fixe (-webkit-transition, -moz-tansition usw.) zur\u00fcckgegriffen werden. F\u00fcr die Verwirklichung der Transitions f\u00fcr Hover-Zust\u00e4nde bietet Hover.css eine einfache L\u00f6sung. Die CSS-Bibliothek Hover.css wurde von Ian Lunn entwickelt. Sie stellt verschiedene Animationen bereit, die zur Verwirklichung von ansprechenden Hover-Zust\u00e4nden von Logos, Buttons, Bildern oder anderen m\u00f6glichen Elementen deiner Internetseite verwendet werden k\u00f6nnen. CSS3 als Basis Die Anwendung von Hover.css funktioniert sehr einfach. Du kopierst die Klassendefinitionen der gew\u00fcnschten Effekte in dein eigenes Stylesheet oder bindest das ca. 50 Kilobyte (unkomprimiert und nicht minifiziert) gro\u00dfe Stylesheet direkt in deine Webseite ein. Mit den entsprechenden Klassen von Hover.css kannst du dann ohne Probleme die Effekte auf die von dir gew\u00fcnschten Elemente anwenden. Dir steht eine detaillierte Anleitung f\u00fcr den einfachen Einstieg in Hover.css zur Verf\u00fcgung. Hover.css basiert auf CSS3-Funktionen wie Animationen, Transformationen, Transitions und Pseudo-Elementen. Die Bibliothek funktioniert deshalb nur in neueren Browsern. Besonders der Support f\u00fcr den Browser Internet Explorer ist erwartungsgem\u00e4\u00df nicht besonders gut. Die CSS-Bibliothek ist auf GitHub und auf der […]<\/p>\n","protected":false},"author":1,"featured_media":3450,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,16],"tags":[258,257],"class_list":["post-3446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressourcen","category-webdesign","tag-bounce-js","tag-hover-css"],"yoast_head":"\nHover.css & Bounce.js<\/title>\n<meta name=\"description\" content=\"Hover.css & Bounce.js stellt dir eine Ansammlung von Hover-Effekten und CSS3-Animationen bereit. In diesem Artikel kannst du spannendes lesen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hover.css & Bounce.js\" \/>\n<meta property=\"og:description\" content=\"Hover.css & Bounce.js stellt dir eine Ansammlung von Hover-Effekten und CSS3-Animationen bereit. In diesem Artikel kannst du spannendes lesen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wolkenhart\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-05T14:22:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mika Gustavson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wolkenhart\" \/>\n<meta name=\"twitter:site\" content=\"@wolkenhart\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#article\",\"isPartOf\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js\"},\"author\":{\"name\":\"Mika Gustavson\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\"},\"headline\":\"Hover.css & Bounce.js\",\"datePublished\":\"2015-06-05T14:22:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js\"},\"wordCount\":580,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg\",\"keywords\":[\"Bounce.js\",\"Hover.css\"],\"articleSection\":[\"Ressourcen\",\"Webdesign Agentur\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js\",\"name\":\"Hover.css & Bounce.js\",\"isPartOf\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg\",\"datePublished\":\"2015-06-05T14:22:35+00:00\",\"author\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\"},\"description\":\"Hover.css & Bounce.js stellt dir eine Ansammlung von Hover-Effekten und CSS3-Animationen bereit. In diesem Artikel kannst du spannendes lesen.\",\"breadcrumb\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#primaryimage\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg\",\"contentUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg\",\"width\":500,\"height\":334,\"caption\":\"Hover.css-Bounce.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\/\/wolkenhart.com\/webdesignblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hover.css & Bounce.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#website\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\",\"name\":\"Mika Gustavson\",\"description\":\"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hover.css & Bounce.js","description":"Hover.css & Bounce.js stellt dir eine Ansammlung von Hover-Effekten und CSS3-Animationen bereit. In diesem Artikel kannst du spannendes lesen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js","og_locale":"de_DE","og_type":"article","og_title":"Hover.css & Bounce.js","og_description":"Hover.css & Bounce.js stellt dir eine Ansammlung von Hover-Effekten und CSS3-Animationen bereit. In diesem Artikel kannst du spannendes lesen.","og_url":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js","article_publisher":"https:\/\/www.facebook.com\/wolkenhart","article_published_time":"2015-06-05T14:22:35+00:00","og_image":[{"width":500,"height":334,"url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg","type":"image\/jpeg"}],"author":"Mika Gustavson","twitter_card":"summary_large_image","twitter_creator":"@wolkenhart","twitter_site":"@wolkenhart","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#article","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js"},"author":{"name":"Mika Gustavson","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac"},"headline":"Hover.css & Bounce.js","datePublished":"2015-06-05T14:22:35+00:00","mainEntityOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js"},"wordCount":580,"commentCount":0,"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg","keywords":["Bounce.js","Hover.css"],"articleSection":["Ressourcen","Webdesign Agentur"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js","url":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js","name":"Hover.css & Bounce.js","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#primaryimage"},"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg","datePublished":"2015-06-05T14:22:35+00:00","author":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac"},"description":"Hover.css & Bounce.js stellt dir eine Ansammlung von Hover-Effekten und CSS3-Animationen bereit. In diesem Artikel kannst du spannendes lesen.","breadcrumb":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#primaryimage","url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg","contentUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/06\/Hover-css-Bounce-js.jpg","width":500,"height":334,"caption":"Hover.css-Bounce.js"},{"@type":"BreadcrumbList","@id":"https:\/\/wolkenhart.com\/webdesignblog\/hover-css-bounce-js#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/wolkenhart.com\/webdesignblog\/"},{"@type":"ListItem","position":2,"name":"Hover.css & Bounce.js"}]},{"@type":"WebSite","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website","url":"https:\/\/wolkenhart.com\/webdesignblog\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac","name":"Mika Gustavson","description":"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.","url":"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk"}]}},"_links":{"self":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/comments?post=3446"}],"version-history":[{"count":0,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3446\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media\/3450"}],"wp:attachment":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media?parent=3446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/categories?post=3446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/tags?post=3446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}