Pada salah satu tapak adalah perlu untuk melaksanakan menatal (menatal) halaman ke atas dari animasi 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.

Hello, kawan-kawan. Saya ingin menyentuh topik seperti peralihan yang lancar kepada pautan utama pada halaman tapak web. Jika anda menulis di laman web anda teks yang banyak, formatkannya dengan betul, dengan tangkapan skrin dan elemen lain, kemudian tatal lancar ke sauh akan menjadikan reka bentuk lebih menarik. Tetapi mari kita ketahui dahulu apa itu dan bagaimana ia akan berfungsi. Anda boleh melihat contoh kerja pada halaman ini dengan mengklik pada item dalam senarai ini.

Apakah pautan sauhBagaimana untuk membuat pautan sauh HTML

Pautan sauh dibuat dalam bahasa penanda hiperteks. Mencipta sauh dalam HTML sama sekali tidak rumit. Apa yang anda perlukan hanyalah sedikit pengetahuan tentang bahasa ini dan pemahaman tentang cara ia berfungsi. Jika anda tidak mempunyai sebarang masalah dengan ini, maka anda boleh melakukannya tanpa banyak kesukaran. Jadi, untuk berlabuh halaman HTML, anda perlu menulis sesuatu seperti berikut dalam kod.

Dan untuk pergi ke tempat ini pada halaman di mana label ini ditunjukkan, anda perlu menulis ini dalam pautan:

Lompat ke label pada halaman

Lompat ke label pada halaman

Dengan pendekatan ini, peralihan akan dilakukan dengan lompatan segera dari satu tempat ke tempat lain

Tatal lancar untuk berlabuh

Dengan perkembangan teknologi web, telah menjadi mungkin untuk mencipta laman web yang lebih cantik dan dinamik dengan pelbagai kesan, dsb. Dan ia benar-benar hebat apabila anda boleh menarik minat pelawat dalam sesuatu selain kandungan dan meninggalkan kesan yang baik untuk melawat tapak. Pada tahap tertentu, ini bermain di tangan pemilik tapak. Untuk peralihan yang lancar ke sauh, kami akan menggunakan perpustakaan dan menyambungkan skrip yang sangat kecil.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< script type= "text/javascript" >$(dokumen) .sedia (fungsi () ( $("a") .klik (fungsi () ( elementClick = $(this ) .attr ( "href" ); destinasi = $(elementClick) .offset () .top ; jika ($.browser .safari ) ($("body" ) .animate ( ( scrollTop: destination ), 1100); ) else ( $( "html" ) .animate ( ( scrollTop: destination ) , 1100); ) kembali palsu ;)) ;));

$(dokumen).sedia(fungsi() ( $("a").klik(fungsi () ( elementClick = $(this).attr("href"); destinasi = $(elementClick).offset().atas ; if($.browser.safari)( $("body").animate(( scrollTop: destination ), 1100); )else( $("html").animate(( scrollTop: destination ), 1100); ) kembali palsu; ));));

Terdapat tiga cara untuk menyambungkan skrip ini. Yang pertama ialah memasukkan pada halaman antara tag kepala. Yang kedua ialah membawanya ke fail berasingan dan sambung secara berasingan seperti ini:

Label pada halaman untuk pergi ke halaman tersebut

Kedua, jika anda mahu tatal lancar berlaku bukan untuk semua sauh, tetapi hanya untuk yang tertentu, anda perlu menukar baris ketiga skrip seperti ini:

Lompat ke label pada halaman

Satu lagi nuansa yang saya ingin nyatakan ialah, tidak seperti sauh HTML yang mudah, sauh jQuery tidak mendaftar dalam bar alamat pautan penyemak imbas ke sauh apabila menavigasi kepadanya. Supaya anda memahami perkara yang saya perkatakan, saya akan memberikan contoh tentang rupa pautan ke sauh dalam bar alamat penyemak imbas.

#sauh

Seperti yang anda mungkin sudah meneka, artikel itu tidak akan bercakap tentang tulip dan mawar, atau cara menanam pokok epal dari chamomile (jadi ini bukan tempat untuk Michurinians muda :-), tetapi kita akan bercakap tentang menukar warna unsur halaman web, tentang aliran lancar satu warna ke warna lain, i.e. Mari kita bercakap tentang kesan pudar.

Contoh

Mari kita mulakan dengan contoh: tuding pada gambar dan kemudian alihkan kursor.

Jika anda tidak berminat dengan butiran teori, tetapi perlu penyelesaian siap sedia kemudian kepada anda.

Perumusan masalah

Dua warna diberikan: warna permulaan dan warna akhir.

Ia adalah perlu untuk mencari warna perantaraan, menggunakan mana satu demi satu kepada elemen pada halaman, kita akan mendapat peralihan yang lancar dari warna awal ke yang terakhir. Anda juga harus mengetahui berapa banyak warna perantaraan ini perlu ada dan selepas masa satu warna perantaraan harus bertukar kepada yang lain.

Melihat lebih dalam kepada isu tersebut

Mari kita ambil, sebagai contoh, putih sebagai warna awal, dan oren-merah sebagai warna akhir.

#FFFFFF

?

...n...

?

#FF4500

Sekarang kita perlu mencari warna perantaraan. baiklah. Tetapi bagaimana?! Bagaimanakah kita harus mendekati isu ini? Untuk melakukan ini, mari kita ingat (atau ketahui :-) bagaimana warna terbentuk pada skrin monitor. Sebarang warna pada skrin monitor terbentuk daripada tiga warna utama: merah (Merah), hijau (Hijau) dan biru (Biru), dengan mencampurkannya (iaitu. model warna RGB). Dan warna ditunjukkan pada halaman web atau dengan nilai berangka dalam yang sama sistem RGB, atau literal bagi warna yang dinamakan (contohnya, Putih untuk putih, Merah untuk merah, dsb., tetapi tidak semua warna mempunyai nama), yang masih menunjuk kepada nilai angka. Tetapi kami tidak akan mempertimbangkan untuk menentukan warna mengikut nama, kerana nama dicipta untuk kemudahan hafalan manusia, tetapi dalam kes kami, mereka akan menimbulkan kesulitan semasa pengiraan, kerana masih memerlukan terjemahan ke dalam bentuk berangka. Anda boleh menetapkan nilai berangka warna dalam dua cara: perenambelasan dan berfungsi.

• Dalam tatatanda heksadesimal, nilai RGB ialah format seterusnya: Aksara "#" serta-merta diikuti oleh tiga atau enam aksara heksadesimal. Nilai RGB tiga digit (#rgb) ditukar kepada jujukan enam digit (#rrggbb) dengan menduplikasi digit dan bukannya menambah sifar. Contohnya, #fb0 mengembang kepada #ffbb00. Oleh itu, warna putih (#ffffff) boleh ditentukan dalam bentuk yang lebih pendek (#fff).
• Dalam perwakilan berfungsi, format rakaman nilai RGB ialah pandangan seterusnya: rentetan "rgb(", serta-merta diikuti dengan senarai tiga nilai sebenar (atau integer, atau peratusan) yang dipisahkan koma, serta-merta diikuti dengan kurungan ")". Nilai integer 255 adalah bersamaan dengan nilai peratusan 100% dan nilai heksadesimal F atau FF, jadi rgb(255,255,255) = rgb(100%,100%,100%) = #FFF.

Oleh itu, warna yang diberikan dalam bentuk berangka memberi kita nilai warna komponennya, yang akhirnya memberi kita peluang, dengan menukar setiap warna utama warna awal, untuk tiba pada warna akhir kedua. Jika kita menganggap kita contoh khusus, maka kita mempunyai yang berikut (nilai dalam sistem perpuluhan ditunjukkan dalam kurungan):

#FFFFFF	=	FF (255)	FF (255)	FF (255)
		0	– CE (206)	– FF (255)
#FF4500	=	FF (255)	45 (49)	0

Itu. untuk daripada putih untuk mendapatkan oren-merah, anda perlu membiarkan komponen merah warna putih tidak berubah (ubah nilai kepada sifar), tolak 206 daripada hijau, dan tolak 255 daripada biru. Mari kita panggil nombor ini (ΔR = 0, ΔG = -206, ΔB = -255) kenaikan.

Sekarang, untuk mendapatkan, sebagai contoh, dua warna perantaraan + warna akhir (jumlahnya 3), anda perlu menukar nilai awal triplet RGB (#FFFFFF) bukan dengan nilai penuh kenaikan ΔR, ΔG, ΔB, tetapi pertama dengan 1/3, kemudian dengan 2/3 dan akhirnya dengan 3/3 (3/3 = 1, ini adalah penuh makna kenaikan untuk mendapatkan warna akhir, yang kami, pada dasarnya, sudah tahu).

#FFFFFF	=	FF (255)	FF (255)	FF (255)
#FFBAAA	=	255 -0	255 - 206*1/3 = 186 (BA)	255 - 255*1/3 = 170 (AA)
#FF7655	=	255 - 0	255 - 206*2/3 = 118 (76)	255 - 255*2/3 = 85 (55)
#FF4500	=	FF (255)	45 (49)	0

Jadi, kami telah belajar mengira warna perantaraan. Ia masih untuk menjelaskan satu lagi nuansa, agar seseorang dapat melihat warna perantaraan, adalah perlu untuk membuat kelewatan masa antara menukar warna, jika tidak, perubahan akan berlaku dengan cepat sehingga pengguna tidak akan melihat warna perantaraan.

Kini kami mempunyai gambaran keseluruhan yang jelas dan kami boleh meneruskan menulis kod. Terdapat warna permulaan dan akhir, kita boleh mengira n warna perantaraan (di mana n dipilih secara sewenang-wenangnya), dan terdapat nilai kelewatan t (di mana t dipilih secara sewenang-wenangnya). Oleh itu, algoritma adalah seperti berikut: tetapkan warna perantaraan pertama kepada elemen pada halaman web, buat kelewatan dengan jumlah t, tetapkan warna perantaraan kedua kepada elemen, buat penangguhan, ..., tetapkan perantaraan ke- warna kepada elemen, iaitu warna akhir.

Perlaksanaan

Sebagai contoh, mari buat butang yang latar belakangnya berubah daripada putih kepada oren-merah apabila diklik.

Jom... Pemikiran salah pertama yang mungkin terlintas di fikiran ialah mengira warna perantaraan dalam gelung, membuat kelewatan selepas setiap lelaran.

Fungsi fade() ( untuk (var i = 1; i