Hover-Effekte für Bilder

Hover Bilder

Mit CSS3 stehen viele Möglichkeiten zur Verfügung, um Websites noch spannender zu gestalten. Eines der interessantesten Features sind CSS-Transitions, die es ermöglichen, ein Element mit einer Animation von einem Zustand in den anderen zu überführen.Dies kann man z.B. für Bilder benutzen:

http://tympanus.net/Tutorials/OriginalHoverEffects/index3.html

http://codepen.io/noeldelgado/pen/pGwFx

 http://tympanus.net/Tutorials/ShapeHoverEffectSVG/

Animierte Buttons

Hover Buttons

Eine effektive Website ist für den Erfolg eines Unternehmens von großer Bedeutung. Sie dient als Kommunikationsinstrument. Aus diesem Grund spielen auch „call to action“-Buttons eine große Rolle. Dank neuer Technologien lassen diese sich  vielfältig animieren.

Hier einige aktuelle Trends:

Ghost-Buttons:
Ghost-Buttons sind sind minimalistisch gestaltet und versuchen die Aufmerksamkeit des Benutzers auf subtile Weise zu gewinnen. Mit einer intelligenten Hover-Animation , ist es ein Vergnügen sie zu verwenden Dabei fügen sie einen Hauch von Eleganz auf die Website. Besonders gut eignen sich diese Designform auf großen Hintergrundbildern.

http://www.interior-architects-munich.com/

Hover-Effekte und Click-Effekte für Buttons:
http://ianlunn.github.io/Hover/
http://daneden.github.io/animate.css/
http://tympanus.net/Development/CreativeButtons/

Lazy Load

Lazy Load Effekt

Mit dem Lazy-Load-Effekt ist ein beliebter on-scroll-Effekt mit dessen Hilfe man verschiedene Elemente einer Webseite in Abhängigkeit mit der Scrollleiste animieren kann. Je weiter man nach unten scrollt werden so verschiedene Elemente aus verschiedenen Richtungen eingeblendet oder animiert. Diese Technik eignet sich  hervorragend für das Storytelling auf Webseiten. Zusammen mit Parallax-Scrolling können so beeindruckende Webseiten ohne textlastige Produktbeschreibungen entstehen. Dabei kommt dieser Effekt ohne ressourcenfressendes Flash-Plugin aus.

Beispiele:
http://www.mott-services.de/projects/demo/lazy_load/lazy_load.html

http://www.justdesign.co.za/

Parallax-Effekt

Demo Parallax Website

Der Parallax-Effekt ist einer der beeindruckendsten Scroll-Animationen. Es besteht aus einem großformatigen Hintergrundbild, von welchem man, je nach Scroll-Position, immer nur einen Ausschnitt sieht. Die Effekte die sich mit dieser Technik erzielen lassen sind vielfältig. Hier gibt es sowohl horizontale als auch vertikale Scroll-Richtungen. Kombiniert man dieseTechnik mit anderen Effekten, wie z.B. dem Lazy Load Effekt können fast schon filmreife Animationen ausgelöst werden, die den Besucher tief beeindrucken und sich gut für Storytelling eignen.

Einige Beispiele sehen Sie hier:
http://www.world-of-swiss.com/en
http://www.carde-app.com/
http://habitatweb.mx/
http://mintdesigncompany.com/

https://www.crayon.co/mottservices/collections/parallax-scrolling/

Webseiten für Mobile Endgeräte: Feature oder Pflicht?

Mobiles Internet bedeutet nicht mehr nur Internet für Smartphones. In dem Begriff sind heute alle internetfähigen Endgeräte zu sehen, die nicht permanent an die Steckdose gebunden sind.  Zwar gibt es ca 1 Milliarde Handys im Einsatz weltweit, aber auch über 52 Millionen Tablets wurden allein  im letzten Quartal des Jahres 2012 verkauft und Ihnen werden Verkaufszahlen vorhergesagt, die PC- und Notebook-Verkäufe einholen. So wird recht schnell deutlich: eine Webseite, die sich optimiert an die jeweilige Bildschirmgröße des Endgerätes anpasst wird nicht mehr nur ein besonderes Feature sein, sondern eine Notwendigkeit. Das Webdesign und Webentwicklung wurde in den letzten Jahren maßgeblich von Touchscreens beeinflusst. Das Wischerlebnis in der Bedienung einer Website ist die eigentliche mobile Revolution. Touchscreen-Geräte werden zur Norm.

Werden Sie responsive und gewähren Sie Ihren Kunden Zugang zu Ihren Inhalten – egal auf welchem Endgerät. Mott services berät Sie gerne!