თანამედროვე ვებ გვერდებზე ანიმაცია დიდი ხანია მიჩნეულია. ელემენტების დაშლა, მფრინავი შეტყობინებები, სრიალი სურათების გალერეები აუმჯობესებს მომხმარებლის გამოცდილებას და ზრდის საიტის მუშაობას. პოპულარულ jQuery javascript ბიბლიოთეკაში, fadeIn() არის ანიმაციის ერთ-ერთი ძირითადი ფუნქცია. ის აკონტროლებს ბლოკების გამჭვირვალობას.
გაქრობის ეფექტები
FadeIn() მეთოდი უზრუნველყოფს, რომ მასზე გადაცემული ელემენტის გამჭვირვალობა იცვლება 100%-მდე. jQuery ბიბლიოთეკაში ის დაწყვილებულია fadeOut() ფუნქციასთან, რომლითაც შეგიძლიათ გამჭვირვალობის ნულამდე გადაყვანა და ამით ელემენტის „დაშლა“.
დაგაინტერესებთ:
მსგავსი ეფექტის მიღწევა შესაძლებელია fadeTo() მეთოდით, რომელსაც აქვს გავლენის კიდევ უფრო ფართო სპექტრი. FadeTo()-ს შეუძლია დააყენოს გამჭვირვალობის ნებისმიერი მნიშვნელობა 0-დან 1-მდე.
მეთოდის სინტაქსი
jQuery-ის fadeIn() მეთოდი გამოიძახება იმ ელემენტის კონტექსტში, რომლის გამჭვირვალობა უნდა შეიცვალოს. მას შეუძლია მიიღოს ნულიდან სამ პარამეტრამდე:
ელემენტი.fadeIn(); ელემენტი.fadeIn(ხანგრძლივობა); element.fadeIn(ხანგრძლივობა, გამოძახება); element.fadeIn(ხანგრძლივობა, შემსუბუქება, გამოძახება); ელემენტი.fadeIn(config);
ხანგრძლივობის არგუმენტი განსაზღვრავს იმ დროს, რაც ანიმაციას დასჭირდება. ეს შეიძლება იყოს რიცხვი, რომელიც წარმოადგენს მილიწამების რაოდენობას, ან ერთ-ერთი შემდეგი საკვანძო სიტყვა:
- "სწრაფი" (200 ms);
- "ნელი" (600 ms);
თუ ხანგრძლივობა არ არის დაყენებული, ის ნაგულისხმევად იქნება 400 მილიწამი.
გამოძახების პარამეტრი განსაზღვრავს ფუნქციას, რომელიც გამოიძახება ანიმაციის დასრულებისთანავე. გამოძახების ფუნქცია არ იღებს რაიმე პარამეტრს. ეს ცვლადი მის შიგნით ეხება DOM კვანძს, რომელიც იცვლება.
შემსუბუქების არგუმენტი აკონტროლებს ანიმაციის დროის ფუნქციას, ანუ მის სიჩქარეს დროთა განმავლობაში. მასთან ერთად შეგიძლიათ დააჩქაროთ ანიმაციის დასაწყისი და შეანელოთ ანიმაციის დასასრული, ან გახადოთ იგი ერთგვაროვანი. არგუმენტის მნიშვნელობა არის სტრიქონი, რომელიც შეიცავს საკვანძო სიტყვას, ნაგულისხმევი არის "swing" ფუნქცია.
შემდეგ მაგალითში, jQuery fadeIn() თანაბრად გაზრდის ელემენტის გამჭვირვალობას კლასში .block ერთი წამით, რის შემდეგაც იგი დაბეჭდავს შეტყობინებას კონსოლში:
$(".block").fadeIn(1000, linear, function() ( console.log("ანიმაცია დასრულებულია"); ));
თუ ჩამოთვლილი პარამეტრები არ არის საკმარისი, შეგიძლიათ კონფიგურაციის ობიექტი გადასცეთ მეთოდს, რომელიც შეიძლება შეიცავდეს 11-მდე სხვადასხვა პარამეტრს.
გამოძახებები
jQuery fadeIn() მეთოდზე გადაცემული გამოძახების პარამეტრი ძალიან სასარგებლო ვარიანტია, რადგან თვისების ცვლილება ასინქრონულია კოდის საერთო ნაკადის დაბლოკვის გარეშე.
const callback = function() ( console.log("ანიმაცია დასრულებულია"); ); $(".ელემენტი").fadeIn(1000); გადმომირეკე();
ამ მაგალითში ფუნქცია იმუშავებს ანიმაციის დაწყებისთანავე, ელემენტის სრულად გამოჩენის მოლოდინის გარეშე.
იმისათვის, რომ ყველაფერი ისე იმუშაოს, როგორც დაგეგმილი იყო, თქვენ უნდა გამოიყენოთ გამოძახების არგუმენტი ანიმაციის დასასრულის დასაჭერად:
const callback = function() ( console.log("ანიმაცია დასრულებულია"); ); $(".element").fadeIn(1000, გამოძახება);
ახლა კონსოლზე გაგზავნილი შეტყობინება გამოჩნდება მხოლოდ მაშინ, როდესაც ელემენტი სრულად ჩანს.
სრული გამჭვირვალობა და ელემენტის დამალვა
მოგეხსენებათ, opacity თვისების ნულოვანი მნიშვნელობა არ შლის ელემენტს გვერდიდან, არამედ მხოლოდ უხილავს ხდის მას. ეს ქცევა არ არის შესაფერისი, თუ გვსურს რაიმე ბლოკის დამალვა.
ამიტომაც jQuery-ის fade მეთოდები fadeIn(), fadeTo() და fadeOut() მუშაობს გამჭვირვალობით ჩვენების თვისებასთან ერთად. სრულად გამჭვირვალე ელემენტი დამალულია ეკრანის გამოყენებით: არცერთი წესი და სანამ გამოჩნდება, ეს წესი გაუქმებულია.
ცვლის არჩეული ელემენტების გამჭვირვალობის დონეს გვერდზე. საშუალებას გაძლევთ შეუფერხებლად შეცვალოთ გამჭვირვალობა. მეთოდს აქვს ორი გამოყენება:
ხანგრძლივობა- გამჭვირვალობის ცვლილების ხანგრძლივობა. შეიძლება მიცემული იყოს მილიწამებში ან სტრიქონის მნიშვნელობა "სწრაფი" ან "ნელი" (200 და 600 მილიწამი).
გამჭვირვალობა- საჭირო გამჭვირვალობის ღირებულება. უნდა იყოს მითითებული, როგორც რიცხვი 0-დან 1-მდე (0 - სრული გამჭვირვალობა, 1 - გამჭვირვალობის გარეშე).
გადმომირეკეარის ფუნქცია, რომელიც მითითებულია როგორც გამჭვირვალობის ცვლილების დასრულების დამმუშავებელი. მას არანაირი პარამეტრი არ გადაეცემა, თუმცა, ფუნქციის შიგნით, ეს ცვლადი შეიცავს ელემენტის DOM ობიექტს, რომლის გამჭვირვალობაც იცვლება. თუ არსებობს რამდენიმე ასეთი ელემენტი, მაშინ დამმუშავებელი გამოიძახება ცალკე თითოეული ელემენტისთვის.
ხანგრძლივობა- იხილეთ აღწერა ზემოთ. ნაგულისხმევად, პარამეტრი არის 400
გამჭვირვალობა- იხილეთ ზემოთ.
შემსუბუქება- გამჭვირვალობის ცვლილების დინამიკა (შეანელებს თუ არა რბოლის ბოლოს, თუ პირიქით, დააჩქარებს). (იხილეთ აღწერა)
გადმომირეკე- იხილეთ ზემოთ.
- გამჭვირვალობის შეცვლა
- დააყენეთ ელემენტის გამჭვირვალობა
- დააყენეთ ელემენტის გამჭვირვალობის დონე
- ელემენტის გამჭვირვალობა
- .fadeTo()
- fadeTo ()
ამ გაკვეთილში ჩვენ განვიხილავთ მაგალითს jQuery გამჭვირვალობა იცვლება. მსგავსი თემები უკვე განიხილეს გაკვეთილზე, ისე, იქ სცენარის პრინციპი ეფუძნებოდა მარტივ cssდა html, ამ გაკვეთილზე ასევე შევეხებით jQueryპლიუს ყველაფერი, იყო გამოსახულების მარტივი ცვლილება hover-ზე, გამჭვირვალობა ხდება დაუყოვნებლივ ( გამჭვირვალობა).
მე ვფიქრობ, რომ თქვენ უკვე უყურეთ ორ დემოს და გაიგეთ განსხვავება, თუ როგორ მუშაობს სკრიპტები. მოდით ახლა გადავხედოთ ამ გაკვეთილის კოდს.
Პირველი ნაბიჯი. HTML.
ასე რომ, ჩვენ გვაქვს ფაილი index.php.
მასში, პირველ რიგში, ჩვენ ჩავრთავთ jquery.js ბიბლიოთეკას. ჩამოტვირთეთ ის თქვენთვის და დააკავშირეთ ტეგებს შორის ხელმძღვანელი.
შემდეგი, ჩვენ გავაანალიზებთ jQueryკოდი, რომელიც ურთიერთქმედებს კლასთან img. პირველ რიგში, ჩვენ ვწერთ ფუნქციას, რომელსაც აქვს კლასი imgდა დააყენეთ გამჭვირვალობა 50% თავდაპირველ მდგომარეობაში. ანუ, გამოსახულებას მასზე დგომის გარეშე აქვს თავისი გამჭვირვალობის ნახევარი. შემდეგ, როდესაც სურათზე ჰოვერის მოქმედება შესრულებულია, ფუნქციას უწოდებენ, რომელიც ცვლის კლასის პოზიციას imgმკაფიო პოზიციამდე. სურათის მითითების დასრულების შემდეგ, ფუნქცია გადადის საწყის საწყის პოზიციაზე. გამოსახულების გამჭვირვალობის ატრიბუტი გამჭვირვალობა. თქვენ შეგიძლიათ დეტალურად შეისწავლოთ იგი დოკუმენტაციაში css.
$(function() ( // დააყენეთ გამოსახულების გამჭვირვალობა 50%-ზე $(".img").css("გაუმჭვირვალობა","0.5"); // გადაიტანეთ მაუსი სურათზე $(".img"). hover( ფუნქცია () ( // რის შემდეგაც გამჭვირვალობა ქრება $(this).stop().animate(( opacity: 1.0 ), "slow"); ), // სურათის ფუნქციის () მაუსის მოხსნის შემდეგ // გამჭვირვალობა უბრუნდება საწყის პოზიციას 50% $(this).stop().animate(( opacity: 0.5 ), "slow"); )); ));
მეორე ნაბიჯი. CSS სტილის ფაილი.
ჩვენ ვარეგისტრირებთ ტეგს დივდა მიეცით მას კლასი სურათებიჩვენ დავაზუსტებთ მასში რამდენიმე სტილს cssსურათისთვის (თუ გსურთ, უბრალოდ ჯობია ნახოთ, როგორ მუშაობს ეს სკრიპტი). ახლა დაწერეთ ტეგი imgმასში ვაზუსტებთ გამოსახულების გზას და ვაყენებთ კლასს img, რომელიც ურთიერთქმედებს jQueryკოდი ზემოთ.
რამდენიმე სტილი cssუკეთესი ხილვადობისთვის.
სურათები ( კონტური: 1px მყარი #363636; სიგანე: 300px; ფონის ფერი: #2d2d2d; padding: 8px; )
სკრიპტი ისეთი მარტივია, რაც მის გამოყენებას უფრო აქტუალურს ხდის გამჭვირვალობა იცვლებაგადაიტანეთ სურათები. გირჩევ ითამაშო jQueryკოდი, სადაც არის სამი ფუნქცია: საწყისი, hover და unhover. შეგიძლიათ აჩვენოთ მრავალფეროვნება. დავუშვათ, საწყის პოზიციაში, მიუთითეთ გამჭვირვალობა 0.5, ჰოვერზე გამჭვირვალობა 1.0, და ხელმძღვანელობის მოხსნიდან გამჭვირვალობა 0.2. გამოდის ერთგვარი ძალიან საინტერესო მოქმედება გამოსახულებით!
და კიდევ ერთხელ მივესალმები ბლოგის ძვირფასო მკითხველებო. დღეს მინდა გითხრათ როგორ გააკეთოთ საიტის ნებისმიერი ელემენტის გლუვი გამჭვირვალობა jQuery-ის გამოყენებით. რას ნიშნავს ეს ნებისმიერი ელემენტისთვის? ეს ნიშნავს, რომ თქვენ შეგიძლიათ გამოიყენოთ ეს გამჭვირვალობა საიტზე არსებულ ნებისმიერ სურათზე, მრიცხველზე და ტეგზე. ეს ყველაფერი უბრალოდ დაამშვენებს თქვენს რესურსს. მოდით დავიწყოთ.
შეგახსენებთ, რომ megaweb.su-მ გააზიარა სცენარი, რისთვისაც დიდი მადლობა მას.
სკრიპტი
პირველი რაც უნდა გააკეთოთ არის ბიბლიოთეკის ჩართვა jQuery, ამ გაგებით, სკრიპტი, რომელიც თქვენ უნდა დააყენოთ ქვემოთ ტეგებს შორის და .
შემდეგ, ტეგის წინ დააკოპირეთ და ჩასვით შემდეგი jQuery სკრიპტი:
კოპირებულია? გილოცავთ, სამუშაოს უმეტესი ნაწილი უკვე გააკეთეთ :-)
სკრიპტის დაყენება
თქვენ შეგიძლიათ სრულად დააკონფიგურიროთ ეს სკრიპტი თქვენი გემოვნებით.
- $('.megaweb')არის კლასის სახელი, რომელიც გამოყენებული იქნება ვებ ელემენტებზე;
- animate((გაუმჭვირვალობა:'0.3'),1);- ეს არის ელემენტის ყველაზე ოპტიმალური გამჭვირვალობა;
- animate((გაუმჭვირვალობა:'1.0'),600);- ვებ ელემენტის გამჭვირვალობა hover-ზე;
- animate((გაუმჭვირვალობა:'0.3'),300);- ელემენტის დაბრუნება პირველივე გამჭვირვალობაზე, მას შემდეგ რაც კურსორი ამოღებულია ელემენტიდან.
მას შემდეგ, რაც ჩვენ დავაკონფიგურირებთ სკრიპტს, როგორც ჩვენ გვჭირდება, ის შეიძლება გამოყენებულ იქნას ვებ დიზაინის ელემენტებზე, მაგალითად, კლასის გამოყენებით.
