Scrollmagic: szórakoztató webdesign

A webdizájnban a tendencia olyan, mint a webhelyek megvalósításához alkalmazott stílus, amelyet a felhasználók erősen elfogadnak, általában átmenetileg. A 2016-ban eddig megfigyelt tendenciák egy része, és nyilvánvalóan 2017-ben is hangot fog állítani, az animációk és a hosszú görgetésű szakaszok.

Nem titok, hogy ez a stílus nagyon vonzó és szórakoztató a felhasználó számára, az animációkkal intuitív és szórakoztatóvá tehetjük a webhelyen való navigációt, amíg azokat jól használják. Ezért készítettünk egy oktatóanyagot, amely animált görgetéseket tartalmaz a webhelyén, a jQuery ScrollMagic plugin segítségével.

ScrollMagic: Szórakoztató webdesign

A ScrollMagic egy javascript-ben létrehozott könyvtár, amelynek célja a webhelyek mozgatása közbeni interakció elérése. Ez az elődje, a Superscrollorama teljes átírása, és architektúrája olyan pluginekre épül, amelyek egyszerű testreszabhatóságot és bővíthetőséget kínálnak.

Ideális, ha az alábbiak valamelyikét akarjuk végrehajtani:

• Animáció a hely pozíciója vagy elmozdulása alapján. Indítsa el az animációt, vagy szinkronizálja azt a görgetés mozgásával. Adjon hozzá parallaxis hatást sok erőfeszítés nélkül. Hozzon létre egy oldalt végtelen görgetéssel, a tartalom betöltése az ajax segítségével.

ScrollMagic szolgáltatások

• Optimalizált teljesítmény, könnyű, rugalmas és kibővíthető. Eseménykezelés és objektum-orientált programozás. Támogatja az adaptív web- tervezést. Támogatja mindkét irányú (vízszintes és függőleges) mozgásokat, támogatja a konténerek közötti mozgásokat (div), akár több is egy oldalon.Ez tökéletesen működik a böngészőknél: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. A GitHub tárházában részletes dokumentációval és számos alkalmazási példával rendelkezik.

Get ScrollMagic

Különféle módon szerezhető be.

1: GitHub

git klón git: //github.com/janpaepke/ScrollMagic.git

2: Bower

bower install scrollmagic

3: csomópont csomagkezelő

npm install scrollmagic

4: CDN

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

Olvassa el az E-mail kialakítás testreszabása az Outlook alkalmazásban című cikket

Telepítés és használat

A telepítés meglehetősen egyszerű, a kernelfájlt csak a html fájlokba vonjuk be, ahol használni akarjuk.

;

Használat céljából a bővítmény vezérlőorientált tervezési mintát biztosít, amelyhez egy vagy több jelenet hozzáadódik. Ezeket a jeleneteket arra használjuk, hogy meghatározzuk, mi történik a konténerekben, amikor egy adott pontra mozognak.

Ez lenne egy alapvető példa:

// init vezérlő vezérlő = új ScrollMagic.Controller (); // hozzon létre egy új jelenetet ScrollMagic.Scene ({időtartam: 100; // a jelenetnek 100 képpont eltolással kell tartania: 50 // indítsa el ezt a jelenetet 50 képpontos görgetés után}).setPin ("# my-sticky- elem ") // az elemet a jelenet időtartamához.addTo (vezérlő); // rendelje hozzá a jelenetet a vezérlőhöz

Egy fejlettebb példa lenne, ha több eltérést érne el, a forráskódja:

$ (function () {// várjon, amíg a dokumentum készen áll // init vezérlő var kontroller = új ScrollMagic.Controller (); // építsen be tween var tween = TweenMax.to ("# animálni", 0.5, {skála: 3, könnyű: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", időtartam: 400, eltolás: 250}).setTween (tween).setPin ("# animálni"). addIndicators ({név: "átméretezés"}) // indikátorok hozzáadása (beépülő modult igényel).addTo (vezérlő); // init vezérlő vízszintes var controller_h = új ScrollMagic.Controller ({vertikális: hamis}); // vízszintes variációkba épít tween_h = TweenMax.to ("# animálni", 0, 5, {forgatás: 360, könnyedén: Linear.easeNone}); // // // scene scene var sce__ = új ScrollMagic.Scene ({időtartam: 700}).setTween (tween_h). setPin ("# animálni").addIndicators ({név: "forgatás"}) // indikátorok hozzáadása (plugin szükséges).addTo (controller_h);});

A plugin dokumentációjában még sok más példát talál a forráskóddal együtt.

Javasoljuk, hogy hogyan végezzen tiszta Windows 10 telepítést USB-meghajtó segítségével