Unduh skrip salju. Desain web dan optimasi mesin pencari. Menghubungkan font "Lobster"
Selamat siang dan Selamat Tahun Baru. Pada malam Tahun Baru, saya ingin berbagi dengan Anda plugin salju turun yang sangat ringan, indah, dan bersahaja. Script ini sangat ringan dan mudah dimasukkan ke dalam file html, tanpa menyulitkan pengerjaan kode html situs itu sendiri. Benar, itu bisa ditempatkan di file terpisah. Namun untuk kenyamanan, saya melakukan semuanya dalam satu file.
Tidak banyak yang bisa dikatakan di sini, lebih baik saksikan demonstrasi turunnya salju ini. Selain itu, terdapat background yang sangat indah dan tulisan "Selamat Tahun Baru" yang ditulis dengan font "Lobster" yang cantik dari Google. Anda dapat dengan mudah mengubah file ini menjadi kartu ucapan online.
Menghubungkan skrip kepingan salju yang jatuh ke situs web yang sudah selesai 1. Hubungkan perpustakaan jQueryPenghubungnya seperti ini: antara tag dan masukkan kode berikut:
2. Hubungkan gaya
Rekatkan kode css ke file css Anda (biasanya style.css):
#kanvas ( batas: 1px hitam pekat; posisi: absolut; indeks-z: 10000; ) #flake ( warna: #fff; posisi: absolut; ukuran font: 25px; atas: -50px; )
3. Buat file snow.jsMari buat file snow.js dan masukkan kode javascript berikut di sana:
var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0,5 + Math.random ( ); var sizeFlake = 10 + Math.random() * 20; var endPositionTop = documentHeight - 40; var endPositionLeft = startPositionLeft - 100 + Math.random() * 200; * 5000; $("#flake") .clone() .appendTo("body") .css(( kiri: startPositionLeft, opacity: startOpacity, "ukuran font": sizeFlake )) .animate(( atas: endPositionTop, kiri : endPositionLeft, opacity: 0.2 ), durasiFall, "linear", function() ( $(this).remove() ), 500); var salju =(); var snowflex =(); snowflex.create = fungsi( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex .style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; = "#F3F3F3"; flex.style.opacity = Matematika.acak(); dokumen.getElementsByTagName("body").appendChild(flex); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex .style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; ) ; dokumen.getElementsByTagName("body").removeChild(flex) ), 45 + Math.random() * 20); salju.badai = fungsi())( var t = setInterval(fungsi())( salju.snowflex(); ), 500); //badai salju(); var kabut =(); kabut.draw = fungsi(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Matematika.PI*2,benar); ctx.closePath(); kabut.mulai = fungsi())( var ctx = document.getElementById("kanvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(fungsi())( x = 300 + 300*Matematika.dosa(x); y = 300 + 300* -Matematika.cos(x += 2; kabut.draw(ctx, x, y); //kabut.mulai();
Kami menyertakan file js di:
4. Tempelkan kode htmlnya
Nah, yang paling penting tetap - masukkan kode html salju yang turun di mana saja di:
❄
Jika Anda melakukan semuanya dengan benar, maka salju akan mulai turun di situs Anda.
Menghubungkan gambar latar belakang, header besar, dan kepingan salju yang berjatuhanOpsi ini berbeda karena memiliki gambar latar belakang dan judul "Selamat Tahun Baru" yang besar. Menghubungkan versi skrip salju turun ini ke situs web Anda cukup sederhana. Perlu:
1. Unduh arsip dan unzip 2. Hubungkan perpustakaan jQueryPastikan untuk menyertakan perpustakaan jQuery (tidak perlu jika Anda sudah menyertakan perpustakaan ini). Penghubungnya seperti ini: antara tag dan masukkan kode berikut:
3. Hubungkan font "Lobster"
Mirip dengan menghubungkan perpustakaan jQuery, kami menghubungkan font untuk tulisan “Selamat Tahun Baru” kami:
Tentu saja, jika Anda tidak memerlukan prasasti dan font ini, Anda tidak perlu memasukkannya, tetapi kemudian di css, hapus “font-family: “Lobster”, kursif;” dari atribut H1, atau ganti dengan font Anda sendiri
4. Menghubungkan gayaOpsi A: Tempelkan kode css ke file css Anda. Berikut kodenya:
Img.bg ( /* Menetapkan aturan untuk mengisi latar belakang */ min-height: 100%; min-width: 1024px; /* Mengatur penskalaan proporsional */ lebar: 100%; tinggi: otomatis; /* Mengatur pemosisian */ posisi: tetap; atas: 0; kiri: 0; ) h1 ( font-family: "Lobster", kursif; warna: #FFF; ukuran font: 90 piksel; perataan teks: tengah; tinggi garis: 95 piksel; berat: normal; margin-atas: 300px; bayangan teks: 5px 5px 5px #000; ) @media screen dan (lebar maksimal: 1024px) ( /* Khusus untuk gambar khusus ini */ img.bg ( kiri: 50% ; margin-kiri: -512px; /* 50% */ ) ) html, isi (keluarga font: Helvetica, Arial, sans-serif; ukuran font: 12px; tinggi garis: 16px; padding: 0; margin: 0; warna: #333; ) .bar ( warna latar: #111; warna: #f0f0f0; bayangan kotak: 0px 0px 2px #333; tinggi garis: 25px; bantalan: 0px 20px; opacity: 0,7; ) . bar:hover ( opacity: 1; ) .bar a ( warna: #DDD; ) .bar a:hover ( warna: #FFFFFF; ) a ( warna: #FFFFFF; dekorasi teks: tidak ada; ) a:hover ( warna : #CCC; ) #kanvas ( batas: 1 piksel hitam pekat; posisi: absolut; indeks-z: 10.000; ) #flake ( warna: #fff; posisi: absolut; ukuran font: 25px; atas: -50px; ) #halaman ( posisi: relatif; )
Opsi B. Anda juga dapat membuat file terpisah, misalnya snow.css dan menempelkan kode yang sama di sana, meskipun kode tersebut harus disertakan di head sebagai berikut:
5. Hubungkan skrip salju yang turun
Opsi A. Untuk melakukan ini, kita perlu memasukkan kode javascript berikut di bagian paling bawah situs (sebelum ditutup):
var t = setInterval(fungsi())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0,5 + Math.random ( ); var sizeFlake= 10 + Math.random() * 20; var endPositionTop= tinggi dokumen - 40; var endPositionLeft= startPositionLeft - 100 + Math.random() * 200; * 5000; $("#flake") .clone() .appendTo("body") .css(( kiri: startPositionLeft, opacity: startOpacity, "ukuran font": sizeFlake )) .animate(( atas: endPositionTop, kiri : endPositionLeft, opacity: 0.2 ), durasiFall, "linear", function() ( $(this).remove() ), 500); var salju =(); var snowflex =(); snowflex.create = fungsi( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex .style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; = "#F3F3F3"; flex.style.opacity= Matematika.acak(); dokumen.getElementsByTagName("body").appendChild(flex); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex .style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; ) ; dokumen.getElementsByTagName("body").removeChild(flex) ), 45 + Math.random() * 20); salju.badai = fungsi())( var t= setInterval(fungsi())( salju.snowflex(); ), 500); //badai salju(); var kabut =(); kabut.draw = fungsi(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Matematika.PI*2,benar); ctx.closePath(); kabut.mulai = fungsi())( var ctx = document.getElementById("kanvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(fungsi())( x = 300 + 300*Matematika.sin(x); y = 300 + 300* -Matematika.cos(x); //kabut.mulai();
Opsi B. Sama seperti kode css, javascript dapat ditempatkan di file terpisah dan disebut juga snow.js dan disertakan di head:
6. Isi gambar latar belakang
Unggah gambar bg.jpg dari arsip ke root situs Anda
7. Masukkan kode htmlnyaNah, yang paling penting tinggal masukkan kode html salju yang turun:
Selamat tahun baru! ❄
Script salju yang turun telah berhasil dihubungkan. Pastikan untuk menontonnya beraksi. Semua yang terbaik!
Desain web dengan jQuery sangat mudah! "Salju Jatuh" di situs webMenjelang Tahun Baru, dua hal muncul di sebagian besar situs web: “salju turun” dan halaman penjualan dan diskon. Keduanya dilakukan dengan sangat sederhana. Salju - menggunakan plugin jQuery, dan diskon serta penjualan dengan menggambarkan angka yang lebih besar dicoret dengan garis merah tebal di atas label harga, yang diduga sesuai dengan harga lama.
Namun, kami sekarang hanya tertarik untuk menempatkan “salju yang turun” di halaman situs. Ada beberapa pilihan sederhana untuk ini. Mari kita lihat dua di antaranya berdasarkan jQuery.
Kami memulai instalasi "salju yang turun" dengan membuat folder baru, yang secara alami diberi nama salju, kemudian mengunduh arsip dan membongkarnya ke dalam folder ini. Kami akan memiliki dua skrip jquery-1.8.3.min.js dan jquery.snow.js di dalamnya.
Selanjutnya, Anda perlu menambahkan ke header halaman di dalam tag ... baris berikut yang menunjukkan jalur ke skrip ini, dan JavaScript kecil untuk menginisialisasi "salju yang turun":
$(dokumen).siap(fungsi())(
$.fn.salju();
});
Agar salju muncul di halaman situs, cukup tambahkan di dalam tag
.
Plugin ini hanya memiliki empat pengaturan. Mereka terletak di awal file jquery.snow.js dan dapat diubah di editor mana pun atau di Notepad:
minSize: 10 , // ukuran kepingan salju minimum
maxSize: 20 , // ukuran maksimum kepingan salju
newOn: 500 , // frekuensi kemunculan kepingan salju dalam ms, yaitu kepadatan salju
flakeColor: "#bbbbbb" // warna kepingan salju
Perhatikan juga nilai z-index:10 untuk salju, yang diatur di baris pertama file jquery.snow.js. Ini mengatur posisi kepingan salju di atas bilah geser (peragaan slide) dan menu tarik-turun, jika halaman Anda memilikinya.
Versi kedua dari "jatuhnya salju"
Untuk opsi ini, Anda menggunakan gambar kepingan salju Anda sendiri, seperti yang ditunjukkan pada Gambar 1. Berkat ini, plugin menjadi lebih berwarna, dan selain itu, dapat berhasil digunakan untuk efek lainnya. Misalnya, dengan mengganti gambar kepingan salju dengan kelopak mawar, Anda dapat menghiasi halaman situs web pernikahan, dan bunga aster yang berjatuhan akan cocok dengan situs web tentang liburan musim panas.
Gambar.1. "Salju Jatuh" di situs web
Untuk instalasi, kami kembali menggunakan folder salju, hanya sekarang kami akan membongkar arsip lain ke dalamnya, di mana, selain skrip, ada empat gambar kepingan salju yang berbeda. Selanjutnya, mirip dengan contoh pertama, di dalam tag... masukkan baris yang menunjukkan jalur ke file “jatuh salju” yang baru:
Dan terakhir, tambahkan baris di dalam tag (sebaiknya di awal halaman)
.
Jika Anda tidak memiliki salju, pastikan Anda memasukkan alamat lengkap gambar kepingan salju dengan benar di baris file snow.js berikut:
var img=" 
Penyesuaian kepadatan salju ditentukan dalam file yang sama dengan argumen numerik di baris
setTimeout("salju("+id+");",100 ); // frekuensi kepingan salju,
dan kecepatan pergerakan kepingan salju dalam satu garis
$("#snow_"+id).animate((atas:"150%",kiri:""+end_x+"%"),20000 ,function() // kecepatan pergerakan kepingan salju
Selain itu, seperti pada opsi pertama, perhatikan nilai z-index:10 sehingga salju menutupi bilah geser, menu tarik-turun, dll. yang terletak di halaman.
Hanya ada sedikit waktu tersisa sebelum musim dingin, dan sejumlah besar webmaster mulai menciptakan suasana yang tepat di situs mereka. Pada kesempatan kali ini, kami menyajikan pilihan efek salju untuk website Anda.
jSnow – skrip salju turun universal di jQueryKami akan memulai pilihan kami dengan efek salju yang sangat indah, yang ditambahkan ke situs menggunakan plugin bernama “jSnow”.
Demonstrasi:
Setuju - cantik!
Untuk memasang efek ini di situs web Anda, lakukan hal berikut.
1. Download arsip jsnow.zip di akhir artikel. Buka zip dan unggah konten ke situs web Anda melalui FTP atau metode lain yang nyaman bagi Anda.
Sayangnya, skrip ini tidak berfungsi dengan jQuery versi baru, jadi kami puas dengan apa yang kami miliki.
3. Sebelum Gunakan tag penutup untuk memasukkan skrip:
$(document).ready(function() ( $("body").jSnow(( vSize: 100, // Ukuran area serpihan: 30, // Jumlah kepingan salju flakeColor: ["#fff"], // Warna flakeMinSize : 10, // Ukuran minimum kepingan salju yang jatuhMaxSize: 20, // Ukuran maksimum kepingan salju yang jatuhSpeedMin: 1, // Kecepatan minimum kepingan salju yang jatuhSpeedMax: 2, // Kecepatan maksimum kepingan salju yang jatuhKode:["." ] // Jenis kepingan salju ));
Kode ini menyesuaikan ukuran kepingan salju, ketinggian area yang ditempati, warna, dan parameter lain yang dikomentari.
Skripnya, seperti yang Anda pahami, bersifat universal, dan alih-alih salju bundar, Anda dapat menambahkan bintang, misalnya seperti ini:
FlakeCode:["*"] // Penampilan kepingan salju
Atau sekumpulan salju bulat dan bintang:
FlakeCode:[".", "*"] // Penampilan kepingan salju
Serta simbol lainnya (dan bahkan tanda dolar - $).
Scriptnya bagus untuk mendekorasi bagian atas situs tanpa tumpang tindih dengan konten utama.
Badai Salju – skrip salju turun yang cerdas dalam JavaScriptMengapa pintar, Anda bertanya? Karena pada script ini (berbeda dengan script lain yang dibahas di artikel ini) terdapat efek tambahan yaitu memukul mundur kepingan salju. Artinya, saat Anda menggerakkan kursor mouse di situs Anda, kepingan salju mengalir ke arah yang berlawanan. Semakin jauh kursor dari tengah layar, semakin cepat kecepatan kepingan salju.
Demonstrasi:
Untuk menginstal efek ini di situs Anda, tidak diperlukan perpustakaan tambahan. Yang perlu Anda lakukan adalah:
1. Download arsip snowstorm.zip di akhir artikel. Buka zip dan unggah konten ke situs Anda dengan cara yang nyaman bagi Anda.
window.onload = function() ( snowStorm.snowColor = "#fff"; // Warna kepingan salju snowStorm.flakesMaxActive = 100; // Jumlah maksimum kepingan salju yang terlihat snowStorm.followMouse = true; // true - kejar kursor, false - tidak ada snowStorm.snowCharacter = "."; // Jenis kepingan salju );
Jika perlu, lakukan perubahan pada animasi skrip.
Selain fakta bahwa kepingan salju menjauh dari kursor, beberapa di antaranya menempel di bagian bawah layar, menciptakan sedikit kesan kepingan salju membentuk tumpukan salju.
Hujan salju – efek turunnya salju dengan tumpukan salju menggunakan jQuerySaya paling suka skrip ini, karena skrip ini mengimplementasikan butiran salju halus dan juga mengumpulkan tumpukan salju kecil pada elemen yang ditentukan.
Demonstrasi:
Efek ini membutuhkan waktu sedikit lebih lama untuk dipasang dibandingkan yang lain.
1. Jika situs Anda tidak memiliki perpustakaan jQuery, sertakan di bagian HEAD:
3. Tetapkan kelas “darkBg” ke tag pembuka:
4. Sebelum sertakan skrip dengan tag penutup:
$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((collection: ".collectonme", flakeCount: 200 // Jumlah kepingan salju )); ));
5. Dan pada tahap akhir, berikan kelas pada elemen-elemen di mana tumpukan salju akan terbentuk:
Kelas="koleksi saya"
Jika Anda tidak ingin terbentuknya tumpukan salju di situs, hapus baris dari skrip:
Koleksi: ".collectonme",
Ini adalah tindakan wajib, jika tidak, salju tidak akan turun di situs Anda.
Skrip yang bagus, inilah yang kami gunakan di situs web kami sebelumnya.
Efek salju yang turun berlapis halus menggunakan CSS3Di sini, seperti yang Anda pahami, kami tidak akan menggunakan semua jenis skrip, tetapi akan menggunakan CSS murni.
Demonstrasi:
Ajaib, bukan?
Untuk menginstal sendiri efek ini, lakukan tiga langkah sederhana.
1. Download arsip snow_img.zip di akhir artikel. Buka zip dan unggah konten ke situs Anda melalui FTP atau melalui pengelola file hosting Anda.
2. Di file gaya Anda, masukkan (sebaiknya di bagian paling bawah):
SnowContainer ( lebar: 100%; tinggi: 100%; posisi: absolut; atas: 0; kiri:0; z-index: -1; ) #snow ( lebar: 100%; tinggi: 100%; gambar latar: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation: salju 20 detik linier tak terbatas; -ms-animasi: salju 20an linier tak terbatas; animasi: salju 20an linier tak terbatas; ) @keyframes salju ( 0% ( posisi latar belakang: 0px 0px, 0px 0px; ) 100% ( posisi latar belakang : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes salju ( 0% ( posisi latar belakang: 0px 0px, 0px 0px, 0px 0px; ) 100% ( posisi latar belakang: 500px 1000px, 400px 400px, 300px 300px; ) ) @-webkit- keyframes salju ( 0% ( posisi latar belakang: 0px 0px, 0px 0px, 0px 0px; ) 100% ( posisi latar belakang: 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- keyframes salju ( 0% ( latar belakang- posisi: 0px 0px, 0px 0px, 0px 0px; ) 100% ( posisi latar belakang: 500px 1000px, 400px 400px, 300px 300px; ) )
Kemudian simpan semua perubahan.
Berikut adalah pilihan efek salju bagus yang pasti akan menyenangkan pengunjung situs Anda.
