Peralihan lancar kepada pautan sauh. Javascript pudar - perubahan warna licin

Di salah satu tapak adalah perlu untuk melaksanakan penatalan halaman ke atas dengan animasi yang lancar. Dalam jquery ini dilakukan dengan satu arahan:

$("html,body").animate((scrollTop:0),500);

Tetapi dalam JavaScript tulen ia sedikit lebih rumit:

var t;
fungsi atas tatal() (
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
jika(atas>0) (
window.scrollTo(0,Math.floor(atas/1.5));
t = setTimeout("scrolltop()",30);
) lain (
clearTimeout(t);
}
kembali palsu;
}

Pembolehubah atas sama dengan jarak tatal halaman semasa dalam piksel. Setiap 30 ms nilai ini berkurangan sebanyak 1.5 kali, akhirnya lancar mencapai sifar. Ini adalah tiruan sifat mudah keluar dalam animasi CSS.

Jika anda perlu menatal halaman ke atas secara linear, tanpa pecutan, kemudian tulis sesuatu seperti ini:

window.scrollTo(0,-20);

Kemudian halaman akan menatal ke atas pada kelajuan 20 piksel setiap 30 ms.

Apakah yang menyebabkan tempoh 30 ms? Kadar penyegaran skrin yang selesa ialah kira-kira 30 bingkai sesaat, yang bermaksud tempoh setiap bingkai ialah 30 ms. Untuk kelancaran yang ideal, anda boleh membuat 60 bingkai sesaat, dan kemudian tamat masa hendaklah lebih kurang 15 ms. Tetapi ini mungkin ketinggalan pada peranti yang lemah.

Terima kasih kepada pengarang laman web tersebut

Jika anda ingin menyokong projek itu, gunakan platform Yandex.Money - ia sulit dan selamat.

Selamat petang. Hari ini saya ingin memberitahu anda tentang perkara ini kesan yang menarik, Bagaimana tatal lancar kepada sauh. Sebagai contoh, ini boleh menjadi menu di bahagian atas halaman yang, apabila diklik, akan menatal dengan lancar ke elemen yang sepadan.

Anda mungkin telah melihat kesan yang sama pada halaman pendaratan lain. Hari ini anda akan belajar bagaimana untuk melaksanakannya.

Tatal lancar untuk berlabuh menggunakan javascript

Dalam salah satu projek, tugasnya adalah untuk melaksanakan kesan yang sama dengan menatal lancar ke elemen tertentu apabila mengklik pada salah satu item menu.

Mari mulakan dengan menyambung perpustakaan jquery ke projek kami dan tulis laluan ke skrip yang bertanggungjawab untuk menatal lancar:

Kami menangani perkara ini. Sekarang anda perlu meletakkan label dan sauh yang akan berlaku penatalan.

Saya akan memberitahu anda contoh menu yang ada dalam projek untuk menyewa peralatan profesional untuk kerja pembinaan dan pembersihan. Ini dia sumber:

Peralatan pembersihan
Peralatan pembinaan
Stok

Seperti yang anda lihat, semuanya adalah standard dan tanpa helah. Blok yang sepadan dengan menu kemudiannya dibuat pada halaman pendaratan. Mereka mendedahkan perkhidmatan tertentu. Ia adalah perlu untuk membuat peralihan yang lancar ke blok ini.

Untuk menavigasi ke tempat yang dikehendaki pada tapak, cuma tambahkan pautan kepada pengecam blok yang dikehendaki. Jom buat macam tu.

Peralatan pembersihan
Peralatan pembinaan
Stok

Kini anda perlu menetapkan pengecam "membersihkan", "membina", "tindakan" kepada blok yang sepadan. Bagi saya ia kelihatan seperti ini:

Beri perhatian kepada atribut name="cleaning". Ia mesti sepadan dengan ID. Berikut adalah skrip itu sendiri:

$(function () ($("a.scrollto").klik(function () ( biarkan elementClick = $(this).attr("href") biarkan destinasi = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: destination ), 1100); return false; )); ));

Jika anda, seperti saya, perlu melaksanakan penatalan kepada beberapa elemen, kemudian letakkan sahaja pengecam, Dengan cara yang sama dan itu sahaja! sangat cara yang mudah dan mudah untuk dilaksanakan. Saya tidak mengatakan ia adalah yang terbaik, tetapi ia berkesan. Jika sesiapa boleh memudahkannya, memendekkannya atau menambah baiknya, saya amat berterima kasih kepada anda. Bagi saya, kesan ini boleh berguna kepada ramai.

Sila ambil perhatian bahawa pada permulaan artikel kami menunjukkan nama dan laluan skrip seperti berikut:

Iaitu, anda perlu mencipta folder dalam akar tapak anda yang dipanggil js dan letakkan fail yang dipanggil perehod.js di dalamnya. Dan kemudian masukkan kod skrip itu sendiri ke dalamnya. Ini saya, untuk berjaga-jaga. Bagaimana jika ada yang tidak faham?

Dan itu sahaja untuk hari ini. Sekarang anda tahu bagaimana untuk melaksanakan kesan hebat seperti menatal halaman lancar ke sauh. Selamat tinggal semua!

P.s.: Terima kasih kepada mereka yang menyahut panggilan masuk dalam rangkaian sosial membantu dengan idea untuk artikel baharu. Saya tidak tahu mengapa anda memutuskan untuk menulis kepada mesej peribadi, adalah lebih baik untuk meninggalkannya dalam ulasan, jadi lebih mudah bagi orang lain untuk menulis ulasan jika mereka melihat bahawa seseorang yang lebih berani telah melakukannya.

U kaedah ini terdapat kelemahan, ia tidak berfungsi dengan baik dengan wow.js, yang kami gunakan untuk mencipta animasi dalam artikel. Sesetengah animasi tidak dimainkan dan terdapat ruang kosong di tempat mereka. Jika sesiapa tahu bagaimana untuk membetulkannya, sila tulis dalam komen atau dalam

Document.querySelector("nav").addEventListener("klik", fungsi (e) ( var dest = e.target.href if (!dest || !(dest = dest.split("#"))) return e .preventDefault() var p = document.querySelector("utama") var a = document.getElementById(dest) var st = p.scrollTop var d = a.getBoundingClientRect().atas - p.getBoundingClientRect().atas - 8 var s = d / 1000 var pt = performance.now() requestAnimationFrame(fungsi f(t) ( console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) jika (s st + d: cur< st + d) requestAnimationFrame(f) else requestAnimationFrame(() =>p.scrollTop = st + d) )) )); * ( saiz kotak: kotak sempadan; ) nav (kedudukan: melekit; lebar: 1.25em; apungan: kiri; jidar: 8px; ) a ( paparan: blok; ketinggian baris: 1.25em; penjajaran teks: tengah; ) a:hover (latar belakang: perak; ) html, badan, utama ( tinggi: 100%; jidar: 0; ) utama ( limpahan: auto; ) h1 ( jidar: 16px 0; latar belakang: putih antik; ) 1 2 3 4 5 6 7 8 9 10 1 2

Adakah terdapat tatal lancar antara sauh dalam JS tulen? Saya tertanya-tanya jika ada skrip untuk tatal lancar dalam JS tulen, saya membuat tapak tanpa menggunakan jQuery

Adakah terdapat tatal lancar antara sauh dalam JS tulen? Saya tertanya-tanya jika terdapat skrip untuk menatal lancar dalam JS tulen, saya membuat laman web tanpa menggunakan jQuery

DALAM Kebelakangan ini Animasi yang dimainkan semasa anda menatal halaman menjadi semakin popular. Walau bagaimanapun, saya perhatikan bahawa sebahagian besar penyemak imbas tidak direka untuk animasi sedemikian. Penatalan halaman dengan tetikus tidak berlaku dengan lancar (seperti dalam Firefox), tetapi dalam beberapa langkah. Akibatnya, animasi menatal pada halaman juga bermain secara tersentak. Pada pendapat saya, masalah di sini bukan dengan pelayar sama sekali, tetapi dengan pemalam yang digunakan untuk mencipta animasi ini. Kerana merekalah yang membenarkan lompatan mengejut. Saya percaya bahawa untuk mana-mana animasi perlu ada beberapa kelajuan main balik maksimum di mana animasi akan lancar dan pengguna akan dapat memahami apa yang berlaku pada halaman. Jika anda bersetuju dengan saya, maka bergerak dengan lancar dan tanpa jerkah di bawah kucing.

Dalam artikel ini kita akan bercakap tentang pemalam untuk mencipta animasi terkawal tatal, yang saya panggil Scrollissimo. Analog terdekatnya ialah pemalam ScrollMagic. daripada ciri-ciri biasa mereka mempunyai tujuan mereka dan hakikat bahawa Greensock dipilih sebagai enjin animasi. Jika atas sebab tertentu anda belum biasa dengannya, maka mungkin untuk memahami sepenuhnya semua yang berlaku anda harus membaca artikel mengenai Greensock yang telah diterbitkan di Habré. Contohnya yang ini.

Selain persamaan, pemalam ini juga mempunyai perbezaan. Tetapi saya ingin menyerlahkan perkara utama - animasi lancar. Supaya ini tidak terdengar tidak berasas, inilah bukti untuk anda. Laman utama ScrollMagic juga mengesahkan kata-kata saya.

Bagaimana untuk menggunakannya? Sambung Untuk mula menggunakan Scrollissimo anda perlu melakukan dua perkara. Mula-mula, sambungkan Greensock. Hanya boleh disambungkan secara minima perpustakaan yang diperlukan(TweenLite, TimelineLite dan CSS):

atau, sambungkan satu perpustakaan yang mengandungi semua perkara di atas:

Dan kedua, kami menyambungkan Scrollissimo sendiri. Perpustakaan boleh didapati dari repositori. Dan untuk pengguna bower ia juga boleh dipasang dengan arahan

Bower pasang scrollissimo
Dimuat turun, sekarang sambung:

Anda boleh secara pilihan (tetapi tidak semestinya) menyertakan jQuery untuk kemudahan anda sendiri. Kemudian dalam artikel saya akan menulis kod menggunakannya untuk kebolehbacaan yang lebih baik.

Saya telah menyediakan kemungkinan untuk mencetuskan Scrollissimo bukan sahaja pada menatal seluruh halaman, tetapi juga pada sebarang acara lain, tetapi dalam kebanyakan situasi anda perlu melanggan acara tatal halaman:

$(window).scroll(function())( Scrollissimo.knock(); ));
Kini, setiap kali acara tatal berlaku, Scrollissimo akan mengira kemajuan semasa animasi dan memainkannya.

NOTA: Jika anda tidak memerlukan pemalam untuk mengira tatal halaman itu sendiri, anda boleh menghantar nilai sifat scrollTop anda kepada kaedah knock(). Jadi, sebagai contoh, Scrollissimo.knock(1000) akan memberitahu pemalam bahawa anda telah menatal halaman 1000 piksel.

NOTA: Untuk menyokong peranti sentuh, terdapat penyesuai sentuh scrollissimo.touch.js, yang melawan pembekuan halaman semasa menatal.

Itu sahaja, kini anda boleh menghidupkan secara langsung! Scrollissimo boleh menghidupkan kembar (animasi tunggal) dan garis masa (baris gilir animasi tunggal). Mari kita mulakan dengan kembar.

Animasi paling mudah Katakan kita mempunyai div merah yang cantik dipanggil Divy. Dia benar-benar mahu berkembang, tetapi setakat ini dia hanya 50 piksel lebar dan tinggi.

#Divy( kedudukan: tetap; atas: 0; kiri: 0; tinggi: 50px; lebar: 50px; latar belakang: merah; )
Mari kita buat sehingga selepas 1000 piksel dari awal halaman ia menjadi 300 piksel lebar. Untuk melakukan ini, kami mula-mula akan membuat tween yang sepadan, seolah-olah kami melakukan animasi biasa menggunakan Greensock:

Var divyTween = new TweenLite($("#Divy"), 1000, ( lebar: 300 ));
NOTA: Seperti yang anda perhatikan, satu-satunya perbezaan daripada animasi Greensock standard ialah kami menentukan tempoh animasi bukan dalam saat, tetapi dalam piksel (dalam kes kami, 1000).

Hebat! Yang tinggal hanyalah memberi kembar ini untuk dimakan oleh Scrollissimo:

Scrollissimo.add(divyTween, 0, 6);
Sekarang mari kita perlahan dan lihat baris ini. Hujah pertama adalah tween yang sama yang kami buat. Hujah kedua adalah dari kedudukan apa untuk memulakan animasi. Dalam kes kami, ini adalah permulaan halaman (0 piksel). Hujah ketiga kekal. Di sinilah kami sampai ciri utama, yang membezakan Scrollissimo daripada pemalam biasa. Hujah ketiga ialah kelajuan main balik animasi maksimum. Kelajuan ini diukur dalam abstrak unit tanpa dimensi dan dipilih "oleh mata". Saya akan segera menjawab soalan "Apa yang berlaku jika anda tidak menentukan parameter ketiga?" Jika anda tidak nyatakan kelajuan maksimum, maka ia tidak akan wujud. Animasi ini akan dimainkan dengan cara yang sama seperti yang akan dimainkan oleh pemalam biasa.

Garis Masa Jadi, Divy telah berkembang dengan luas. Bagaimanakah kita boleh membantunya membesar dengan ketinggian? Rangkaian animasi atau, dalam istilah Greensock, garis masa akan membantu kami di sini. Jika anda pernah menggunakannya sebelum ini untuk membina animasi, maka tiada perkara baharu untuk anda. Dengan cara yang sama seperti yang kami lakukan dengan kembar di atas, kami melakukannya dengan garis masa. jsFiddle

Var divyTimeline = TimelineLite baharu(); divyTimeline.to($("#Divy"),1000 ( lebar: 300 )); divyTimeline.to($("#Divy"), 1000, ( tinggi: 300 )); Scrollissimo.add(divyTimeline, 0, 6);

Kesimpulan Itu sahaja yang anda perlukan untuk berjaya mencipta animasi menatal menggunakan Scrollissimo. Di sinilah saya mungkin akan menamatkan artikel. Sebagai kesimpulan, saya akan mengatakan bahawa pemalam sedang dalam pembangunan aktif, ia mempunyai ruang untuk berkembang dan bertambah baik. Oleh itu, saya berbesar hati menerima sebarang soalan, nasihat dan permintaan ciri.

Susun atur, hidupkan!