Millora el teu disseny amb efectes i animacions web

Aquí descobriràs les animacions css, les html5 i aplicacions per fer animacions tu mateix.

Actualment rebem un bombardeig constant d’inputs externs, la nostra capacitat de concentració i atenció ha disminuït i, per tant, s’ha de dirigir als usuaris a allò que ens interessa, perquè es fixin en allò que és important. Com? Amb el truc de les animacions.

Amb codi (i molta cafeïna i paciència) es pot fer màgia. Les animacions són una manera de convertir en dinàmica una pàgina web. D’aquesta manera podem jugar amb els efectes visuals i captar l’atenció de l’usuari cap allò que ens interessa.

El ventall d’opcions és molt gran, però, perquè us feu un idea, pot anar des d’un efecte hover d’un botó, passant per una il·lustració que tingui un petit moviment, fins a l’aparició dels elements de la web durant la navegació en fer scroll. Més endavant aprofundirem més, no patiu!

Video: Bilder meines Lebens

A la vida real estem envoltats de moviment, ja sigui a una velocitat visible o tant lentament que només el podem veure a càmera ràpida. No obstant, tot al nostre voltant es mou!

L’objectiu de la web: complements o contingut?

Primer de tot, a partir de l’objectiu de la web es poden enfocar les animacions cap al contingut o cap als complements. S’ha de tenir en compte que les animacions han d’ajudar a dinamitzar la web i fer-la més atractiva, però no ha de distreure a l’usuari de l’objectiu principal de la web, sigui quin sigui.

Els objectius de la pàgina web es poden centrar en el contingut o en els complements. Veiem-ho:

·
Continguts: Si el contingut es molt important, i volem que l’usuari es dediqui a llegir-lo, hem de vigilar en no desviar-li l’atenció amb animacions permanents d’elements laterals o de fons, sinó per exemple animar el mateix contingut per anar-lo mostrant a mesura que el vagi llegint. D’aquesta manera també podem anar dirigint la seva mirada cap als elements que ens interessin més.

·
Complements: donar més importància a conceptes curts i elements gràfics, podem jugar més amb animacions complementàries que donin vida a la pàgina.

Els principis de l’animació clàssica
aplicats al disseny web

Els vols coneixer?

Tipus d'animacions web

Hover

Efectes animats sobre objectes quan ens situem a sobre amb el cursor. Son animacions que normalment es programen en CSS. La utilització més habitual es l’efecte animat en botons.

Background: el Parallax

L’efecte paral·lax és la simulació de profunditat mostrant diferents elements en multicapes, i animant-los a velocitats diferents quan es fa scroll a la pàgina.

Quanta més diferència de velocitats i més elements diferents s’utilitzen, més sensació de profunditat. Ens pot ajudar en l’efecte la utilització d’ombres als elements més propers.

El paral·lax és una variant moderna de la tècnica d’animació clàssica anomenada “càmera multiplano” que va inventar un dels fundadors de Disney el 1933.

Foto: Sasint

Els paisatges tenen multitud de capes a diferents profunditats de camp. La tècnica del parallax intenta imitar la visió binocular que tenim els humans i generar l'efecte de profunditat.

Slideshows

És una manera dinàmica de mostrar una galeria d’imatges. Tenen moltes opcions: poden ser automàtics, que vagi canviant de foto cada cert temps o bé interactius, en què l’usuari va passant les fotos al seu gust. També es poden combinar les dues, fent que sigui automàtic per si sol i interactiu quan l’usuari hi interaccioni.

Scrolling

El contingut va apareixent en pantalla a mesura que l’usuari va fent scroll de la pàgina. Un cop el contingut ja ha aparegut, aquest es queda estàtic per facilitar-ne la lectura posterior.

Il·lustracions animades

Elements gràfics que acompanyen el contingut de la web, però que tenen cert moviment per tal de cridar l’atenció de l’usuari o ajudar a entendre allò que s’està explicant al contingut. En altres paraules, són dibuixos animats a partir d’uns pocs fotogrames.

Foto: Steve Harvey

Els Paons mascles joves estenen les seves plomes per cridar l’atenció de les femelles. Ho fan no només amb els colors del plomatge, també amb sons i moviments. Tot sigui perquè li facin cas!

Formats

Els elements gràfics individuals són aquells que actuen sense interacció de l’usuari i que poden ser animacions en bucle permanent o amb un inici i un final. Podem fer-los en GIF, SVG i HTML5:.

SVG

Els SVG són il·lustracions en format vectorial, que es poden afegir al contingut en forma de codi. Per tant, pesen molt poc.

Avui en dia, la majoria de navegadors ja suporten l’animació dels SVG, ja que són escalables sense perdre resolució i, per tant, es poden adaptar a totes les mides de pantalles.

Eina:
Per animar SVG: Vivus

HTML5 Canvas:

La versió 5 de l’estàndard de programació web HTML incorpora un element Canvas que permet, mitjançant javascript, dibuixar i animar elements directament a pantalla i interactuar amb vídeos i imatges.

Eines:
Per animar HTML5: Hype 3
Professional: Adobe Animate
Gratuïta: Google Web designer

GIF:

Els Gif's s'utilitzen des del principi dels temps del disseny web. Són més pesats i no són escalables. No obstant són compatibles amb tot tipus de navegadors. Són vídeos de pocs segons, sense so que, generalment, s’han utilitzat en publicitat, en els bàners de les pàgines web.

Eina:
Per animar GIF: GIFMake

El llenguatge: CSS i JAVASCRIPT

Per animar la majoria d’aquestes tipologies i formats, els llenguatges que s’utilitzen son el CSS i el JAVASCRIPT, combinats entre si per provocar els efectes desitjats.

El CSS per si sol té poques eines d’animació i totes van relacionades amb l’efecte Hover que fa l’usuari als diferents elements. Però és el CSS el que determina el resultat visual dels elements com ara els colors, els textos, la mida, la forma, l'opacitat... etc.

El Javascript, en canvi, és el que controla la resta de variables com ara el temps, la velocitat, el que és visible en pantalla, el moviment del ratolí o la interacció entre els diferents elements de l’animació.

La combinació dels dos llenguatges, ens permet crear i controlar la majoria de tipologies d’animacions que hem comentat anteriorment.

13 consells per a reduir el percentatge de rebot de la teva web

Descobreix-los

Tres eines d’animació Javascript i CSS gratuïtes

Animate.css

Ens proveeix d’un conjunt d’animacions CSS3 fresques i transversals. Les animacions estan dividides en diferents grups, com per exemple, cercadors d'atenció, entrades i sortides amb rebot, entrades amb opacitat i moltes altres. El ventall d’opcions és bastant ampli.

Com funciona?

La llibreria animate.css és un arxiu .css amb un conjunt de classes en què cada una d’elles té definida una tipologia d’animació. Disposem d’una gran varietat d’animacions CSS3 sense necessitat de crear-les. Fàcil i divers.

daneden.github.io/animate.css

AniJS

AniJS és una biblioteca de JavaScript que permet afegir animacions CSS3 i crear components sofisticats de la interfície d'usuari com ara pestanyes d'animació, acordions, modals, menús desplegables, notificacions d'aplicacions per a mòbils, aparicions amb scroll, entre d’altres.

Un dels avantatges és que funciona amb tots els navegadors moderns, inclosos iOs i Android; a més, no necessita biblioteques de tercers i compta amb un espectacular aparador anomenat AniCollection, on podeu experimentar fàcilment amb els diferents efectes que ofereix la biblioteca.

anijs.github.io

Bounce.js

Bounce.js és una biblioteca pràctica de JavaScript que permet crear animacions complicades. Bounce.js permet afegir components diferents, com ara la flexibilització, la durada, el retard i el nombre de rebots.

La seva interfície d'usuari avançada permet afegir manualment diferents components a la vostra animació, o bé seleccionar un preajustament predefinit, després reproduir l'animació i ajustar les propietats si és necessari.

bouncejs.com

Però, com les construïm perquè semblin reals? En l’article ‘Els principis de l’animació clàssica aplicats al disseny web’ proposem 6 principis bàsics perquè les vostres animacions estiguin vives i plenes de vitalitat.

Ja no hi ha cap excusa per no donar-li una mica de vida i de color al teu disseny web. Prova les diferents animacions i troba la que millor s’adeqüi als teus interessos! Fàcil! 😉

Si ens vols conèixer millor,
contacta'ns. I si t'agrada, segueix-nos!