Qar skriptini yükləyin. Veb dizayn və axtarış motorunun optimallaşdırılması. "Lobster" şriftinin bağlanması
Gününüz xeyir və Yeni iliniz mübarək. Yeni il ərəfəsində çox yüngül, gözəl və iddiasız yağan qar plaginini sizinlə bölüşmək istəyirəm. Bu skript həqiqətən çox yüngüldür və saytın html kodunun özü ilə işləməyi çətinləşdirmədən html faylına asanlıqla uyğun gəlir. Düzdür, ayrı bir faylda yerləşdirilə bilər. Ancaq rahatlıq üçün hər şeyi bir faylda etdim.
Burada deyiləcək çox şey yoxdur, bu yağan qarın nümayişini izləmək daha yaxşıdır. Bundan əlavə, çox gözəl fon və Google-dan gözəl "Lobster" şriftində yazılmış "Happy New Year" yazısı var. Bu faylı asanlıqla onlayn təbrik kartına çevirə bilərsiniz.
Düşən qar dənəcikləri skriptinin hazır vebsayta qoşulması 1. jQuery kitabxanasını birləşdirinBu şəkildə bağlanır: teqlər arasında və aşağıdakı kodu daxil edin:
2. Üslubları birləşdirin
CSS kodunu css faylınıza yapışdırın (adətən style.css):
#kətan ( haşiyə: 1px bərk qara; mövqe: mütləq; z indeksi: 10000; ) #flake (rəng: #fff; mövqe: mütləq; şrift ölçüsü: 25px; üst: -50px; )
3. snow.js faylını yaradınGəlin snow.js faylı yaradaq və ora aşağıdakı javascript kodunu daxil edək:
var t = setInterval(function())( var documentHeight = $(sənəd).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0.5 + Math.random ( ); var sizeFlake = 10 + Math.random() * 20 var endPositionTop = documentHeight - 40; * 5000; $("#flake") .clone() .appendTo("body") .css(( sol: startPositionLeft, qeyri-şəffaflıq: startOpacity, "font-size": sizeFlake )) .animate(( üst: endPositionTop, sol : endPositionLeft, qeyri-şəffaflıq: 0.2 ), durationFall, "xətti", funksiya() ( $(this).remove() ), 500); var qar = (); var snowflex = (); snowflex.create = funksiya( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex .style.top = - 50 + Math.random() * 20 + "px"; = "#F3F3F3"; flex.style.opacity = Math.random("document.getElementsByTagName"). snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex) stil.top) + 5 + "px"; ); document.getElementsByTagName("body").removeChild(flex) ), 45 + Math.random() * 20); snow.storm = function())( var t = setInterval(function())( snow.snowflex(); ), 500 ); //snow.storm(); var duman = (); fog.draw = funksiya(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true ctx.closePath(); fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x) = 300 + 300* -Math.cos(x); //fog.start();
js faylını daxil edirik:
4. HTML kodunu yapışdırın
Yaxşı, ən vacib şey qalır - istənilən yerə yağan qarın html kodunu daxil edin:
❄
Hər şeyi düzgün etmisinizsə, saytınıza qar yağmağa başlayacaq.
Fon şəklini, böyük başlığı və düşən qar dənələrini birləşdirinBu seçim fon şəkli və böyük "Yeni iliniz mübarək" başlığının olması ilə fərqlənir. Yağan qar skriptinin bu versiyasını veb saytınıza bağlamaq olduqca sadədir. Lazımdır:
1. Arxivi yükləyin və arxivdən çıxarın 2. jQuery kitabxanasını birləşdirinJQuery kitabxanasını daxil etməyinizə əmin olun (əgər sizdə artıq bu kitabxana varsa, lazım deyil). Bu şəkildə bağlanır: teqlər arasında və aşağıdakı kodu daxil edin:
3. "Lobster" şriftini birləşdirin
JQuery kitabxanasını birləşdirən kimi, biz də "Yeni iliniz mübarək" yazımız üçün şrifti birləşdiririk:
Təbii ki, bu yazıya və şriftə ehtiyacınız yoxdursa, onu daxil etməli deyilsiniz, lakin sonra css-də H1 atributundan “font-family: “Lobster”, cursive;” yazısını silin və ya onu dəyişdirin öz şriftinizlə
4. Əlaqədar üslublarSeçim A: css kodunu css faylınıza yapışdırın. Budur kod:
Img.bg ( /* Arxa fonu doldurmaq üçün qaydalar təyin edin */ min hündürlük: 100%; min-en: 1024px; /* proporsional miqyaslama qurun */ en: 100%; hündürlük: avtomatik; /* yerləşdirməyi qurun */ mövqe: sabit; yuxarı: 0; sol: 0; çəki: normal margin-top: 300px mətn kölgəsi: 5px 5px 5px #000 ) @media ekranı və (maksimum genişlik: 1024px) ( /* Bu xüsusi şəkilə aiddir */ img.bg ( sol: 50% ; margin-left: -512px; /* 50% */ ) ) html, bədən (şrift ailəsi: Helvetica, Arial, sans-serif; font ölçüsü: 12px; line-height: 16px; padding: 0; kənar: 0; rəng: #333; ) .bar (fon-rəng: #111; rəng: #f0f0f0; qutu-kölgə: 0px 0px 2px #333; xətt hündürlüyü: 25px; doldurma: 0px 20px; qeyri-şəffaflıq: 0.7; ) . bar:hover ( qeyri-şəffaflıq: 1; ) .bar a ( rəng: #DDD; ) .bar a:hover ( rəng: #FFFFFF; ) a ( rəng: #FFFFFF; mətn dekorasiyası: heç biri; ) a: hover ( rəng : #CCC ) #kətan ( haşiyə: 1px bərk qara; mövqe: mütləq; z indeksi: 10000; ) #flake (rəng: #fff; mövqe: mütləq; şrift ölçüsü: 25px; üst: -50px; ) #səhifə (vəzifə: nisbi; )
Seçim B. Siz həmçinin ayrıca bir fayl yarada bilərsiniz, məsələn, snow.css və eyni kodu ora yapışdıra bilərsiniz, baxmayaraq ki, o, aşağıdakı kimi başlığa daxil edilməlidir:
5. Yağan qar skriptini birləşdirin
Variant A. Bunun üçün saytın ən aşağı hissəsində (bağlamadan əvvəl) aşağıdakı javascript kodunu daxil etməliyik:
var t = setInterval(function())( var documentHeight = $(sənəd).height(); var startPositionLeft = Math.random() * $(sənəd).width() - 100; var startOpacity= 0.5 + Math.random ( ); var sizeFlake= 10 + Math.random() * 20 var endPositionTop= documentHeight - 40; * 5000; $("#flake") .clone() .appendTo("body") .css(( sol: startPositionLeft, qeyri-şəffaflıq: startOpacity, "font-size": sizeFlake )) .animate(( üst: endPositionTop, sol : endPositionLeft, qeyri-şəffaflıq: 0.2 ), durationFall, "xətti", funksiya() ( $(this).remove() ), 500); var qar = (); var snowflex = (); snowflex.create = funksiya( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex .style.top = - 50 + Math.random() * 20 + "px"; = "#F3F3F3"; flex.style.opacity= Math.random("document.getElementsByTagName"). snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex) stil.top) + 5 + "px"; ); document.getElementsByTagName("body").removeChild(flex) ), 45 + Math.random() * 20); snow.storm = function())( var t= setInterval(function())( snow.snowflex(); ), 500 ); //snow.storm(); var duman = (); fog.draw = funksiya(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true ctx.closePath(); fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x) = 300 + 300* -Math.cos(x); //fog.start();
Seçim B. CSS kodu ilə olduğu kimi, javascript ayrıca faylda yerləşdirilə və həmçinin snow.js adlandırıla və başlığa daxil edilə bilər:
6. Fon şəklini doldurun
Bg.jpg şəklini arxivdən saytınızın kökünə yükləyin
7. HTML kodunu daxil edinYaxşı, qalan ən vacib şey yağan qarın html kodunu daxil etməkdir:
Yeni iliniz mübarək! ❄
Yağan qar skripti uğurla bağlandı. Bunu hərəkətdə izlədiyinizə əmin olun. Hər vaxtınız xeyir!
jQuery ilə veb dizayn çox asandır! Saytda "Falling Snow"Yeni il yaxınlaşdıqca əksər saytlarda iki şey görünür: “qarın yağması” və satış və endirimlər səhifəsi. Hər ikisi çox sadə şəkildə edilir. Qar - jQuery plaginlərindən istifadə edərək, qiymət etiketinin üstündə qalın qırmızı xətt ilə kəsilmiş daha böyük rəqəmi təsvir edərək, köhnə qiymətə uyğun gələn endirimlər və satışlar.
Bununla belə, biz indi yalnız sayt səhifəsində “yaxan qar”ı yerləşdirməkdə maraqlıyıq. Bunun üçün bir neçə sadə variant var. Gəlin jQuery əsasında onlardan ikisinə baxaq.
Təbii olaraq qar adlı yeni bir qovluq yaratmaqla "yaxan qar"ın quraşdırılmasına başlayırıq, sonra arxivi yükləyin və bu qovluğa açın. Bizdə iki jquery-1.8.3.min.js və jquery.snow.js skriptləri olacaq.
Sonra, teq daxilində səhifə başlığına əlavə etməlisiniz ... bu skriptlərə gedən yolları göstərən aşağıdakı sətirləri və "yağan qarı" işə salmaq üçün kiçik JavaScript:
$(sənəd).ready(funksiya())(
$.fn.snow();
});
Sayt səhifəsində qarın görünməsi üçün etiketin içərisinə əlavə edin
.
Bu plaqində yalnız dörd parametr var. Onlar jquery.snow.js faylının ən başında yerləşir və istənilən redaktorda və ya Notepad-da dəyişdirilə bilər:
minSize: 10 , // minimum qar dənəciyi ölçüsü
maxSize: 20 , // qar dənəciyinin maksimum ölçüsü
newOn: 500 , // ms-də qar dənələrinin görünmə tezliyi, yəni qar sıxlığı
flakeColor: "#bbbbbb" // qar dənələrinin rəngi
Həmçinin jquery.snow.js faylının ilk sətirlərində təyin olunan qar üçün z-index:10 dəyərinə diqqət yetirin. Səhifənizdə varsa, sürgülərin (slayd şouları) və açılan menyuların üstündəki qar dənəciklərinin yerini təyin edir.
"Qar yağması"nın ikinci versiyası
Bu seçim üçün siz Şəkil 1-də göstərildiyi kimi öz qar dənəciklərinizdən istifadə edirsiniz. Bunun sayəsində plagin daha rəngarəngdir və əlavə olaraq, digər effektlər üçün uğurla istifadə edilə bilər. Məsələn, qar dənəciklərinin şəkillərini qızılgül ləçəkləri ilə əvəz etməklə, bir toy saytının səhifəsini bəzəyə bilərsiniz və düşən çobanyastığı çiçəkləri yay tətili ilə bağlı vebsayta uyğunlaşacaq.
Şəkil 1. Saytda "Falling Snow"
Quraşdırmaq üçün yenidən qar qovluğundan istifadə edirik, yalnız indi skriptlərə əlavə olaraq qar dənələrinin dörd fərqli şəkli olan başqa bir arxivi açacağıq. Sonra, birinci nümunəyə bənzər, etiketin içərisinə... yeni “yaxan qar” fayllarına gedən yolları göstərən sətirlər daxil edin:
Və nəhayət, etiketin içərisinə sətri əlavə edin (səhifənin əvvəlində daha yaxşı olar)
.
Əgər qar yoxdursa, snow.js faylının aşağıdakı sətrində qar dənəciyi şəkillərinin tam ünvanını düzgün daxil etdiyinizə əmin olun:
var img=" 
Qar sıxlığının tənzimlənməsi eyni faylda sətirdəki rəqəmsal arqumentlə göstərilir.
setTimeout("qar("+id+");",100 ); // qar dənələrinin tezliyi,
və qar dənəciklərinin bir xətt üzrə hərəkət sürəti
$("#snow_"+id).animate((yuxarı:"150%",sol:""+end_x+"%"),20000 ,function() // qar dənəciklərinin hərəkət sürəti
Həmçinin, birinci variantda olduğu kimi, z-index:10 dəyərinə diqqət yetirin ki, qar səhifədə yerləşən sürgüləri, açılan menyuları və s.
Qışa çox az vaxt qalıb və çoxlu sayda webmaster öz saytlarında lazımi atmosfer yaratmağa başlayır. Bu münasibətlə veb saytınız üçün qar effektləri seçimimizi təqdim edirik.
jSnow – jQuery-də universal yağan qar skriptiSeçimimizi “jSnow” adlı plaqindən istifadə edərək sayta əlavə olunan çox gözəl qar effekti ilə başlayacağıq.
Nümayiş:
Razılaşın - gözəl!
Bu effekti veb saytınıza quraşdırmaq üçün aşağıdakıları edin.
1. Məqalənin sonunda jsnow.zip arxivini yükləyin. Məzmunu açın və FTP və ya sizin üçün əlverişli olan digər üsulla veb saytınıza yükləyin.
Təəssüf ki, skript jQuery-nin yeni versiyaları ilə işləmir, ona görə də biz əlimizdə olanlarla kifayətlənirik.
3. Əvvəl Skriptləri daxil etmək üçün bağlama etiketindən istifadə edin:
$(sənəd).ready(function() ( $("bədən").jSnow(( vSize: 100, // Lopa sahəsinin ölçüsü: 30, // Qar dənələrinin sayı lopaRəng: ["#fff"], // Rəng flakeMinSize : 10, // Qar dənəciyinin minimum ölçüsüMaxSize: 20, // Düşən qar dənəsinin maksimal ölçüsüSpeedMin: 1, // Düşən qar dənəciyinin minimum sürətiSpeedMax: 2, // Qar dənəciyinin maksimal sürətiCode:[". ] // Qar dənəciyi növü ));
Bu kod qar dənələrinin ölçüsünü, tutduqları ərazinin hündürlüyünü, rəngini və şərh edilən digər parametrləri tənzimləyir.
Skript, başa düşdüyünüz kimi, universaldır və yuvarlaq qar əvəzinə ulduzları əlavə edə bilərsiniz, məsələn:
FlakeCode:["*"] // Qar dənəciyinin görünüşü
Və ya bir dəstə dəyirmi qar və ulduzlar:
FlakeCode:[".", "*"] // Snowflake görünüşü
Eləcə də hər hansı digər simvol (və hətta dollar işarəsi - $).
Skript əsas məzmunu üst-üstə düşmədən saytın yuxarı hissəsini bəzəmək üçün əladır.
Snowstorm – JavaScript-də ağıllı yağan qar skriptiNiyə ağıllı, soruşursan? Çünki bu skriptdə (bu məqalədə müzakirə olunan digərlərindən fərqli olaraq) qar dənəciklərini dəf edən əlavə effekt var. Yəni siçan kursorunu saytınızda hərəkət etdirdiyiniz zaman qar dənəcikləri ondan əks istiqamətə qaçır. Kursor ekranın ortasından nə qədər uzaq olarsa, qar dənəcikləri bir o qədər sürətlə hərəkət edər.
Nümayiş:
Bu effekti saytınıza quraşdırmaq üçün heç bir əlavə kitabxana tələb olunmur. Sizə lazım olan tək şey:
1. Məqalənin sonunda snowstorm.zip arxivini yükləyin. Məzmunu özünüzə uyğun şəkildə açın və saytınıza yükləyin.
window.onload = function() ( snowStorm.snowColor = "#fff"; // Qar dənələrinin rəngi snowStorm.flakesMaxActive = 100; // Görünən qar dənəciklərinin maksimum sayı snowStorm.followMouse = doğru; // doğru - kursoru təqib edin, yalan - snowStorm.snowCharacter = "." // Qar dənəciyi növü );
Lazım gələrsə, skript animasiyasında dəyişikliklər edin.
Qar dənəciklərinin kursordan uzaqlaşmasına əlavə olaraq, onların bəziləri ekranın aşağısına yapışaraq, qar dənəciklərinin qar yığını əmələ gətirdiyinə dair cüzi təəssürat yaradır.
Qar yağışı – jQuery istifadə edərək qar yağışı ilə yağan qarın təsiriMən bu skripti ən çox bəyənirəm, çünki o, incə qar dənələrini həyata keçirir və həmçinin göstərilən elementlərdə kiçik qar yığınlarını toplayır.
Nümayiş:
Bu effektin quraşdırılması digərlərinə nisbətən bir az daha uzun çəkir.
1. Saytınızda jQuery kitabxanası yoxdursa, onu HEAD bölməsinə daxil edin:
3. Açılış teqinə “darkBg” sinfini təyin edin:
4. Əvvəl skriptləri bağlama etiketi ilə daxil edin:
$(sənəd).ready(funksiya() ( document.body.className = "darkBg"; $(sənəd).snowfall((kolleksiya: ".colletonme", flakeCount: 200 // Qar dənələrinin sayı )); ));
5. Və son mərhələdə qar yığınlarının əmələ gəlməsi lazım olan elementlərə bir sinif təyin edin:
Class="toplama"
Saytda qar yağışlarının əmələ gəlməsini istəmirsinizsə, xətti skriptdən çıxarın:
Kolleksiya: ".colletonme",
Bu məcburi bir hərəkətdir, əks halda saytınıza qar yağmayacaq.
Əla skript, əvvəllər veb saytımızda istifadə etdiyimiz şey budur.
CSS3 istifadə edərək hamar laylı yağan qar effektiBurada, başa düşdüyünüz kimi, biz hər cür skriptlərdən istifadə etməyəcəyik, ancaq təmiz CSS ilə məşğul olacağıq.
Nümayiş:
Sehrli, elə deyilmi?
Bu effekti özünüzə quraşdırmaq üçün üç sadə addımı atın.
1. Məqalənin sonunda snow_img.zip arxivini yükləyin. FTP vasitəsilə və ya hosting fayl meneceriniz vasitəsilə məzmunu açın və saytınıza yükləyin.
2. Stil faylınıza daxil edin (tercihen ən aşağıya):
Qar Konteyneri ( en: 100%; hündürlük: 100%; mövqe: mütləq; yuxarı: 0; sol: 0; z-indeksi: -1; ) #qar ( en: 100%; hündürlük: 100%; fon şəkli: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); qar 20s linear 20s xətti sonsuz; -ms-animasiya: qar 20s xətti sonsuz ) @keyframes qar ( 0% ( fon mövqeyi: 0px 0px, 0px 0px; ) 100% ( fon mövqeyi : 500px 1000px, 400px 400 300px; ) ) @-moz-keyframes qar ( 0% ( fon mövqeyi: 0px 0px, 0px 0px, 0px 0px; ) 100% (fon mövqeyi: 500px 1000px, 400px 400px, 300px 300px)-b; əsas kadrlar qar ( 0% ( fon mövqeyi: 0px 0px, 0px 0px, 0px 0px; ) 100% ( fon mövqeyi: 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- əsas kadrlar ( 0% fon- mövqe: 0px 0px, 0px 0px, 0px 0px ) 100% (fon mövqeyi: 500px 1000px, 400px 400px, 300px 300px; ) )
Sonra bütün dəyişiklikləri yadda saxlayın.
Budur, şübhəsiz ki, veb saytınızın ziyarətçilərini sevindirəcək qar effektlərinin yaxşı bir seçimi.
