Scrollmagic: reka bentuk web yang menyeronokkan

Dalam reka bentuk web trend adalah seperti gaya yang telah digunakan untuk merealisasikan laman-laman yang sangat diterima oleh pengguna, biasanya dalam tempoh sementara. Sebahagian daripada trend setakat ini pada 2016 dan, nampaknya, akan terus menetapkan nada pada 2017, adalah animasi dan bahagian panjang dengan banyak tatal.

Ia bukan rahsia bahawa gaya ini agak menarik dan menyeronokkan untuk pengguna, dengan animasi kita boleh membuat navigasi laman web intuitif dan menghiburkan selagi mereka digunakan dengan baik. Atas sebab ini, kami telah membuat tutorial untuk memasukkan skrol animasi di laman web anda, menggunakan plugin jQuery ScrollMagic.

ScrollMagic: Reka Bentuk Web Fun

ScrollMagic adalah perpustakaan yang dibuat dalam javascript untuk mencapai interaksi apabila memindahkan laman web. Ia adalah penyusunan semula lengkap Superscrollorama pendahulu dan senibinanya berdasarkan pada plugin yang menawarkan penyesuaian mudah dan diperpanjang.

Adalah ideal jika kita mahu melaksanakan beberapa perkara berikut:

• Animasi berdasarkan kedudukan atau anjakan tapak Mencetuskan animasi atau menyegerakkannya dengan pergerakan tatal Tambah kesan paralaks tanpa banyak usaha Buat halaman dengan tatal tak terhingga, mengendalikan memuatkan kandungan dengan ajax.

Ciri ScrollMagic

• Prestasi yang dioptimumkan, ia adalah ringan, fleksibel dan membolehkan diperluaskan.Pengurusan acara dan pengaturcaraan berorientasikan objek.Ia menyokong reka bentuk web adaptif.Ia mempunyai sokongan untuk pergerakan di kedua-dua arah (mendatar dan menegak) Ia mempunyai sokongan untuk pergerakan dalam kontena (div), walaupun banyak pada satu halaman.Ia berfungsi dengan sempurna untuk pelayar: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Dalam repositori GitHub, ia mempunyai dokumentasi terperinci dan banyak contoh aplikasi.

Dapatkan ScrollMagic

Ia boleh didapati dalam pelbagai cara.

1: GitHub

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

2: Bower

bower install scrollmagic

3: pengurus pakej nod

npm memasang scrollmagic

4: CDN

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

Anda juga boleh membaca Bagaimana untuk menyesuaikan reka bentuk e-mel dalam Outlook

Pemasangan dan penggunaan

Pemasangannya agak mudah, kita hanya memasukkan fail kernel dalam fail html yang mana kita mahu menggunakannya.

;

Untuk digunakan, plugin menyediakan corak reka bentuk berorientasikan pengawal, yang mana satu atau lebih adegan ditambah. Adegan ini digunakan untuk menentukan apa yang berlaku di dalam bekas apabila mereka bergerak ke titik tertentu.

Ini akan menjadi contoh asas:

/ / init controller var controller = new ScrollMagic.Controller (); // buat ScrollMagic.Scene yang baru ({duration: 100, // scene harus bertahan untuk jarak skrol 100px offset: 50 // start scene ini setelah bergulir untuk 50px}).setPin ("# my-sticky- elemen ") // pin elemen untuk tempoh kejadian.addTo (pengawal); // tetapkan tempat kejadian kepada pengawal

Satu contoh yang lebih canggih ialah, mencapai pelbagai offset, kod sumbernya akan:

$ (function () {// wait for document ready // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3, easy: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", durasi: 400, mengimbangi: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // add indicators (requires plugin).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); 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);});

Anda boleh menemui lebih banyak contoh dengan kod sumbernya dalam dokumentasi plugin.

KAMI MEREKOMENDASIKAN ANDABagaimana melakukan pemasangan bersih Windows 10 menggunakan batang USB