Scrollmagic: nakakatuwang disenyo ng web

Sa disenyo ng web isang kalakaran ay tulad ng istilo na pinagtibay para sa pagsasakatuparan ng mga site na mariing tinatanggap ng mga gumagamit, kadalasan sa pansamantalang panahon. Bahagi ng mga uso sa ngayon sa 2016 at, tila, ay magpapatuloy na itakda ang tono sa 2017, ay ang mga animation at mahabang seksyon na may maraming scroll.

Hindi lihim na ang istilo na ito ay medyo kaakit-akit at masaya para sa gumagamit, kasama ang mga animation na maaari naming gawin ang pag-navigate sa site na madaling maunawaan at nakakaaliw hangga't mahusay na ginagamit nila. Para sa kadahilanang ito ay lumikha kami ng isang tutorial upang isama ang mga animated na scroll sa iyong website, gamit ang jQuery scrollollollagag plugin.

ScrollMagic: Masaya na Disenyo sa Web

Ang ScrollMagic ay isang aklatan na ginawa sa javascript upang makamit ang mga pakikipag-ugnay kapag lumilipat ang mga website. Ito ay isang kumpletong pagsulat muli ng hinalinhan nitong si Superscrollorama at ang arkitektura nito ay batay sa mga plugin na nag-aalok ng madaling pagpapasadya at pagpapalawak.

Ito ay mainam kung nais nating ipatupad ang ilan sa mga sumusunod na bagay:

• Animasyon batay sa posisyon o pag-aalis ng site.Mag-i-trigger ang animation o i-synchronize ito sa paggalaw ng scroll Magdagdag ng paralaks na epekto nang walang labis na pagsisikap Lumikha ng isang pahina na may walang katapusang scroll, paghawak ng pag-load ng nilalaman gamit ang ajax.

Mga Tampok ng scroll

• Na-optimize na pagganap, ito ay magaan, nababaluktot at nagbibigay-daan sa pagpapalawak.Ang pamamahala ng kaganapan at pag- orient ng oriented ng object. Sinusuportahan nito ang agpang disenyo ng web.May suporta sa mga paggalaw sa parehong direksyon (pahalang at patayo) Mayroon itong suporta para sa mga paggalaw sa loob ng mga lalagyan (div), kahit na maramihang sa isang pahina.Naging gumagana nang perpekto para sa mga browser: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Sa kanyang GitHub na imbakan, mayroon itong detalyadong dokumentasyon at maraming mga halimbawa ng aplikasyon.

Kumuha ng scrollMagic

Magagamit ito upang makuha ito sa iba't ibang paraan.

1: GitHub

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

2: Panghihiram

bower install scrollmagic

3: manager ng node package

npm mag-install ng scrollmagic

4: CDN

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

Maaari mo ring basahin Paano ipasadya ang disenyo ng isang email sa Outlook

Pag-install at paggamit

Ang pag-install ay medyo simple, isinasama lamang namin ang kernel file sa mga file na html kung saan nais naming gamitin ito.

;

Para sa paggamit, ang plugin ay nagbibigay ng pattern na disenyo ng orienter na kontrol, na kung saan idinagdag ang isa o higit pang mga eksena. Ang mga eksena na ito ay ginagamit upang tukuyin kung ano ang nangyayari sa mga lalagyan kapag lumipat sila sa isang tukoy na punto.

Ito ay magiging isang pangunahing halimbawa:

// init Controller var Controller = bagong ScrollMagic.Controller (); // lumikha ng isang bagong eksena ng scrollMagic.Scene ({tagal: 100, // ang tagpo ay dapat tumagal para sa isang distansya ng scroll na 100px offset: 50 // simulan ang eksena na ito pagkatapos mag-scroll para sa 50px}).setPin ("# my-sticky- elemento ") // pin ang elemento para sa tagal ng eksena.addTo (controller); // italaga ang tanawin sa magsusupil

Ang isang mas advanced na halimbawa ay, makamit ang maraming mga offset, ang source code ay:

$ (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 ({trigElement: "#multiDirect", tagal: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicator ({pangalan: "baguhin ang laki"}) // magdagdag ng mga tagapagpahiwatig (nangangailangan ng plugin).addTo (magsusupil); // init magsusupil pahalang var controller_h = bagong ScrollMagic.Controller ({patayo: maling}); // bumuo ng labing-walo pahalang na var tween_h = TweenMax.to ("# animate", 0.5, {pag-ikot: 360, kadalian: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicator ({pangalan: "paikutin"}) // magdagdag ng mga tagapagpahiwatig (nangangailangan ng plugin).addTo (controller_h);});

Maaari kang makahanap ng maraming higit pang mga halimbawa sa kanilang source code sa dokumentasyon ng plugin.

GUSTO NAMIN IYONG Paano gumawa ng isang malinis na pag-install ng Windows 10 gamit ang isang USB stick