კარგი დღე და გილოცავთ ახალ წელს. ახალი წლის წინა დღეს მინდა გაგიზიაროთ ძალიან მსუბუქი, ლამაზი და უპრეტენზიო შემოდგომის თოვლის დანამატი. ეს სკრიპტი მართლაც ძალიან მსუბუქია და ადვილად შეიძლება განთავსდეს html ფაილში, მასთან მუშაობის გაძნელების გარეშე. html კოდისაიტი om. მართალია, მისი ამოღება შესაძლებელია ცალკე ფაილში. მაგრამ მოხერხებულობისთვის ყველაფერი გავაკეთე ერთ ფაილში.
აქ სათქმელი ცოტაა, ჯობია ამ თოვლის დემონსტრაცია ნახოთ. გარდა ამისა, ძალიან ლამაზი ფონი და წარწერა "გილოცავთ ახალ წელს". ლამაზი შრიფტი"ლობსტერი" Google-ის მიერ. თქვენ შეგიძლიათ მარტივად გადააქციოთ ეს ფაილი ინტერნეტ საფოსტო ბარათად მილოცვით.
ფიფქების ცვენის სკრიპტის დაკავშირება დასრულებულ ადგილზე
1. ჩართეთ jQuery ბიბლიოთეკა
ის აკავშირებს ასე: ტეგებს შორის
დაჩასვით შემდეგი კოდი:
2. სტილის დაკავშირება
ჩასვით css კოდი თქვენს css ფაილში (ჩვეულებრივ style.css):
#ტილო (საზღვარი: 1px მყარი შავი; პოზიცია: აბსოლუტური; z-ინდექსი: 10000; ) #flake (ფერი: #fff; პოზიცია: აბსოლუტური; შრიფტის ზომა: 25px; ზედა: -50px; )
3. შექმენით snow.js ფაილი
მოდით შევქმნათ snow.js ფაილი და ჩასვათ შემდეგი Javascript კოდი:
ჩართეთ js ფაილი
:
4. ჩადეთ html კოდი
ისე, ყველაზე მთავარი რჩება - ჩასვით html კოდი ჩამოვარდნილი თოვლის ნებისმიერ ადგილას
:
თუ ყველაფერი სწორად გააკეთეთ, მაშინ თქვენს საიტზე თოვლი დაიწყება.
ფონის სურათის, დიდი სათაურის და ცვივა ფიფქების დაკავშირება
ეს ვარიანტი განსხვავდება იმით, რომ მას აქვს ფონის სურათი და დიდი სათაური "გილოცავ ახალ წელს". ჩამოვარდნილი თოვლის სკრიპტის ამ ვერსიის საიტთან დაკავშირება საკმაოდ მარტივია. აუცილებელი:
1. ჩამოტვირთეთ არქივი და გახსენით იგი
2. ჩართეთ jQuery ბიბლიოთეკა
დარწმუნდით, რომ ჩართეთ jQuery ბიბლიოთეკა (არ არის აუცილებელი, თუ უკვე გაქვთ ეს ბიბლიოთეკა). ის აკავშირებს ასე: ტეგებს შორის
დაჩასვით შემდეგი კოდი:
3. დააკავშირეთ შრიფტი "Lobster"
ისევე, როგორც jQuery ბიბლიოთეკის ჩათვლით, ჩვენ ვიცავთ შრიფტს ჩვენი წარწერისთვის "გილოცავთ ახალ წელს":
ბუნებრივია, თუ არ გჭირდებათ ეს წარწერა და შრიფტი, არ შეგიძლიათ ჩართოთ იგი, მაგრამ შემდეგ css-ში ამოიღეთ "font-family: "Lobster", cursive;" ატრიბუტი H1-დან, ან შეცვალეთ იგი საკუთარი შრიფტით.
4. სტილების ჩათვლით
ვარიანტი A.ჩასვით css კოდი თქვენს css ფაილში. აქ არის კოდი:
Img.bg ( /* დააყენეთ წესები ფონის შესავსებად */ წთ-სიმაღლე: 100%; მინ-სიგანე: 1024 პიქსელი; /* პროპორციული მასშტაბის დაყენება */ სიგანე: 100%; სიმაღლე: ავტომატური; /* პოზიციონირების დაყენება */ პოზიცია: ფიქსირებული; ზევით: 0; მარცხნივ: 0; ) h1 ( შრიფტი-ოჯახი: "Lobster", კურსორი; ფერი: #FFF; შრიფტის ზომა: 90 პიქსელი; ტექსტის გასწორება: ცენტრში; ხაზის სიმაღლე: 95 პიქსელი; ფონტი- წონა: ნორმალური; ზედა ზღვარი: 300 პიქსელი; ტექსტის ჩრდილი: 5 პიქსელი 5 პიქსელი 5 პიქსელი #000; ) @media ეკრანი და (მაქს. სიგანე: 1024 პიქსელი) ( /* სპეციფიკური ამ კონკრეტული სურათისთვის */ img.bg ( მარცხნივ: 50% ; ზღვარი მარცხნივ: -512 პიქსელი; /* 50% */ ) html, ტექსტი ( შრიფტი-ოჯახი: Helvetica, Arial, sans-serif; შრიფტის ზომა: 12 პიქსელი; ხაზის სიმაღლე: 16 პიქსელი; შიგთავსი: 0; მინდვრები: 0; ფერი: #333; ) .ზოლი (ფონის ფერი: #111; ფერი: #f0f0f0; ყუთი-ჩრდილი: 0px 0px 2px #333; ხაზის სიმაღლე: 25px; padding: 0px 20px; გამჭვირვალობა: 0.7; ). ბარი: hover ( გამჭვირვალობა: 1; ) .bar a ( ფერი: #DDD; ) .bar a:hover ( ფერი: #FFFFFF; ) a ( ფერი: #FFFFFF; ტექსტის დეკორაცია: არცერთი; ) a:hover (ფერი : #CCC; ) #ტილო ( საზღვარი: 1px მყარი შავი; პოზიცია: აბსოლუტური ე; z-ინდექსი: 10000 ) #flake (ფერი: #fff; პოზიცია: აბსოლუტური; შრიფტის ზომა: 25 პიქსელი; ზედა: -50 პიქსელი; ) #გვერდი (პოზიცია: შედარებითი; )
ვარიანტი B.თქვენ ასევე შეგიძლიათ შექმნათ ცალკე ფაილი, მაგალითად snow.css და ჩასვათ იქ იგივე კოდი, თუმცა სათავეში უნდა იყოს ჩასმული შემდეგნაირად:
5. შეაერთეთ თოვლის დაცემის სკრიპტი
ვარიანტი A.ამისათვის ჩვენ უნდა ჩავსვათ საიტის ბოლოში (დახურვამდე) შემდეგი javascript კოდი:
ვარიანტი B.ისევე, როგორც css კოდის შემთხვევაში, javascript შეიძლება განთავსდეს ცალკე ფაილში და ასევე ეწოდოს snow.js და ჩაერთოს თავში:
6. შეავსეთ ფონის სურათი
ატვირთეთ bg.jpg სურათი არქივიდან თქვენი საიტის ძირში
7. ჩადეთ html კოდი
მაშ, ყველაზე მნიშვნელოვანი რჩება - ჩასვათ ჩამოვარდნილი თოვლის html კოდი:
Გილოცავთ ახალ წელს!
Falling snow სკრიპტი წარმატებით დაუკავშირდა. დარწმუნდით, რომ შეამოწმეთ იგი მოქმედებაში. Ყველაფერი საუკეთესო!
გამარჯობა! ზუსტად სამი წლის წინ დავწერე უკვე. მაგრამ, როგორც გაირკვა, სკრიპტი, რომელიც მაშინ შევთავაზე და მისი დაყენების გზა, ჩემი ბლოგის ბევრი მკითხველისთვის ბოლომდე გასაგები არ იყო. მე სიტყვასიტყვით დაბომბეს კითხვებით, რადგან ამ შემთხვევაში საჭირო იყო კოდის დამატებების დაწერა, ფაილების ატვირთვა root საქაღალდეში ... რა თქმა უნდა, მე უნდა დავეხმარო ყველას, ვინც მიმართა და ეს, როგორც გესმით, აიღო. ბევრი დრო.
მაგრამ, როგორც ამბობენ, დრო არ დგას. გუშინ, ჩვენი ყოვლისმომცველი ინტერნეტის უკიდეგანო სივრცეში, შემთხვევით წავაწყდი შესანიშნავ სკრიპტს და ახლა ვიცი სხვა გზა ჩამოვარდნილი ფიფქების საიტზე დასაყენებლად. სპორტული ინტერესის გამო ვცადე მოქმედებაში. შედეგებს თავად ხედავთ. სკრიპტი არ ანელებს საიტის გვერდების ჩატვირთვის სიჩქარეს, ერგება თითქმის ნებისმიერ CMS-ს, არ აწუხებს მკითხველს - უბრალოდ კარგ განწყობას ქმნის!
ვისაც მოეწონა ეს ჩამოვარდნილი ფიფქები, მოგიყვებით მათი „დამზადების“ დეტალებს. და ისინი მზადდება ამ პატარა სკრიპტის დახმარებით:
და ეს არის ის! აღარ არის ფაილების საქაღალდეები ან ცალკეული ფაილები. საკმარისია ამ კოდის დაყენება უშუალოდ გახსნის ტეგის შემდეგ
და საახალწლო განწყობა უკვე თქვენთანაა.მაგრამ ყველა თემა განსხვავებულია და ჩემს შემთხვევაში სკრიპტის სხვაგან დაყენება მომიწია. ეს სკრიპტიმე ჩავდე საიტის სათაურში header.php ფაილში ტეგის შემდეგ
და ყველაფერი მშვენივრად მუშაობს.
მაგრამ მე მაშინვე გაფრთხილებთ, რომ როდესაც მუშაობთ თემის რედაქტორთან, აუცილებლად უნდა გააკეთოთ სარეზერვოყოველი შემთხვევისთვის, რათა დავრწმუნდეთ. მოულოდნელად რაღაცას არასწორად აკეთებთ და შეცდომას უშვებთ, შემდეგ შეგიძლიათ ყველაფერი გამოასწოროთ უპრობლემოდ სარეზერვო ასლის გამოყენებით.
დეტალებიდან შემიძლია დავამატო, რომ სკრიპტში „შეკერილია“ 40 ფიფქია მაქსიმალური ზომით 35 პიქსელამდე. და მეც ასე ვფიქრობ ოპტიმალური ღირებულებები. სამწუხაროდ, ვერ გავარკვიე ნაპოვნი პუბლიკაციის ავტორის ვინაობა, რათა დიდი მადლობა გადავუხადო გაწეული სამუშაოსთვის.
და ფიფქები დაამშვენებს არა მხოლოდ საიტს, არამედ შესანიშნავი დამატება იქნება მათთვის, ვინც საახალწლოდ „ვირუსულ“ მისალოცი ბარათებს გააკეთებს, თუ ამ სტატიას კითხულობს კარგი განწყობის მოყვარულები. სხვათა შორის, შეგიძლიათ ამ ვირუსულ ღია ბარათებში ჩასვათ კოდები და გამოიმუშაოთ ფული.
ვიმედოვნებ, რომ ეს ფუმფულა თოვლი ასევე არ დაგტოვებთ გულგრილს და გაახარებთ თქვენს ბლოგის მკითხველებს მთელი მომავალი დღესასწაულების განმავლობაში.
თუ თქვენ გაქვთ რაიმე შეკითხვები, შეგიძლიათ დაუსვათ ისინი ამ სტატიის კომენტარებში. ყოველივე საუკეთესოს გისურვებ და გილოცავ ახალ 2015 წელს! მოუთმენლად ველი თქვენს კომენტარებს და სიამოვნებით გიპასუხებთ.
გამარჯობა ძვირფასო მეგობრებო! მიუხედავად იმისა, რომ ზამთარი დასრულდა, მე მაინც მინდა გითხრათ, როგორ შევქმნათ ჩამოვარდნილი ფიფქები WordPress-ის საიტზე, რომ ოდნავ გაიხსენოთ ზამთრის დღეები :-). ჩვენ მოვამზადებთ ჩამოვარდნილ ფიფქებს სკრიპტის და დანამატის გამოყენებით.
ანუ ამ სტატიაში გავაანალიზებთ ორ აბსოლუტურად სამუშაო მეთოდს. იქ თქვენ თავად გადაწყვეტთ რომელ ვარიანტს ანიჭებთ უპირატესობას. ასე რომ, მოდით გადავიდეთ გაკვეთილის პრაქტიკულ ნაწილზე.
როგორ მოვამზადოთ ჩამოვარდნილი WordPress ფიფქები დანამატით?
ინტერნეტში სერფინგი ეძებს საუკეთესო ვარიანტიმე ავირჩიე დანამატი - WP Super Snow. ზოგიერთ სტატიაში სხვა ვარიანტებს წავაწყდი, მაგრამ ყველა მათგანში ავტორებს დიდი ხანია არ განაახლეს თავიანთი შემოქმედება. WordPress მუდმივად განახლდება და ვითარდება. ამიტომ, აქ თქვენ მუდმივად უნდა შეინარჩუნოთ თქვენი პროექტი, რათა იყოს თავსებადი ყველა ვერსიასთან.
ასე რომ, მოდით გადავიდეთ დანამატების განყოფილებაში - დაამატეთ ახალი და დააინსტალირეთ ჩამოვარდნილი ფიფქის დანამატი WordPress-ისთვის.
დააწკაპუნეთ ინსტალაციის ღილაკზე, ჩვენ ყველაფერს ვაკეთებთ როგორც ყოველთვის. სხვათა შორის, თუ ჯერ კიდევ არ იცით როგორ, მაშინ ჩემი სტატია დაგეხმარებათ ამაში.
კარგად! ჩვენ დავაინსტალირეთ და გავააქტიურეთ დანამატი. ამის შემდეგ, Super Snow განყოფილება გამოჩნდება თქვენი WordPress ადმინისტრაციული პანელის მარცხენა მხარეს.
შიგნით შესვლისას დაინახავთ, რომ დანამატი გამორთულია და თქვენ უნდა ჩართოთ იგი.
ახლა ჩვენ გადავხედავთ ძირითად პარამეტრებს.
პირველი განყოფილება არის დეაქტივაციის დაცვის საშუალებები (უსაფრთხოება დეაქტივაციის დროს) - ჩამოსაშლელ სიაში დატოვეთ პირველი ელემენტი ისე, როგორც არის, არ შეცვალოთ არაფერი. უფრო მეტიც, რეკომენდებულია. აქ ჩვენ უბრალოდ გაფრთხილებულები ვართ, რომ თუ თქვენ ამოიღებთ დანამატს ზოგადი მენიუდან, მაშინ არაფერი დაიკარგება. თუ გსურთ წაშალოთ მოდულის ყველა კვალი საიტზე, მაშინ უნდა დააჭიროთ პირველ ვარიანტს. ნაჩვენებია აქ:
ამ განყოფილებაში შეგიძლიათ დააყენოთ ჩამოვარდნილი ფიფქების ზომა და მათი რაოდენობა, დაამატოთ ფიფქების საკუთარი ვერსია, მიუთითოთ რომელ ტეგში უნდა განთავსდეს ისინი. ნაგულისხმევად, ყველაფერი შეფუთულია სხეულის ტეგში. თქვენ ასევე შეგიძლიათ გააუქმოთ იგი. თქვენ ასევე შეგიძლიათ მიუთითოთ დაყოვნება წამებში ადგილზე ფიფქების ჩამოვარდნისთვის, ეფექტები.
შემდეგი ბოლო ვარიანტია ჩამოვარდნილი ფიფქების ჩვენება გვერდებზე და პოსტებზე. გახსოვდეთ, რომ მობილურ მოწყობილობებზე თოვლი არ იქნება, რადგან იქ უბრალოდ გამორიცხულია.
მაგალითად, თქვენ შეგიძლიათ გაააქტიუროთ ფიფქების დაცემა კონკრეტულ გვერდებზე მხოლოდ ამის მითითებით სპეციალური ფუნქცია(ისინი ჩამოთვლილია გვერდზე)
აქ მოცემულია ფუნქციების მაგალითები:
wp_is_mobile() && is_page ("საშობაო პრომო")— თუ ეს გვერდი არ არის მობილური, მაშინ აჩვენეთ ის საშობაო პრომო გვერდზე
Wp_is_mobile() && ! is_ssl ()- არ აჩვენო თუ არა მობილური მოწყობილობადა არა უსაფრთხო პროტოკოლი https და ssl
wp_is_mobile() && time() >= strtotime("2015-12-01") && დრო()<= strtotime ("2015-12-31" ) - არ აჩვენოთ მობილურ მოწყობილობებზე და აჩვენეთ მხოლოდ არაუგვიანეს 12 იანვრისა და არა უადრეს 31 დეკემბრისა პერიოდში. ანუ ვაყენებთ დროის ინტერვალს.
ყველა მოქმედებისა და პარამეტრის გაკეთების შემდეგ ვაწკაპუნებთ "ცვლილებების შენახვა".
აი, რას მიიღებთ ბრაუზერში.
ამან გამოიწვია დიდი, ნელა ცვივა ფიფქები WordPress ტესტის საიტზე. ძალიან საყვარელიც.
როგორ მოვამზადოთ ცვივა ფიფქები საიტზე სკრიპტის საშუალებით?
ზემოთ მოყვანილ მაგალითში ჩვენ გავაკეთეთ ფიფქები დანამატის გამოყენებით. შეიძლება ეს კარგია, მაგრამ ყველამ ვიცით, რომ დანამატები საიტს ამძიმებს და ანელებს. მათთვის, ვინც მიჩვეულია ყველაფრის კეთებას ფუნქციებითა და კოდით, მე ვთავაზობ ჩამოვარდნილი ფიფქების გაკეთებას სკრიპტის საშუალებით. ბევრი მათგანია ინტერნეტში. ყურადღებას გავამახვილებ უმარტივეს ვარიანტზე - ქარბუქზე.
თქვენ შეგიძლიათ ჩამოტვირთოთ ეს სკრიპტი სწორედ აქ - snowstorm.zip
რა უნდა გააკეთოთ პირველ რიგში? პირველი ნაბიჯი არის საქაღალდის დირექტორიას შექმნა, სადაც შეგიძლიათ განათავსოთ თქვენი Javascript კოდი. საიტის root-ში Lib საქაღალდე შევქმენი და უკვე ავტვირთე.
მის შიგნით აღარ არის საჭირო საქაღალდეების შექმნა ისე, რომ გზა არ გახანგრძლივდეს.
შემდეგ მივდივართ ჩვენი საიტის ქვედა კოლონტიტულის შაბლონზე და დახურვის ტეგზე < / body > ჩვენ ვუკავშირდებით ჩვენს სკრიპტს ამ ხაზით:
|
სიცხადისთვის მე გაჩვენებთ სად ჩავდე:
დარწმუნდით, რომ შეინახეთ ყველა ცვლილება და ეს არის ის, რაც უნდა მიიღოთ საიტზე:
ახლა თქვენ შეგიძლიათ "ითამაშოთ" ჩვენს ფიფქებთან საიტზე, ანუ დააყენოთ მათი სიჩქარე, ზომა, თავად ფიფქების რაოდენობა და სხვა პარამეტრები. ამისთვის სკრიპტში მცირე ცვლილებები უნდა შევიტანოთ.
ჩასვით შემდეგი კოდი ქვედა კოლონტიტულის არეში:
შაბლონში ყველაფერი ასე გამოიყურება:
ახლა ვნახოთ რა მოხდა ბრაუზერში:
როგორც ვხედავთ, ჩვენი ფიფქები საიტზე გახდა რბილი მოლურჯო ფერი, აღმოჩნდა, რომ ეს იყო ნამდვილი თოვლი საიტზე 🙂
ფიფქის სკრიპტის სხვა პარამეტრები
სცენარის კიდევ უფრო „გარყვნილების“ მიზნით, სხვა ვარიანტებზე გადავალ.
თოვლის შტორმი. autoStart = true;- არჩევანი შორის იქნება თუ არა თოვლი ავტომატურად გამოჩნდება გვერდის ჩატვირთვისას თუ არა.
თოვლის შტორმი. animationInterval = 33 ;- კადრზე მილიწამების ინტერვალის გაზომვა. მნიშვნელობით = 20 ის არის სწრაფი და გლუვი, მაგრამ ჩატვირთავს პროცესორს. თუ დააყენებთ = 50, მაშინ ის უფრო კონსერვატიულია, მაგრამ უფრო ნელი.
თოვლის შტორმი. flakeBottom = null ;- გვერდის ბოლოში თოვლის შეზღუდვა. თუ მითითებული არ არის, მაშინ თოვლი უბრალოდ მიეწებება საიტის გვერდის ბოლოში და გაქრება გადახვევით ან გადახვევით.
თოვლის შტორმი. ფანტელებიMax = 128;- მნიშვნელობის დაყენება მაქსიმალური რაოდენობაფიფქები ცვივა გვერდის ნებისმიერ ნაწილში დროის ერთეულზე.
თოვლის შტორმი. flakesMaxActive = 64;- ადგენს ფიფქების ცვენის ლიმიტს (ე.ი. გადაადგილება ეკრანზე და ითვლება აქტიური).
თოვლის შტორმი. followMouse = true;- საშუალებას აძლევს თოვლს ადგილზე გადაადგილდეს "ქარით" თაგვის მოძრაობასთან დაკავშირებით X ღერძის გასწვრივ (მარცხნივ / მარჯვნივ).
თოვლის შტორმი. freezeOnBlur = true;- შეაჩერე ფიფქის ეფექტი, როდესაც მომხმარებელი იმყოფება ამ მომენტშიგამოდის ბრაუზერის ფანჯრიდან, მაგალითად, გადადის სხვა ჩანართზე, შემდეგ თოვლი ჩერდება. ეს დაზოგავს CPU-ს და უფრო სასიამოვნოა მომხმარებლისთვის.
თოვლის შტორმი. snowColor = "#fff" ;- თოვლის თეთრი ფერი (არ ჭამოთ და არ გამოიყენოთ ყვითელი თოვლი საიტზე :-))
თოვლის შტორმი. snowCharacter = " ";- . ( ) = ტყვია. · ერთეული (·) არ გამოიყენება, რადგან ზოგიერთ სისტემაში კვადრატად ითვლება. ნებისმიერმა ცვლილებამ შეიძლება გამოიწვიოს ჩვენი ფიფქის მოკვეთა და ასევე გამოიწვიოს ფანტელის სიგანე (სიგრძე) / ფანტელის სიმაღლე (სიმაღლე), ასე რომ ფრთხილად იყავით.
თოვლის შტორმი. თოვლის ჯოხი = მართალია;- პარამეტრი საშუალებას აძლევს ფიფქებს ეკრანის ქვედა ნაწილს "მიწებდეს", როცა გამორთულია, თოვლი არასოდეს დადგება ეკრანის ბოლოში.
თოვლის შტორმი. targetElement = null ;- აქ ცოტა უფრო რთულია, მივხვდი, როგორ იწერება html ელემენტი ნაგულისხმევად დოკუმენტის სხეულში ( სხეული). შეიძლება იყოს რიგის ID ელემენტი, როგორიცაა 'myDiV' ან DOM ბმული. Რაღაც მსგავსი.
თოვლის შტორმი. useMeltEffect = true;- ამ პარამეტრის მხარდაჭერით, ჩამოვარდნილი თოვლი დნება, როდესაც მნიშვნელობა ჩართულია.
თოვლის შტორმი. useTwinkleEffect = true;- საშუალებას აძლევს თოვლს დაცემისას თვალთახედვიდან გაბრწყინდეს.
თოვლის შტორმი. usePositionFixed = false;- ლოგიკური მნიშვნელობით true - გადახვევის ფანჯარა არ იმოქმედებს თოვლზე, ანუ წავა და წავა. ეს მნიშვნელოვნად ზრდის პროცესორზე დატვირთვას. ნაგულისხმევი არის false.
თოვლის შტორმი. vMaxX = 8; თოვლის შტორმი. vMaxY = 5;- ფიფქების სიჩქარის მნიშვნელობა x და y-ში ქარიშხლისთვის. ამ დიაპაზონში შემთხვევითი ცვლადი არჩეულია თითოეული ფიფქისთვის.
სულ ესაა ძვირფასო მეგობრებო, სავსებით შესაძლებელია, რომ სადღაც შეცდომა დავუშვი სკრიპტის პარამეტრების ახსნაში, მაშინ თქვენ შემისწორეთ. ჩემთვის, ზოგადად, ყველაფერი კარგად მუშაობს და თვალს ახარებს. გმადლობთ ყურადღებისთვის, ველი თქვენს კომენტარებს და დისკუსიებს. კითხვა მაქვს თქვენთან - რა ეფექტს იყენებთ საიტისთვის ზამთრის დადგომასთან ერთად? 🙂
იზრუნეთ საიტის გაფორმებაზე. თქვენ გადადით საიტზე და იქ, ცვივა თოვლი ან ფიფქები, იგრძნობა დღესასწაულის სული და მაშინვე იქმნება კარგი სადღესასწაულო განწყობა. მიუხედავად იმისა, რომ თოვლი ვირტუალურია, ის მაინც სასიამოვნოა. Მეთანხმები? Რა თქმა უნდა. მაშინ, დღეს გეტყვით - როგორ დავამატოთ, ჩართოთ, დავაყენოთ თოვლი ან ფიფქები საიტზე.ამისთვის არის სპეციალური დანამატები, რომლითაც შეგიძლიათ არდადეგებიჩართეთ ადგილზე თოვლის ან ფიფქების ცვენა, ხოლო მათთვის, ვისაც მოდულების ეშინია, საიტზე არის თოვლის ვარდნის სკრიპტი. სცენარს პოსტის ბოლოს წარმოგიდგენთ. იმავდროულად, უმარტივესი დანამატები, რომლებიც განახლებულია და თავსებადია უახლესი ვერსია WordPress.
Snow Flurry მოდული - თოვს WordPress-ის საიტზე
მარტივი და სრულად კონფიგურირებადი მოდული. ინსტალაციადია: მაქსიმალური ზომაფიფქები; რამდენად ხშირად იქმნება ახალი ფანტელები; დაამატეთ თოვლის ვარდნის მინიმალური და მაქსიმალური სიჩქარე, ფიფქის ფერი, ასევე მოდულის გათიშვის შესაძლებლობა წამის მოცემული რაოდენობის შემდეგ. მოდულის ინსტალაციისა და გააქტიურების შემდეგ ადმინისტრაციულ პანელში გამოჩნდება შესაბამისი სახელის განყოფილება:
სუპერ მოდული WFS Let It Snow - ამატებს თოვს თქვენს საიტზე
WFS Let It Snow დანამატი
შესანიშნავი jQuery მოდული, მასთან ერთად შეგიძლიათ უბრალოდ მოაწყოთ ნამდვილი თოვლი საიტზე, ანუ გათეთრება. პარამეტრებში შეგიძლიათ აირჩიოთ თოვლის ტიპი ოთხი ვარიანტიდან: მსუბუქი, საშუალო, მძიმე და გათეთრება. და ასევე, გააკეთეთ მხოლოდ ცვივა ფიფქები მთავარი გვერდიან საერთოდ; თოვლის ჩართვა/გამორთვა; ფიფქების მინიმალური და მაქსიმალური ზომა; მინიმალური და მაქსიმალური სიჩქარეფანტელები; ჩართეთ ჩრდილები (თეთრი ფონის მქონე ვებსაიტებისთვის):
მიმდინარეობს WFS Let It Snow დანამატის კონფიგურაცია
აქ ასევე მოდულის ინსტალაციისა და გააქტიურების შემდეგ, დაყენების განყოფილებაში გამოჩნდება Let It Snow ქვეგანყოფილება, დააწკაპუნეთ და დააკონფიგურირეთ. ჩვენ უფრო შორს მივდივართ.
საშინელი თოვლის ქარიშხალი - ქარბუქი თქვენს საიტზე
ეს დანამატი უფრო მომეწონა, არც კი ვიცი რატომ, შესაძლოა, თოვლის მიმართულების გამო, თოვლის ქარბუქი რეაგირებს მაუსის მაჩვენებლის მოძრაობაზე (თუ ჩართავთ ამ პარამეტრს). მაგარია, მნახველებს მოეწონებათ. მეტი პარამეტრებიდან: თოვლის ფერი; ფანტელების რაოდენობა; ანიმაციის ინტერვალი; მობილური მხარდაჭერა; თოვლი დნება ეკრანის ბოლოში და ციმციმის ეფექტი:
ეს, ალბათ, ყველაფერია იმ მოდულებთან ერთად, რომლებიც ცვივა თოვლით საიტის გაფორმებისთვის, რასაც ყურადღება უნდა მიაქციოთ. მეც ახალ წელთან ახლოს მოვაწყობ ბლოგზე ქარბუქს. ერთი სამწუხაროა, თუ თქვენ გაქვთ საიტის ღია ფონი (მეც მაქვს) მოგიწევთ თეთრი თოვლის შეცვლა სხვაზე, მაგალითად: ლურჯი ან ღია ლურჯი. Რაღაც მაგდაგვარი. კინაღამ დამავიწყდა, ყველა წარმოდგენილი დანამატი ინსტალირებულია სტანდარტულად, ადმინისტრაციული პანელის მეშვეობით - დაამატეთ დანამატი და შეიყვანეთ მისი სახელი საძიებო ველში.
ახლა მათთვის, ვისაც არ სურს პლაგინების არევა, მარტივი გზაა როგორ დააინსტალიროთ ჩამოვარდნილი თოვლი ვებსაიტზე დანამატის გარეშე .
დაცემა თოვლის სცენარი
ჩამოვარდნილი ფიფქის სკრიპტი შესაფერისია ნებისმიერი ვებსაიტის ან ბლოგისთვის ნებისმიერ პლატფორმაზე. თქვენ უბრალოდ უნდა დაჭყლიტოთ (სკრიპტი უნდა აიტვირთოთ თქვენს ჰოსტინგში), შეგიძლიათ გამოიყენოთ თქვენი ჰოსტინგი, სადაც მდებარეობს თქვენი საიტი, ან შეგიძლიათ გამოიყენოთ მესამე მხარის, მაგალითად: უფასო და Google Drive. ასე რომ, აქ არის სკრიპტის კოდი:
/* თოვლი შემოდგომა 1 - სურათების გარეშე - Java Script ეწვიეთ http://rainbow.arch.scriptmania.com/scripts/ ამ სკრიპტისთვის და მრავალი სხვა */ // დააყენეთ ფიფქების რაოდენობა (30-ზე მეტი - 400 არ არის რეკომენდებული) var snowmax=100 // დააყენეთ ფერები თოვლისთვის. დაამატეთ იმდენი ფერი, რამდენიც გსურთ var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5") // დააყენეთ შრიფტები, რომლებიც ქმნიან ფიფქებს. დაამატეთ იმდენი შრიფტი, რამდენიც გსურთ var snowtype=new Array("Times") // დააყენეთ ასო, რომელიც ქმნის თქვენს ფიფქს (რეკომენდებულია: *) var snowletter="*" // დააყენეთ ჩაძირვის სიჩქარე (რეკომენდებული მნიშვნელობების დიაპაზონი 0,3-დან 2-მდე) var sinkspeed=0,6 // დააყენეთ თქვენი ფიფქების მაქსიმალური ზომა var snowmaxsize=35 // დააყენეთ თქვენი ფიფქების მინიმალური ზომა var snowminsize=8 // დააყენეთ თოვლის ზონა // დააყენეთ 1 ყველასთვის -ზედ -თოვლი, მითითებული 2 მარცხენა მხარეს-თოვლისთვის // Set 3 for ცენტრალური თოვა, მითითებული 4 for მარჯვენა მხარეს თოვს var snowingzone=1 //////////////// // ////////////////////////////////////////////////////////////////////// /// /////// // კონფიგურაცია მთავრდება აქ ////////////////////////////////////////////////////////// // //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Array () var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var ltrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/5)| ns6||opera ფუნქცია randommaker(range) ( rand=Math.floor(range*Math.random()) return rand ) ფუნქცია initsnow() (if (ie5 || opera) ( marginbottom = document.body.scrollHeight marginright = document .body.clientWidth-15 ) else if (ns6) ( marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 ) var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size+"px"; snow[i].style.color=snowcolor snow[i].style.zIndex=1000 snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx+"px"; snow[i].style.top=snow[i].posy+"px"; } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px"; snow[i].style.top=snow[i].posy+"px"; if (snow[i].posy>=marginbottom-2*snow[i].ზომა || parseInt(თოვლი[i].სტილი.მარცხნივ)>(მარჯვნივ-3*lftrght[i]))( if (snowingzone==1) (თოვლი[i].posx=randommaker(ზღვრამარჯვნივ-თოვლი[i]. ზომა) ) if (თოვლის ზონა==2) (თოვლი[i].posx=შემთხვევითი შემქმნელი(ზღვრული მარჯვენა/2-თოვლი[i]. ზომა)) თუ (თოვლის ზონა==3) (თოვლი[i].posx=შემთხვევითი შემქმნელი(ზღვრული მარჯვენა/2 -თოვლი[i].ზომა)+ზღვრული მარჯვენა/4) თუ (თოვლის ზონა==4) (თოვლი[i].posx=შემთხვევითი შემქმნელი(ზღვრული მარჯვენა/2-თოვლი[i]. ზომა)+ზღვრული მარჯვენა/2) თოვლი[i] .posy=0 ) ) var timer=setTimeout("movesnow()",50) ) for (i=0;i<=snowmax;i++) { document.write(""+თოვლის ბუშტი+"") ) if (ბრაუზერი) (window.onload=initsnow)
ამ სკრიპტის ჰოსტინგში ატვირთვამდე უნდა იყოს (საჭიროების შემთხვევაში) რედაქტირება, ანუ თოვლის ფერი, რაოდენობა, სიჩქარე და ა.შ. შემდეგ, ატვირთეთ კოდი ჰოსტინგში და ჩასვით ბმული აქ:
შემდეგი ნაბიჯი, ჩვენ ჩავსვით ეს დიზაინი ტეგის შემდეგ
თქვენს შაბლონში და დაასრულეთ. ბლოგზე გექნებათ თოვლის ბურთი, ფიფქების სახით. და მე გემშვიდობებით, არცთუ დიდი ხნით. Წარმატებები.(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "RA -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName ("script"); s = d.createElement ("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(ეს , this.document, "yandexContextAsyncCallbacks");ზამთრამდე ძალიან ცოტა დრო რჩება და ვებმასტერების დიდი რაოდენობა იწყებს სათანადო ატმოსფეროს შექმნას საკუთარ საიტებზე. ამ შემთხვევაში, წარმოგიდგენთ თოვლის ეფექტების ჩვენს არჩევანს თქვენი ვებსაიტისთვის.
jSnow - ზოგადი დაცემა თოვლის სკრიპტი jQuery-ით
ჩვენ ვიწყებთ ჩვენს კრებულს ძალიან ლამაზი თოვლის ეფექტით, რომელიც დაემატება საიტზე მოდულის გამოყენებით სახელწოდებით "jSnow".
დემონსტრაცია:
ვეთანხმები - ლამაზი!
იმისათვის, რომ დააინსტალიროთ ეს ეფექტი თქვენს საიტზე, გააკეთეთ შემდეგი.
1. ჩამოტვირთეთ არქივი jsnow.zipსტატიის ბოლოს. გახსენით და ატვირთეთ შინაარსი თქვენს საიტზე FTP-ის საშუალებით ან თქვენთვის მოსახერხებელი სხვა გზით.
სამწუხაროდ, სკრიპტი არ მუშაობს jQuery-ის ახალ ვერსიებთან, ამიტომ კმაყოფილი ვართ იმით, რაც გვაქვს.
3. წინადახურვის ტეგი სკრიპტების დაკავშირება:
ეს კოდი ადგენს ფიფქების ზომას, მათ მიერ დაკავებულ ფართობის სიმაღლეს, ფერს და სხვა კომენტარების პარამეტრებს.
სცენარი, როგორც გესმით, უნივერსალურია და მრგვალი თოვლის ნაცვლად, შეგიძლიათ დაამატოთ ვარსკვლავები, მაგალითად, ასე:
FlakeCode:["*"] // ფიფქის ხედი
ან მრგვალი თოვლი და ვარსკვლავები:
FlakeCode:[".", "*"] // ფიფქის ხედი
ისევე როგორც ნებისმიერი სხვა პერსონაჟი (და თუნდაც დოლარის ნიშანი - $).
სკრიპტი შესანიშნავია საიტის ზედა ნაწილის გასაფორმებლად ძირითადი შინაარსის გადახურვის გარეშე.
Snowstorm - Smart JavaScript Falling Snow Script
რატომ ჭკვიანი, გეკითხებით? რადგან ამ სკრიპტში (ამ სტატიაში განხილული სხვებისგან განსხვავებით) ფიფქების მოგერიების დამატებითი ეფექტია. ანუ, როცა თქვენს საიტზე მაუსის კურსორს გადააადგილებთ, ფიფქები მისგან საპირისპირო მიმართულებით ჩქარობენ. რაც უფრო შორს არის კურსორი ეკრანის შუა ნაწილიდან, მით უფრო მაღალია ფიფქების სიჩქარე.
დემონსტრაცია:
ამ ეფექტის თქვენს საიტზე დასაყენებლად დამატებითი ბიბლიოთეკები არ არის საჭირო. ყველაფერი რაც თქვენ უნდა გააკეთოთ არის:
1. ჩამოტვირთეთ არქივი ქარბუქი.zipსტატიის ბოლოს. გახსენით და ატვირთეთ შინაარსი თქვენს საიტზე თქვენთვის მოსახერხებელი გზით.
საჭიროებისამებრ შეიტანეთ ცვლილებები სკრიპტის ანიმაციაში.
გარდა იმისა, რომ ფიფქები მოიგერიეს კურსორიდან, ზოგიერთი მათგანი ეკრანის ბოლოში ეწებება, რაც მცირე შთაბეჭდილებას ტოვებს ფიფქების მიერ ფიფქის ფორმირების შესახებ.
Snowfall - ცვივა თოვლის ეფექტი თოვლის ნალექებით jQuery-ზე
ყველაზე მეტად ეს სკრიპტი მომწონს, რადგან ის ახორციელებს პატარა თოვლის ბურღულებს და ასევე აგროვებს პატარა თოვლის ნაკადულებს მითითებულ ელემენტებზე.
დემონსტრაცია:
ამ ეფექტის დაყენება სხვებზე ცოტათი გრძელია.
1. თუ თქვენს საიტს არ აქვს jQuery ბიბლიოთეკა, ჩართეთ იგი განყოფილებაში HEAD:
3. გახსნის ტეგი კლასის დანიშვნა" მუქიBg»:
4. წინადახურვის ტეგი მოიცავს სკრიპტებს:
5. და დასკვნით ეტაპზე, მიეცით კლასი იმ ელემენტებს, რომლებზედაც უნდა ჩამოყალიბდეს თოვლის ნაკადები:
Class="collectonme"
თუ არ გსურთ თოვლების ფორმირება საიტზე, ამოიღეთ ხაზი სკრიპტიდან:
კოლექცია: ".collectonme",
ეს სავალდებულო მოქმედებაა, წინააღმდეგ შემთხვევაში თქვენს საიტზე თოვლი არ ჩამოვა.
შესანიშნავი სკრიპტი, ეს არის ის, რასაც ადრე ვიყენებდით ჩვენს საიტზე.
გლუვი ფენიანი დაცემის თოვლის ეფექტი CSS3-ით
აქ, როგორც გესმით, ჩვენ არ მივმართავთ ყველა სახის სკრიპტის გამოყენებას, მაგრამ მოვახდენთ მხოლოდ სუფთა CSS-ს.
დემონსტრაცია:
ჯადოსნური, არა?
იმისათვის, რომ დააინსტალიროთ ეს ეფექტი თქვენთვის, შეასრულეთ სამი მარტივი ნაბიჯი.
1. ჩამოტვირთეთ არქივი snow_img.zipსტატიის ბოლოს. გახსენით და ატვირთეთ შინაარსი თქვენს საიტზე FTP-ის ან ჰოსტინგის ფაილ მენეჯერის მეშვეობით.
2. ჩასვით თქვენს სტილის ფურცელში (სასურველია ბოლოში):
SnowContainer ( სიგანე: 100%; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; z-ინდექსი: -1; ) #snow ( სიგანე: 100%; სიმაღლე: 100%; ფონის სურათი: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-ანიმაცია: snow 20s linear infinite; -moz-animation: თოვლი 20წ წრფივი უსასრულო; -ms-ანიმაცია: თოვლი 20წ წრფივი უსასრულო; ანიმაცია: თოვლი 20წ წრფივი უსასრულო; ) @keyframes თოვლი ( 0% ( ფონის პოზიცია: 0px 0px, 0px 0px, 0px 0px; ) 100% ( ფონი- : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes snow ( 0% (ფონის პოზიცია: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; ) 10px0px; 300px; ) ) @-webkit-keyframes snow ( 0% ( ფონის პოზიცია: 0px 0px, 0px 0px, 0px 0px; ) 100% (ფონის პოზიცია: 500px 1000px, 400px 300px @ms)-300px ; საკვანძო კადრები თოვლი ( 0% ( ფონის პოზიცია: 0px 0px, 0px 0px; ) 100% (ფონის პოზიცია: 500px 1000px, 400px 40 0px, 300px 300px; ))
შემდეგ შეინახეთ ყველა ცვლილება.
აქ არის თოვლის ეფექტების ისეთი კარგი არჩევანი, რომელიც აუცილებლად გაახარებს თქვენი ვებსაიტის ვიზიტორებს.
