Scrollmagic: rolig webbdesign

I webbdesign är en trend som den stil som har antagits för att förverkliga webbplatserna som accepteras starkt av användare, vanligtvis under tillfälliga perioder. En del av trenderna hittills 2016 och kommer tydligen att fortsätta sätta tonen under 2017 är animationerna och långa avsnitten med mycket rullning.

Det är inte en hemlighet att den här stilen är ganska attraktiv och rolig för användaren, med animationerna kan vi göra navigeringen på webbplatsen intuitiv och underhållande så länge de är väl använda. Av den anledningen har vi skapat en handledning för att inkludera animerade rullningar på din webbplats med jQuery ScrollMagic- plugin.

ScrollMagic: Rolig webbdesign

ScrollMagic är ett bibliotek tillverkat i javascript för att uppnå interaktioner när du flyttar webbplatser. Det är en komplett omskrivning av sin föregångare Superscrollorama och dess arkitektur är baserad på plugins som erbjuder enkel anpassning och utdragbarhet.

Det är idealiskt om vi vill implementera några av följande saker:

• Animering baserad på platsens placering eller förskjutning. Utlös animationen eller synkronisera den med rörelsens rörelse. Lägg till parallaxeffekt utan mycket ansträngning. Skapa en sida med oändlig rullning, hantering av innehållsbelastning med ajax.

ScrollMagic-funktioner

• Optimerad prestanda, den är lätt, flexibel och möjliggör utdragbarhet. Eventhantering och objektorienterad programmering. Det stöder adaptiv webbdesign. Det har stöd för rörelser i båda riktningar (horisontellt och vertikalt). Det har stöd för rörelser inom containrar (div), till och med flera på en sida.Det fungerar perfekt för webbläsare: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. I sitt GitHub- arkiv har den detaljerad dokumentation och många applikationsexempel.

Få ScrollMagic

Det är tillgängligt att få det på olika sätt.

1: GitHub

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

2: Bower

bower install scrollmagic

3: node paketansvarig

npm installera scrollmagic

4: CDN

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

Du kan också läsa Hur du anpassar utformningen av ett e-postmeddelande i Outlook

Installation och användning

Installationen är ganska enkel, vi inkluderar bara kärnfilen i html-filerna där vi vill använda den.

;

För användning tillhandahåller plugin-en ett styrenhetsorienterat designmönster, till vilket en eller flera scener läggs till. Dessa scener används för att definiera vad som händer i behållarna när de flyttar till en specifik punkt.

Detta skulle vara ett grundläggande exempel:

// init controller var controller = new ScrollMagic.Controller (); // skapa en ny scen ScrollMagic.Scene ({varaktighet: 100, // scenen ska pågå i ett rullningsavstånd på 100px förskjutning: 50 // starta den här scenen efter att ha bläddrat i 50px}).setPin ("# my-sticky- element ") // stiftar elementet för scenens varaktighet. AddTo (controller); // tilldela scenen till regulatorn

Ett mer avancerat exempel skulle vara att uppnå flera offset, dess källkod skulle vara:

$ (funktion () {// vänta på att dokumentet är klart // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {skala: 3, lätthet: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", varaktighet: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // lägg till indikatorer (kräver plugin).addTo (controller); // init controller horizontaal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animera", 0, 5, {rotation: 360, lätthet: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({varaktighet: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // lägg till indikatorer (kräver plugin).addTo (controller_h);});

Du kan hitta många fler exempel med deras källkod i plugin-dokumentationen.

VI rekommenderar dig hur du gör en ren installation av Windows 10 med en USB-stick