Scrollmagic: disseny web divertit

En el disseny web una tendència és com l'estil que ha estat adoptat per a la realització dels llocs el qual és fortament acceptat pels usuaris, usualment en períodes temporals. Part de les tendències en el que va de 2016 i, aparentment, seguirà marcant la pauta en 2017, són les animacions i les seccions llargues amb molt scroll.

No és un secret que aquest estil és força atractiu i divertit per a l'usuari, amb les animacions podem fer que el seu navegabilitat pel lloc sigui intuïtiva i entretinguda sempre que siguin ben utilitzades. Per aquest motiu hem creat un tutorial per incloure en el teu lloc web desplaçaments animats, utilitzant el plugin de jQuery ScrollMagic.

ScrollMagic: Disseny Web divertit

ScrollMagic és una llibreria realitzada en javascript per aconseguir interaccions en el desplaçament dels llocs web. És una reescriptura completa del seu predecessor Superscrollorama i la seva arquitectura està basada en complements que ofereixen fàcil personalització i extensibilitat.

És ideal si volem implementar algunes de les següents coses:

• Animació basada en la posició o desplaçament de l'sitio.Desencadenar l'animació o sincronitzar amb el moviment de l'scroll.Añadir efecte parallax sense molt esfuerzo.Crear una pàgina amb scroll infinit, manejant càrrega de contingut amb ajax.

Característiques de ScrollMagic

• Rendiment optimitzat, és lleuger, flexible i permet extensibilidad.Maneja gestió d'esdeveniments i programació orientada a objectes.Soporta el disseny web adaptatiu.Té suport per a desplaçaments en tots dos sentits (horitzontal i vertical) Té suport per a desplaçaments dins dels contenidors (div), fins i tot múltiples en una sola página.Funciona perfectament per als navegadors: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9 +.En el seu repositori GitHub, posseeix documentació detallada i molts exemples d'aplicació.

obtenir ScrollMagic

Està disponible per a obtenir-lo de diverses maneres.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: Bower

Bower install scrollmagic

3: node package manager

NPM install scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

També pots llegir Com personalitzar el disseny d'un correu a l'Outlook

Instal·lació i ús

La instal·lació és bastant senzilla, només incloem l'arxiu de l'nucli als arxius html on volem usar-lo.

;

Per al seu ús, el connector proveeix un patró de disseny orientat a un controlador, a el qual se li afegeixen una o més escenes. Aquestes escenes es fan servir per definir el que passa en els contenidors quan es desplacen a un punt específic.

Aquest seria un exemple bàsic:

// init controller var controller = new ScrollMagic.Controller (); // create a scene new ScrollMagic.Scene ({duration: 100, // the scene should last for a scroll distance of 100px òfset: 50 // start this scene after scrolling for 50px}).setPin ("# my-sticky- element ") // pins the element for the the scene 's duration.addTo (controller); // assign the scene to the controller

Un exemple més avançat seria, aconseguir múltiples desplaçaments, el seu codi font seria:

$ (Function () {// wait for document ready // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3, ease: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", duration: 400, òfset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // add indicators (requires plugin).addTo (controller); // init controller horitzontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horitzontal var tween_h = TweenMax.to ("# animate", 0.5, {rotation: 360, ease: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // add indicators (requires plugin).addTo (controller_h);});

Pots trobar molts més exemples amb les seves fonts en la documentació de l'connector.

ET RECOMENDAMOSComo fer una instal·lació neta de Windows 10 usant un pendrive