პროგრამა HTML5-ში სლაიდების ჩვენების შესაქმნელად. სლაიდშოუ სრული ეკრანის ფონით CSS3-ში
სლაიდშოუ ესკიზებით და სლაიდების აღწერილობით. გამოსახულების შეცვლის სხვადასხვა ეფექტები. არსებობს ორი ვარიანტი: სლაიდების ავტომატური შეცვლით და მის გარეშე.
2. სუფთა CSS3 სლაიდერი
ლამაზი გამოსახულების სლაიდერი აღწერით და ავტომატური სლაიდების შემცვლელით. როდესაც სურათს ატარებთ, როტაცია ჩერდება. გაჩერებას ახლავს CSS3 ეფექტი.
3. jQuery მოდული “Photorama”
ლამაზი გალერეის სლაიდერი.
4. ტექსტის ეფექტები „ტიპოგრაფიის ეფექტები“
საინტერესო ეფექტები ტიპოგრაფიასთან მუშაობისთვის CSS3 და jQuery-ის გამოყენებით. 7 განსხვავებული მაგარი ეფექტი.
5. Darkbox მოდული
პატარა მსუბუქი დანამატი გამოსახულების ჩვენებისთვის ამომხტარ ბლოკში.
6. Hover ეფექტი jQuery-ით
წრის ეფექტი ჰოვერზე.
7. ანიმაციური jQuery CSS3 ღილაკები
უამრავი სხვადასხვა ანიმაციური CSS3 ეფექტი თქვენი ვებსაიტის გასაოცარი ღილაკების შესაქმნელად. უბრალოდ მაგარი ჰოვერის ეფექტებია.
8. HTML5 jQuery ცვლის ფონის სურათებს
ესკიზებზე დაწკაპუნებისას, ფონის სურათები ერთმანეთს ცვლის ბუნდოვანი ეფექტით. ბრაუზერის ფანჯრის ზომის შეცვლისას, ფონის სურათი იცვლება.
8. ინტერაქტიული ტიპოგრაფიის ეფექტები
საინტერესო ტექსტური ეფექტები HTML5-ისა და jQuery-ის გამოყენებით (4 განსხვავებული ეფექტი). ეფექტის სანახავად გადაიტანეთ ტექსტი.
9. ამომხტარი გამოსახულების წარწერები
მრავალი განსხვავებული ანიმაციური ჰოვერის ეფექტი ამომხტარი გამოსახულების წარწერების განსახორციელებლად.
10. მოდული „პორტამენტო“
მცურავი ბლოკი jQuery-ში. ყოველთვის ხილული რჩება გვერდის ქვემოთ გადახვევისას.
11. შინაარსის გადამხვევები
jQuery მოდული ფიქსირებული ზომის ბლოკებში გადახვევის ჩვენებისთვის. რამდენიმე სტილი.
jQuery შინაარსის ჰორიზონტალური და ვერტიკალური გადახვევის განხორციელება ფიქსირებული ზომის ბლოკში.
13. Tiny Scrollbar მოდული
jQuery მოდული შინაარსის ვერტიკალური და ჰორიზონტალური გადახვევის განსახორციელებლად.
14. მოდული „jScrollPane“
ბლოკში შინაარსის ბრაუზერული გადახვევა.
15. მცურავი ბლოკი „Scroll Follow“
დანამატი ბლოკის შესაქმნელად, რომელიც გადახვევს გვერდის გადახვევისას. ბლოკის დაფიქსირება შესაძლებელია ბმულზე დაწკაპუნებით.
16. ამომხტარი გვერდითი ზოლები
ამოსაწევი პანელები ვებ გვერდის ყველა მხარეს.
17. ეფექტური CSS3 გადაწყვეტილებები გვერდების დიზაინისთვის
სამი ვარიანტი ანიმაციური ეფექტების დანერგვისთვის "საიტის დამუშავების პროცესშია" ნამუშევრის შესაქმნელად.
17. ეფექტი გვერდის გადახვევისას
საოცარი ეფექტი გვერდის გადახვევისას: ელემენტები მოძრაობენ ეკრანის უკან მდებარე ზონიდან ან, პირიქით, იმალებიან ეკრანის მიღმა. ეს გამოსავალი შესანიშნავია პორტფელის ვებსაიტებზე გამოსაყენებლად, დასრულებული პროექტების ეფექტური პრეზენტაციისთვის მოკლე აღწერილობით.
19. მოდული „fancyBox 2“
ცნობილი fancybox მოდულის ახალი, სრულიად გადაწერილი ვერსია მოდალურ ფანჯრებში სურათებისა და სხვა შინაარსის ჩვენებისთვის.
20. მინიმიტ გალერეა
ფუნქციური დანამატი ფუნქციების ფართო სპექტრით: გალერეა, კარუსელი, სლაიდერი, მენიუ, გაფართოება, ანიმაციური ღილაკები.
21. jQuery News TickerNews rotator ვებსაიტზე. შეტყობინებები ერთმანეთს მიჰყვება და ჩნდება საინტერესო საბეჭდი მანქანის ეფექტის გამოყენებით. შეგიძლიათ შეაჩეროთ ახალი ამბების შეცვლა ღილაკზე „პაუზა“ დაწკაპუნებით. შეგიძლიათ გამოიყენოთ ისრები ერთი გზავნილიდან მეორეზე გადასასვლელად.
22. ადაპტური სურათები
მასშტაბირებადი სურათები მობილურ მოწყობილობებზე გამოსატანად. სურათის ზომები დამოკიდებულია ფანჯრის ზომაზე. გამოყენებული ტექნოლოგიები: javascript და PHP5.
23. vScroller
ვერტიკალური jQuery, CSS3 scroller. რეგულირებადი გადახვევის სიჩქარე და დაყოვნების დრო.
24. მრავალ დონის ჩამოსაშლელი მენიუ „jQSimpleMenu“
ახალი jQuery მოდული ვებსაიტზე მრავალ დონის ჰორიზონტალური ჩამოსაშლელი მენიუს შესაქმნელად.
25. "jsCarousel 2.0"
jQuery მოდული ვერტიკალური და ჰორიზონტალური კარუსელის განსახორციელებლად.
26. როტატორი „დინამიური ამბები“
jQuery მოდული უახლესი ამბების ლამაზი ჩვენებისთვის RSS არხიდან.
27. ანიმაციური მენიუ
ანიმაციური ეფექტი მენიუს ერთეულზე გადასვლისას.
28. ანიმაციური ტექსტის ეფექტი
CSS თვისებასთან მუშაობის სამი სანახაობრივი მაგალითი „background-clip: text“. CSS3 ეფექტი არ მუშაობს ძველ ბრაუზერებში.
29. CSS3 jQuery ბუნდოვანი ეფექტი
როდესაც ბლოკს ატარებთ, ის იზრდება და დარჩენილი ტექსტის ბლოკები ბუნდოვანია ფონზე.
შენიშვნების მსგავსი ბლოკების დანერგვა ტექსტით.
34. Rlightbox
მედიის შინაარსის ჩვენება pop-up ბლოკებში: სურათები, ვიდეო, Flash.
35. jQuery ზუმერი
კვადრატის ფართობის გაფართოება.
36. CSS3 jQuery სურათის აღწერა
მოდული „დაფუძნებული მოცურების კარის კონტენტის გალერეა“ ამომხტარი გამოსახულების აღწერილობის განსახორციელებლად. როდესაც კურსორს ატარებთ რომელიმე წარმოდგენილ სურათზე, გამოჩნდება მოკლე აღწერა სრული სტატიის ბმულით. აფრენაზე: ავტოფარეხის კარის ამწევის ეფექტი.
37. jQuery-ის მოდული „uCompare“ ეფექტი „წინ და შემდეგ“
ფარდის გადაწევით შეგიძლიათ შეადაროთ ორი გადანაწილებული სურათი. იდეალურია იმ შემთხვევებისთვის, როდესაც თქვენ გჭირდებათ რაიმეს ორი ვერსიის ჩვენება გვერდზე: ადრე და შემდეგ.
JavaScript-ის გამოყენების გამორთვით, თქვენ ვერ იხილავთ სლაიდშოუს საინტერესო მაგალითებს!
სლაიდშოუ საიტისთვისყველა ვებმასტერს უნდა შეეძლოს ვებსაიტზე სლაიდშოუს შექმნა და დამატება. სლაიდერების გამოყენება ძალიან პოპულარულია და მათი ნახვა შეგიძლიათ თითქმის ნებისმიერ თანამედროვე რესურსზე.
და ეს შემთხვევითი არ არის!
** შენიშვნა. jQuery განყოფილების სხვა გვერდებისგან განსხვავებით, მე დავწერე საჭირო სკრიპტები პირდაპირ ამ გვერდის HTML კოდში.
გარდა ამისა, რაც ძალიან მნიშვნელოვანია(!), ისინი მუშაობენ ჩემთვის jQuery-ის სხვა ვერსიიდან, უფრო გვიან, ვიდრე აქ ვიყენებ.
თუ იქ ვიყენებ jquery ვერსიას v.1.10.1.min, მაშინ აქ v.1.8.3.min
თუმცა, მეტი ამის შესახებ და სხვა ყველაფრის შესახებ, რათა, შემდგომში.
სლაიდ შოუს მომზადებავებსაიტზე სლაიდ შოუს შექმნისა და ინსტალაციის სამუშაო ჩვეულებრივ შედგება 4 ძირითადი ეტაპისგან.
სურათების მომზადება სლაიდერისთვის1. შერჩეული ფოტოები. მთავარი ის არის, რომ ისინი უნდა იყვნენ ერთი ზომა. თქვენ უნდა გაზომოთ ისინი ყურადღებით.
ამ შემთხვევაში მე გადავიღე მზა სურათები სასწავლო კურსზე დართული დამატებითი მასალებიდან. რომელი? ამის შესახებ აქ: "ბმულები" (იხსნება ახალ ფანჯარაში).
2. დავხატე სლაიდერის გრაფიკული გამოსახულება სტილში "ტელევიზია". შეიძლება არ იყოს ორიგინალური, მაგრამ ძალიან მოსახერხებელია.
მთავარია თქვენთვის საჭირო სანახავი არეალის ზომა ცოტა მეტისიგანეში და სიმაღლეში, ვიდრე მომზადებული ნახატები.
სურათები იწერება HTML კოდით ზუსტად იმ ადგილას, სადაც ისინი მომავალში იქნება ნაჩვენები. შემდეგ სკრიპტები შეიძლება დაიწეროს ნებისმიერ მოსახერხებელ ადგილას. მე ჩვეულებრივ ვტოვებ მათ სივრცეს სურათების ქვემოთ. სტრუქტურა უფრო ლოგიკურია.
თავად სურათები მოვათავსე p ტეგის შიგნით, რისთვისაც დავაყენე სიგანე და სიმაღლე CSS სტილში და დავაზუსტე მისი class="slideshow" . და თავად აბზაცი მათთან ერთად იყო განთავსებული საერთო div ტეგის შიგნით, რომლის ფონზე მე ჩამოვკიდე სლაიდერის მომზადებული გრაფიკული სურათი ( ტელევიზორი *). მას მიეცა class="slider_fon" .
უფრო მეტიც, მხოლოდ მისთვისგვერდის განტვირთვისთვის დავაკავშირე გარე სტილის ცხრილი და ყველაფერი გავაკეთე სურათებისთვის HTML კოდის შიგნით
.
P.S. ** ბოლო ნაბიჯი საერთოდ არ არის საჭირო. უბრალოდ უფრო მოსახერხებელია ჩემთვის. გვერდის სტრუქტურა რატომღაც უფრო ლოგიკურად გამოიყურება.
CSS-ის წესებში მე მივუთითე ფანჯრის ზომა სურათებისთვის, რომლებიც შემდეგ გამოჩნდება სლაიდერში (სიგანე - სიმაღლე). ბუნებრივია, ყველა სურათი უნდა იყოს იგივე ზომა.
თუ სასურველია, შემიძლია გავაფართოვო CSS პარამეტრები, ვთქვათ, ჩარჩოების, ფონის, ბალიშების და სხვა ელემენტების დამატებით. თუმცა, ვფიქრობ, რომ ეს ზედმეტი იქნება.
თუ, მიუხედავად ამისა, გსურთ ამის გაკეთება, მაშინ მიუთითეთ GENERAL ზომები, ეს არის: სურათი + ყველა კომპლექტი შეწევა და საზღვრები.
სკრიპტების დაკავშირებაგირჩევთ ეწვიოთ დახმარების გვერდს, რომელიც მე გავაკეთე ჩემთვის jQuery ტექნოლოგიის შესწავლისას. ეს ნამდვილად დაგეხმარებათ ამის გარკვევაში.
მე გავხსენი მასზე საჯარო წვდომა: "SELECTION in jQuery" (იხსნება ახალ ფანჯარაში).
როგორც ყოველთვის, პირველად შევქმენი js საქაღალდე საიტზე. შემდეგ გადმოვწერე სლაიდ შოუსთვის (არქივის) საჭირო სკრიპტები და ამ საქაღალდეში გავხსენი. ის შეიცავდა ორ სკრიპტის ფაილს: jquery-1.8.3.min.js core და jquery.cycle.all.min.js დანამატს.
ყოველი შემთხვევისთვის, მას ასევე დავამატე ჩემი საკონტროლო ფაილი myscripts11.js. თუმცა, აქ არ გამომადგა სლაიდ შოუს გაშვება და დემონსტრირება. თუ არ შევამოწმე, რომ შექმნილი საქაღალდე სწორად იყო დაკავშირებული.
მაგრამ... ...დაე იყოს. თქვენ არასოდეს იცით, რისი გაკეთება მინდა მომავალში აქ განთავსებული სლაიდერებით. მოკლედ რომ ვთქვათ, "...ჩვენი ჯავშანტექნიკა ყოველთვის გვერდითაა".
შემდგომ. ტეგის შიგნით... ჩავდე ხაზები, სადაც ჩავწერე ბილიკები სკრიპტებისკენ. მე მაქვს ისინი: , და მოდულისთვის: .
მე გავაკეთე კომენტარი ჩემი საკუთარი ("სათადარიგო") საკონტროლო ფაილი.
და ბოლო რამ -
ისინი, ვინც ეწვევიან ჩემს საიტს ბრაუზერში გამორთული JavaScript თარჯიმანით, რა თქმა უნდა, ვერ შეძლებენ სლაიდ შოუს ყურებას.
ისინი დაინახავენ სურათებს ისე, როგორც HTML კოდშია ჩაწერილი, ე.ი. სვეტში, ერთმანეთის მიყოლებით.
გამაფრთხილებელი ხაზი გავუკეთე მათ და ჩავდე ტეგში... .
აი შენ წადი! სლაიდშოუ შეიქმნა. რჩება მხოლოდ მისი პარამეტრების კონფიგურაცია: სურათების შეცვლის სიჩქარე, მათი ჩვენების გზები და ა.შ.
სლაიდ შოუს პარამეტრების დაყენებაროგორც ზემოთ დავწერე (შენიშვნაში**), მე დავწერე საჭირო სკრიპტები პირდაპირ ამ გვერდის HTML კოდში.
ჩემს ვებგვერდზე შექმნილ სლაიდშოუში მე გამოვიყენე პარამეტრები "ნაგულისხმევი".
ზოგადად, მარტივია სურათებს შორის სხვადასხვა, საინტერესო ტიპის გადასვლების დაყენება გვერდის სხეულში განთავსებული ჯავასკრიპტის შეცვლით.
მაგალითად, ხაზის სინქრონიზაციის შეცვლით: false to sync: true სკრიპტში, შეგიძლიათ ამოიღოთ სივრცე სურათების შეცვლისას.
მნიშვნელოვანი შენიშვნა!
jQuery-ის სხვადასხვა ვერსიებს შეუძლიათ ერთმანეთთან კონფლიქტი, თუ ისინი იმავე გვერდზე არიან.
დარწმუნდით(!) შეამოწმეთ, რომ დანამატები მუშაობენ jQuery-ის დაინსტალირებულ ვერსიასთან, რადგან ყველა ვერსია არ არის თავსებადი!
მაგალითი **
jQuery განყოფილების სხვა გვერდებზე, რომლებიც იყენებენ ბიბლიოთეკას, დაინსტალირებულია jquery v.1.10.1.min. ასე რომ, ის უფრო თანამედროვეა, ვიდრე v.1.8.3.min, საიდანაც სწორად (!)აქ მუშაობს სლაიდშოუს სლაიდერები.
მოდული jquery.cycle.all.min.js მასთან ერთად არ მუშაობს!!!
(დამოწმებული)
თუმცა, არ ინერვიულო. ყველაფერი თქვენს ხელშია!
ჩემი ვებსაიტის "სასარგებლო" განყოფილებაში (იხსნება ახალ ფანჯარაში) თქვენ იპოვით გამოცდილი (!)საჭირო სკრიპტების სრული ნაკრები თქვენს ვებსაიტზე ასეთი სლაიდ შოუს შესაქმნელად. (უფასო, რა თქმა უნდა!)
ამ ქვეთავში მე ასე დეტალურად არ აღვწერ სლაიდ შოუს შექმნის ყველა საფეხურს. ძირითადად, ისინი აბსოლუტურად იგივეა.
კიდევ უფრო მარტივი. არ არის საჭირო Photoshop-ში სლაიდერის ფონის სურათის დახატვა. თუნდაც ცალკეთქვენ არ დაგჭირდებათ CSS სტილის ფურცელი.
თუ გსურთ განათავსოთ სლაიდშოუს სხვადასხვა ვარიანტები ერთისაიტის გვერდი, როგორც მე აქ ( იხილეთ ქვემოთ), მიუთითეთ სხვადასხვა კლასი თითოეული ვარიანტისთვის სკრიპტის ხაზში $(" .სლაიდშოუ").ციკლი((
P.S.* არ დაგავიწყდეთ მისი CSS-ში ჩართვა ფანჯრის ზომები თითოეული კლასისთვის, თუ, მიუხედავად ამისა, იყენებთ სტილის ფურცელს. არ მჭირდებოდა.
ჯერ გადახედეთ უძრავ ნახატებს, რომლებიც ანალოგიურად ავიღე სასწავლო კურსიდან (რომელი? გავიმეორებ ლინკს: „ლინკები“) და აქ დავდე შედარებისთვის.
აი ისინი. მე-7 სლაიდ შოუს მომავალი მონაწილეები!
ნახეთ მათი შესრულება ქვემოთ.
მე გაჩვენებთ რამდენიმე პოპულარული ტიპის სლაიდერები. მე ჩავდე ისინი ზოგად ცხრილში, ნახვის გასაადვილებლად.
მარცხნივ არის ეფექტის სახელი და მოკლე ახსნა, საჭიროების შემთხვევაში. მარჯვნივ არის მაგალითი.
| 1. დაშლა ("გაქრება"): მოტოციკლების საუკეთესო მაგალითის მსგავსი. |
|
| 2. ჩარევა: |
|
| 3. მასშტაბირება: |
|
| 4. გადაატრიალეთ ღერძების გასწვრივ ("curtainX" ან Y): აქ დაყენებულია "curtainX". |
|
| 5. ვერტიკალურად კოლაფსი („ჩამობრუნება“): აქ ის იშლება, მაგრამ თქვენ შეგიძლიათ დააყენოთ სხვა ტიპის გადასვლები: turnUP, Left, Right. |
|
| 6. გადახვევა ("scrollDown"): მიკერძოება. აქ დავაინსტალირე, მაგრამ ამის გარდა შეგიძლიათ კომპლექტი: გადახვევა, მარცხნივ, მარჯვნივ. |
- თარგმანი
- სახელმძღვანელო
CSS3-ის წყალობით ჩვენ შეგვიძლია შევქმნათ ანიმაციური ეფექტები JavaScript-ის გამოყენების გარეშე, რაც ბევრ დეველოპერს გაუადვილებს მუშაობას.
ჩვენ არ უნდა გამოვიყენოთ ზედმეტად CSS3, რადგან ძველი ბრაუზერები არ უჭერენ მხარს მის ყველა თვისებას. ყოველ შემთხვევაში, ჩვენ ყველანი ვხედავთ CSS3-ის პოტენციალს და ამ სტატიაში განვიხილავთ, თუ როგორ შევქმნათ მარყუჟის გამოსახულების სლაიდერი მხოლოდ CSS3 ანიმაციის გამოყენებით.
CSS3 გადასვლებთან და საკვანძო კადრების ანიმაციასთან დაკავშირებული ძირითადი ცნებების აღწერა.
HTML მარკირების შექმნა გამოსახულების სლაიდერისთვის.
შექმენით სტილის ფურცელი სლაიდერის ჩვენებისთვის.
ანიმაციის დამატება სლაიდერში. ჩვენ განვიხილავთ აქ მიმდინარე პროცესებს.
პროგრესის ზოლის დამატება ჩვენი სლაიდერისთვის.
სათაურების საჩვენებლად მინიშნების დამატება.
აჩვენეთ ინსტრუმენტების მინიშნება სვლისას CSS3 გადასვლების გამოყენებით
მოდით ვაჩვენოთ სლაიდერი მოქმედებაში.
საბოლოო აზრები.
ამ გაკვეთილის გამოსაყენებლად, თქვენ უნდა გქონდეთ ძირითადი გაგება CSS-ის, კონკრეტულად CSS3 გადასვლებისა და საკვანძო კადრების ანიმაციების შესახებ.
ამ მარტივი ცნებებით, ჩვენ ვნახავთ, როგორ შევქმნათ ფუნქციური გამოსახულების სლაიდერი.
ჩვენ შეგვიძლია გამოვიყენოთ ოთხი გარდამავალი თვისება:
გარდამავალი-საკუთრება
განსაზღვრავს CSS თვისებების სახელ(ებ)ს, რომლებზეც უნდა იყოს გამოყენებული გადასვლები.
გადასვლა-ხანგრძლივობა
განსაზღვრავს დროს, რომლის განმავლობაშიც უნდა მოხდეს გადასვლა.
გადასვლა-დროის ფუნქცია
განსაზღვრავს, თუ როგორ გამოითვლება შუალედური გარდამავალი მნიშვნელობები.
გადასვლა-დაყოვნება
განსაზღვრავს, როდის ხდება გადასვლა.
ამჟამად, CSS3 გადასვლები მხარდაჭერილია Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ და IE 10. ვინაიდან ტექნოლოგია ჯერ კიდევ შედარებით ახალია, საჭიროა ბრაუზერის პრეფიქსები. სინტაქსი ყველა ბრაუზერისთვის ერთნაირია, გარდა საჭირო პრეფიქსების დამატებისა. ჩვენ გამოვტოვებთ მათ ამ სტატიაში, მაგრამ არ დაგავიწყდეთ პრეფიქსების ჩართვა კოდში.
ვნახოთ, როგორ გამოვიყენოთ მარტივი გადასვლა ბმულზე:
a (ფერი: #000; გადასვლის თვისება: ფერი; გადასვლის ხანგრძლივობა: 0,7 წმ; გადასვლის დრო-ფუნქცია: მარტივია; გადასვლის დაყოვნება: 0,3 წმ; ) a:hover (ფერი: #fff; )
ელემენტისთვის ანიმაციის მინიჭებისას ასევე შეგიძლიათ გამოიყენოთ სტენოგრამის ფორმა:
a (ფერი: #000; გარდამავალი: ფერი 0.7 წმ მარტივია 0.3 წმ; ) a:ჰოვერი (ფერი: #fff; )
CSS გადასვლებისგან განსხვავებით, keyframe ანიმაციები ამჟამად მხარდაჭერილია მხოლოდ WebKit ბრაუზერებში, Firefox და მალე IE 10. მხარდაუჭერელი ბრაუზერები უბრალოდ უგულებელყოფენ ანიმაციის კოდს.
ანიმაციის თვისებას აქვს რვა ქვეთვისება:
ანიმაცია-დაყოვნება
განსაზღვრავს როდის იწყება ანიმაცია.
ანიმაცია- მიმართულება
ადგენს, უნდა ითამაშოს თუ არა ანიმაცია უკუღმა ალტერნატიულ მარყუჟებში.
ანიმაცია-ხანგრძლივობა
განსაზღვრავს დროის ხანგრძლივობას, რომელსაც ანიმაცია სჭირდება ერთი ციკლის დასასრულებლად.
ანიმაცია-გამეორება-თვლა
განსაზღვრავს ანიმაციის ციკლების რაოდენობას გაჩერებამდე.
ანიმაცია-სახელი
განსაზღვრავს წესის სახელს @keyframes-ში.
ანიმაცია-თამაში-მდგომარეობა
ადგენს ანიმაციის დაკვრას თუ შეჩერებას.
ანიმაციის შევსების რეჟიმი
განსაზღვრავს, თუ როგორ უნდა გამოიყენოს CSS ანიმაციამ სტილები მის სამიზნეზე შესრულებამდე და შესრულების შემდეგ.
ვნახოთ, როგორ გამოვიყენოთ მარტივი ანიმაცია ბლოკზე:
/* ელემენტი, რომელზეც გამოვიყენებთ ანიმაციას. */ div ( ანიმაციის სახელი: გადაადგილება; ანიმაციის ხანგრძლივობა: 1 წმ; ანიმაცია-დროის ფუნქცია: ease-in-out; ანიმაცია-დაყოვნება: 0.5 წმ; ანიმაცია-გამეორების რაოდენობა: 2; ანიმაცია-მიმართულება: ალტერნატიული; - moz-animation-name: -moz-animation-duration: 1s -moz-animation-function: ease-in-out : 2; ალტერნატიული -webkit-animation-name: -webkit-animation-duration: delay: 0.5s -webkit-animation-count: 2 -webkit-animation-direction: ალტერნატიული; */ @keyframes გადაადგილება (-დან ( ტრანსფორმაცია: translateX(0); ) to ( ტრანსფორმაცია: translateX(100px); ) ) @-moz-keyframes გადაადგილება (-დან ( -moz-transform: translateX(0); ) -ზე ( - moz-transform: translateX(100px) ) @-webkit-keyframes გადაადგილება (-დან -webkit-transform: translateX(0); ) to ( -webkit-transform: translateX(100px); ) )
ჩვენ შეგვიძლია გამოვიყენოთ სტენოგრამა ყველა ანიმაციის თვისების ერთდროულად დასაყენებლად:
div ( ანიმაცია: გადაადგილება 1s ease-in-out 0.5s 2 ალტერნატიული; -moz-ანიმაცია: გადაადგილება 1s ease-in-out 0.5s 2 ალტერნატიული; -webkit-ანიმაცია: გადაადგილება 1s ease-in-out 0.5s 2 ალტერნატიული; )
/* ანიმაცია 0%-დან 100%-მდე */ @keyframes move ( 0% ( transform: translateX(0); ) 100% ( transform: translateX(100px); ) ) /* ანიმაცია შუალედური ჩარჩოთი */ @keyframes move ( 0% ( ტრანსფორმაცია: translateX(0); ) 50% ( ტრანსფორმაცია: translateX(20px); ) 100% (translate: translateX(100px); ) )
W3C-ს აქვს ბევრი სასარგებლო და დეტალური ინფორმაცია "CSS3 ანიმაციის" შესახებ.
ჩვენი სლაიდერის ძირითადი სტრუქტურა ახლა, როდესაც ჩვენ ვიცით, როგორ მუშაობს გადასვლები და ანიმაციები, მოდით შევხედოთ როგორ შევქმნათ ჩვენი სლაიდერი მხოლოდ CSS3-ის გამოყენებით. ეს ესკიზი აჩვენებს, თუ როგორ უნდა იმუშაოს ანიმაცია:
როგორც ხედავთ, სლაიდერი იქნება კონტეინერი, რომელშიც გამოსახულებები იქნება ნაჩვენები.
ანიმაცია ძალიან მარტივია: სურათი მიჰყვება მოცემულ მიმართულებას, ცვლის "top", "z-index" და "opacity" თვისებებს.
მოდით გადავიდეთ პირდაპირ HTML მარკირებაში სლაიდერის შესაქმნელად.
-
პუმა -
ლომები -
სნოუოკერი -
ყვირილი -
მზის აბაზანების მიღება
Div id = "სლაიდერი"
ეს არის მთავარი სლაიდერის კონტეინერი. მას არ აქვს კონკრეტული ფუნქცია, მაგრამ ჩვენ გვჭირდება ანიმაციის დასაპაუზებლად.
Div id = "ნიღაბი"
ჩვენ გამოვიყენებთ ამ ბლოკს ყველაფრის დასამალად, რაც ხდება სლაიდერის გარეთ. ამას გარდა, ნიღაბი საშუალებას გვაძლევს გამოვაჩინოთ სლაიდერის შინაარსი.
Li id = "პირველი" კლასი = "პირველი ანიმაცია"
სიის თითოეულ ელემენტს აქვს ID და კლასი. ID აჩვენებს ინსტრუმენტს და კლასი მიბმულია ანიმაციასთან, რომელიც უნდა მოხდეს.
Div class="tooltip"
ეს ბლოკი აჩვენებს სურათის სათაურს. თქვენ შეგიძლიათ შეცვალოთ ის თქვენი საჭიროებიდან გამომდინარე, მაგალითად, დააწკაპუნოთ ან დაამატოთ მოკლე აღწერა.
Div class = პროგრესის ზოლი
ეს ბლოკი შეიცავს ფუნქციას, რომელიც აჩვენებს ანიმაციის პროგრესს.
ახლა დროა CSS ფაილის გენერირება.
3. CSS სტილები შევქმნათ სლაიდერის ძირითადი სტრუქტურა. ეს იქნება სურათის იგივე ზომა. border თვისება სასარგებლო იქნება გამოსახულების გარშემო საზღვრის შესაქმნელად./* სლაიდერის სტრუქტურა */ #სლაიდერი ( ფონი: #000; საზღვარი: 5px მყარი #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); სიმაღლე: 320px; სიგანე: 680px; ზღვარი: 40px ავტომატური 0;
"ნიღბის" კლასი დამალავს ყველა ელემენტს, რომელიც მდებარეობს სლაიდერის გარეთ. მისი სიმაღლე უნდა იყოს სლაიდერის სიმაღლის ტოლი.
/* ყველაფრის დამალვა სლაიდერის გარეთ */ #mask ( overflow: დამალული; სიმაღლე: 320px; )
და ბოლოს, სურათების სიის დასალაგებლად, ჩვენ გამოვიყენებთ "პოზიცია: აბსოლუტური" და "ტოპ: -325 პიქსელი", რათა ყველა სურათი განლაგდეს სლაიდერის გარეთ.
/* სურათების სია */ #slider ul ( ზღვარი: 0; padding: 0; პოზიცია: შედარებითი; ) #slider li ( სიგანე: 680px; /* სურათის სიგანე */ სიმაღლე: 320px; /* სურათის სიმაღლე */ პოზიცია: აბსოლუტური ; ზედა: -325px /* საწყისი პოზიცია (სლაიდერის გარეთ) */ list-style: none )
კოდის ამ რამდენიმე ხაზით ჩვენ შევქმენით სლაიდერის მარკირება. ახლა ჩვენ უბრალოდ უნდა დავამატოთ ანიმაცია.
4. CSS3 Keyframe Animation
სანამ ანიმაციას დავიწყებთ, უნდა განვსაზღვროთ რამდენიმე პარამეტრი, რომ ანიმაცია სწორად მივიღოთ.
როგორც ვიცით, ანიმაციის საერთო ხანგრძლივობა იქნება 25 წამი, მაგრამ უნდა ვიცოდეთ რამდენი საკვანძო კადრი იქნება 1 წამში.
მოდით გადავჭრათ ოპერაციების სერია, რომელიც მოგვცემს საკვანძო კადრების ზუსტ რაოდენობას და ანიმაციის მთლიან ხანგრძლივობას. აქ არის გამოთვლები:
ჩვენ განვსაზღვრავთ სურათების საერთო რაოდენობას სლაიდერში: 5;
ჩვენ განვსაზღვრავთ ანიმაციის ხანგრძლივობას თითოეული სურათისთვის: 5 წამი;
ანიმაციის საერთო ხანგრძლივობას ვადგენთ სურათების საერთო რაოდენობის თითოეულის ხანგრძლივობაზე გამრავლებით: 5 სურათი × 5 წამი = 25 წამი;
ჩვენ ვიანგარიშებთ რამდენი საკვანძო ჩარჩო (პროცენტი) იქნება ერთ წამში.
საკვანძო კადრების ჯამური რაოდენობა გაყავით ანიმაციის სრულ ხანგრძლივობაზე: 100%/25 = 4%,
ერთ წამში არის 4 საკვანძო კადრი, ანუ 1 წამი უდრის ანიმაციის 4%-ს.
მთელი ამ მათემატიკის შესრულებით, ახლა ჩვენ შეგვიძლია გამოვიყენოთ CSS ანიმაცია სლაიდერზე. ჩვენ შეგვიძლია ჩავდოთ ანიმაცია უსასრულო მარყუჟში, რადგან... თითოეული სურათისთვის დაყენდება ცალკე ანიმაცია, სხვა სურათებისგან დამოუკიდებლად.
#slider li.firstanimation ( ანიმაცია: ციკლი 25s წრფივი უსასრულო; ) #slider li.secondanimation ( ანიმაცია: cycletwo 25s linear infinite; ) #slider li.thirdanimation ( ანიმაცია: ციკლი სამი 25s წრფივი უსასრულო; .:imation. cyclefour 25s linear infinite ) #slider li.fifthanimation (ანიმაცია: cyclefive 25s linear infinite; )
ანიმაციის თვისებების მინიჭების შემდეგ, ჩვენ უნდა გამოვიყენოთ საკვანძო კადრები ანიმაციის გასააქტიურებლად.
ამ პრინციპის დაცვით, ჩვენ შეგვიძლია დავაკავშიროთ ყველა ანიმაცია ერთმანეთთან, თუნდაც ისინი ერთმანეთისგან დამოუკიდებელი იყოს. ეს მოგვცემს უსასრულო მარყუჟს.
მე დავამატე "გაუმჭვირვალობა" და "z-index" თვისებები, რათა ერთი სურათიდან მეორეზე გადასვლა უფრო მიმზიდველი ყოფილიყო.
როგორც კოდში ხედავთ, პირველ ანიმაციას უფრო მეტი საკვანძო ჩარჩო აქვს ვიდრე სხვებს. ამის მიზეზი ის არის, რომ როდესაც სლაიდერი გაშვებულია, პირველი სურათი ტოვებს ადგილს მეორესთვის, მაგრამ როდესაც ბოლო სურათი დაასრულებს ანიმაციას, პირველ სურათს უნდა ჰქონდეს დამატებითი საკვანძო ჩარჩოები, რათა თავიდან აიცილოს შეფერხებები ანიმაციის მარყუჟებს შორის.
აქ არის ყველა კოდი ანიმაციისთვის:
/* ანიმაცია */ @keyframes ციკლი ( 0% ( ზევით: 0px; ) /* როდესაც სლაიდერი იწყება, პირველი სურათი უკვე ჩანს */ 4% ( ზევით: 0px; ) /* საწყისი პოზიცია */ 16% ( ზედა : 0px; /* 16%-დან 20%-მდე (1 წამი) გამოსახულების გამომავალი */ 21% ( ზედა: -325 პიქსელი; გამჭვირვალობა: 0; z-ინდექსი: -1; ) /* დაუბრუნდით საწყის პოზიციას ნიღბის გარეთ */ 92 % ( ზედა: -325 პიქსელი; გამჭვირვალობა: 0; z-ინდექსი: 0; ) 96% ( ზედა: -325 პიქს; გამჭვირვალობა: 0; ) /* 96%-დან 100%-მდე (1 წამი) – შეყვანა */ 100%( ზევით: 0px; * მოძრაობის დაწყება 16% * / 20% ( ზევით: 0 px; გამჭვირვალობა: 1; ) 24% ( ზედა: 0 px; გამჭვირვალობა: 1; ) /* 20% -დან 24% -მდე (1 წამში) - შეყვანა */ 36% ( ზედა: 0px; გაუმჭვირვალობა: 1; z-ინდექსი: 0; ) /* 24%-დან 36%-მდე (3 წამი) სურათი ჩანს */ 40% ( ზედა: 325px; გამჭვირვალობა: 0; z-ინდექსი : 0 ) /* 36% -დან 40% -მდე (1 წამი) - გასვლა */ 41% ( ზევით: -325px; გამჭვირვალობა: 0; z-ინდექსი: -1; ) /* დაბრუნება თავდაპირველ პოზიციაზე */ 100%( ზედა: -325 პიქსელი; გამჭვირვალობა: 0; z-ინდექსი: -1; ) ) @keyframes cyclethree ( 0% ( ზედა: -325px; გამჭვირვალობა: 0; ) 36% ( ზედა: -325 px; გაუმჭვირვალობა: 0; z-ინდექსი: 0; -1; ზედა: 0px; გაუმჭვირვალობა: 1; -325 პიქსელი: 0; z-ინდექსი: -1; 0; ) 76% ( ზევით: -325 px; გაუმჭვირვალობა: 0; ) 80% ( ზედა: 0px; გაუმჭვირვალობა: 1; ) 84% (ზემოდან: 0px; გაუმჭვირვალობა: 1; ) 96% (ზემოდან: 0px; გაუმჭვირვალობა: 1 z-ინდექსი: 0) 100% (ზედა: 325 პიქსელი; გაუმჭვირვალობა: 0; )
მას შემდეგ, რაც ჩვენ შევქმნით ანიმაციას, ჩვენ უნდა დავამატოთ პროგრესის ზოლი თითოეული ანიმაციის ხანგრძლივობის საჩვენებლად.
პროგრესის ზოლის ანიმაციის პროცესი იგივეა, რაც სლაიდერისთვის. მოდით შევქმნათ თავად პროგრესის ზოლი:
/* პროგრესის ზოლი */ .პროგრესი-ზოლი (პოზიცია: შედარებითი; ზედა: -5 პიქსელი; სიგანე: 680 პიქსელი; სიმაღლე: 5 პიქსელი; ფონი: #000; ანიმაცია: სრული გაფართოება 25 წმ სიმარტივე უსასრულო; )
ნუ შეგეშინდებათ სინტაქსის. არსებობს იგივე ფუნქცია, რაც "დან მდე". თქვენ ხედავთ, რომ საკვანძო ჩარჩოები ადგენენ თითოეული სურათის გარეგნობას და გაქრობას.
/* ანიმაციის სტატუსის ზოლი */ @keyframes fullexpand ( /* ანიმაცია სტაციონარულია ამ საკვანძო კადრებში */ 0%, 20%, 40%, 60%, 80%, 100% (სიგანე: 0%; გამჭვირვალობა: 0; ) / * მათში - ცოცხლდება */ 4%, 24%, 44%, 64%, 84% ( სიგანე: 0%; გამჭვირვალობა: 0.3; ) /* მათში - შეუფერხებლად ივსება */ 16%, 36 %, 56%, 76%, 96% ( სიგანე: 100%; გამჭვირვალობა: 0.7; ) /* ამ საკვანძო კადრებში პროგრესის ზოლმა დაასრულა თავისი გზა */ 17%, 37%, 57%, 77%, 97% ( სიგანე: 100% გაუმჭვირვალობა: 0.3 ) /* ამ საკვანძო კადრებზე გაქრება და შემდეგ განახლდება ციკლი */ 18%, 38%, 58%, 98% (სიგანე: 100%; გაუმჭვირვალობა: 0; ))
სლაიდერი მეტ-ნაკლებად დასრულებულია. მოდით დავამატოთ რამდენიმე დეტალი, რათა ის უფრო ფუნქციონალური იყოს. ჩვენ ჩავსვამთ ინსტრუმენტების რჩევებს გამოსახულების სათაურებისთვის, რომლებიც ხილული იქნება გადასვლისას.
ინსტრუმენტების სტილები:
#slider .tooltip (ფონი: rgba(0,0,0,0.7); სიგანე: 300px; სიმაღლე: 60px; პოზიცია: შედარებითი; ქვედა: 75px; მარცხნივ: -320px; ) #slider .tooltip h1 ( ფერი: #fff font-size: 24px;
აქ ჩვენ მხოლოდ სურათების სათაურები გავხადეთ ხილული, მაგრამ თქვენ შეგიძლიათ იგივე გააკეთოთ ნებისმიერი ტექსტისთვის, ბმულისთვის ან ნებისმიერი სხვასთვის, რაც გსურთ.
7. CSS3 გადასვლები
ჩვენ ვნახეთ, როგორ გამოვიყენოთ CSS3 გადასვლები ელემენტებზე, ახლა მოდით გავაკეთოთ ისინი ინსტრუმენტებისთვის.
თუ გახსოვთ, ჩვენ დავამატეთ ID თითოეულ სიას ("პირველი", "მეორე" და ა.შ.) ისე, რომ გადაადგილებისას, თითოეული ინსტრუმენტი ასოცირდება ცალკეულ სურათთან, ყველა ინსტრუმენტის მინიშნება ერთდროულად არ გამოჩნდეს.
#slider .tooltip ( … გარდამავალი: ყველა 0.3s ease-in-out; ) #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip ( მარცხნივ: 0px; )
8. პაუზა და გადატვირთეთ
იმისათვის, რომ მომხმარებლებმა შეაჩერონ სლაიდერი კონტენტის სანახავად, ჩვენ უნდა გავაჩეროთ ანიმაცია ჰოვერზე. ჩვენ ასევე მოგვიწევს პროგრესის ზოლის ანიმაციის შეჩერება.
#slider: hover li, #slider: hover .progress-bar (ანიმაცია-თამაშის მდგომარეობა: შეჩერებულია; )
9. დემონსტრაცია საბოლოოდ მივედით გაკვეთილის ბოლოს. სლაიდერი ახლა 100% მზადაა!(). ის მუშაობს Firefox 5+, Safari 4+ და Google Chrome-ში, ასევე iPhone-სა და iPad-ში. თქვენ ასევე შეგიძლიათ ჩამოტვირთოთ არქივი ().
მადლობა მასიმო რიგის სურათებისთვის.10. დასკვნა ეფექტი შთამბეჭდავია, მაგრამ, რა თქმა უნდა, ეს სლაიდერი არ არის ძალიან მრავალმხრივი. მაგალითად, მეტი სურათის დასამატებლად, თქვენ უნდა შეცვალოთ ყველა ძირითადი ჩარჩო. CSS3-ს აქვს დიდი პოტენციალი, მაგრამ მას აქვს თავისი საზღვრები და ზოგჯერ JavaScript სასურველია, სამიზნე აუდიტორიის მიხედვით.
ამ სლაიდერს აქვს რამდენიმე მაგარი ფუნქცია, როგორიცაა პაუზა (ჰოვერზე) და უნიკალური გამოსახულების ბმულები, რომლებიც მომხმარებლებს საშუალებას აძლევს ურთიერთქმედონ სლაიდერთან. თუ საჭიროა სრული მხარდაჭერა ყველა ბრაუზერში, მაშინ CSS3-ის გამოყენება შეუძლებელია, ამიტომ რეკომენდირებულია JavaScript. სამწუხაროდ, CSS3 ანიმაციას ბევრი შეზღუდვა აქვს. ამ დროისთვის, მოქნილობის ნაკლებობის გამო, ჩვენ ვერ ვახერხებთ მის ფართო გამოყენებას. იმედი მაქვს, რომ ეს სტატია მოგცემთ წახალისებას CSS3-ის შემდგომი შესწავლისთვის.
თავისუფლად გაგვიზიარეთ თქვენი მოსაზრებები კომენტარებში.
მთარგმნელისგან:
თარგმანის შეცდომის აღმოჩენის შემთხვევაში, გთხოვთ, გააუქმოთ გამოწერა პირად შეტყობინებებში. გმადლობთ.
ტეგები:
- CSS3
- სლაიდშოუ
- თარგმანი
- სახელმძღვანელო
CSS3-ის წყალობით ჩვენ შეგვიძლია შევქმნათ ანიმაციური ეფექტები JavaScript-ის გამოყენების გარეშე, რაც ბევრ დეველოპერს გაუადვილებს მუშაობას.
ჩვენ არ უნდა გამოვიყენოთ ზედმეტად CSS3, რადგან ძველი ბრაუზერები არ უჭერენ მხარს მის ყველა თვისებას. ყოველ შემთხვევაში, ჩვენ ყველანი ვხედავთ CSS3-ის პოტენციალს და ამ სტატიაში განვიხილავთ, თუ როგორ შევქმნათ მარყუჟის გამოსახულების სლაიდერი მხოლოდ CSS3 ანიმაციის გამოყენებით.
CSS3 გადასვლებთან და საკვანძო კადრების ანიმაციასთან დაკავშირებული ძირითადი ცნებების აღწერა.
HTML მარკირების შექმნა გამოსახულების სლაიდერისთვის.
შექმენით სტილის ფურცელი სლაიდერის ჩვენებისთვის.
ანიმაციის დამატება სლაიდერში. ჩვენ განვიხილავთ აქ მიმდინარე პროცესებს.
პროგრესის ზოლის დამატება ჩვენი სლაიდერისთვის.
სათაურების საჩვენებლად მინიშნების დამატება.
აჩვენეთ ინსტრუმენტების მინიშნება სვლისას CSS3 გადასვლების გამოყენებით
მოდით ვაჩვენოთ სლაიდერი მოქმედებაში.
საბოლოო აზრები.
ამ გაკვეთილის გამოსაყენებლად, თქვენ უნდა გქონდეთ ძირითადი გაგება CSS-ის, კონკრეტულად CSS3 გადასვლებისა და საკვანძო კადრების ანიმაციების შესახებ.
ამ მარტივი ცნებებით, ჩვენ ვნახავთ, როგორ შევქმნათ ფუნქციური გამოსახულების სლაიდერი.
ჩვენ შეგვიძლია გამოვიყენოთ ოთხი გარდამავალი თვისება:
გარდამავალი-საკუთრება
განსაზღვრავს CSS თვისებების სახელ(ებ)ს, რომლებზეც უნდა იყოს გამოყენებული გადასვლები.
გადასვლა-ხანგრძლივობა
განსაზღვრავს დროს, რომლის განმავლობაშიც უნდა მოხდეს გადასვლა.
გადასვლა-დროის ფუნქცია
განსაზღვრავს, თუ როგორ გამოითვლება შუალედური გარდამავალი მნიშვნელობები.
გადასვლა-დაყოვნება
განსაზღვრავს, როდის ხდება გადასვლა.
ამჟამად, CSS3 გადასვლები მხარდაჭერილია Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ და IE 10. ვინაიდან ტექნოლოგია ჯერ კიდევ შედარებით ახალია, საჭიროა ბრაუზერის პრეფიქსები. სინტაქსი ყველა ბრაუზერისთვის ერთნაირია, გარდა საჭირო პრეფიქსების დამატებისა. ჩვენ გამოვტოვებთ მათ ამ სტატიაში, მაგრამ არ დაგავიწყდეთ პრეფიქსების ჩართვა კოდში.
ვნახოთ, როგორ გამოვიყენოთ მარტივი გადასვლა ბმულზე:
a (ფერი: #000; გადასვლის თვისება: ფერი; გადასვლის ხანგრძლივობა: 0,7 წმ; გადასვლის დრო-ფუნქცია: მარტივია; გადასვლის დაყოვნება: 0,3 წმ; ) a:hover (ფერი: #fff; )
ელემენტისთვის ანიმაციის მინიჭებისას ასევე შეგიძლიათ გამოიყენოთ სტენოგრამის ფორმა:
a (ფერი: #000; გარდამავალი: ფერი 0.7 წმ მარტივია 0.3 წმ; ) a:ჰოვერი (ფერი: #fff; )
CSS გადასვლებისგან განსხვავებით, keyframe ანიმაციები ამჟამად მხარდაჭერილია მხოლოდ WebKit ბრაუზერებში, Firefox და მალე IE 10. მხარდაუჭერელი ბრაუზერები უბრალოდ უგულებელყოფენ ანიმაციის კოდს.
ანიმაციის თვისებას აქვს რვა ქვეთვისება:
ანიმაცია-დაყოვნება
განსაზღვრავს როდის იწყება ანიმაცია.
ანიმაცია- მიმართულება
ადგენს, უნდა ითამაშოს თუ არა ანიმაცია უკუღმა ალტერნატიულ მარყუჟებში.
ანიმაცია-ხანგრძლივობა
განსაზღვრავს დროის ხანგრძლივობას, რომელსაც ანიმაცია სჭირდება ერთი ციკლის დასასრულებლად.
ანიმაცია-გამეორება-თვლა
განსაზღვრავს ანიმაციის ციკლების რაოდენობას გაჩერებამდე.
ანიმაცია-სახელი
განსაზღვრავს წესის სახელს @keyframes-ში.
ანიმაცია-თამაში-მდგომარეობა
ადგენს ანიმაციის დაკვრას თუ შეჩერებას.
ანიმაციის შევსების რეჟიმი
განსაზღვრავს, თუ როგორ უნდა გამოიყენოს CSS ანიმაციამ სტილები მის სამიზნეზე შესრულებამდე და შესრულების შემდეგ.
ვნახოთ, როგორ გამოვიყენოთ მარტივი ანიმაცია ბლოკზე:
/* ელემენტი, რომელზეც გამოვიყენებთ ანიმაციას. */ div ( ანიმაციის სახელი: გადაადგილება; ანიმაციის ხანგრძლივობა: 1 წმ; ანიმაცია-დროის ფუნქცია: ease-in-out; ანიმაცია-დაყოვნება: 0.5 წმ; ანიმაცია-გამეორების რაოდენობა: 2; ანიმაცია-მიმართულება: ალტერნატიული; - moz-animation-name: -moz-animation-duration: 1s -moz-animation-function: ease-in-out : 2; ალტერნატიული -webkit-animation-name: -webkit-animation-duration: delay: 0.5s -webkit-animation-count: 2 -webkit-animation-direction: ალტერნატიული; */ @keyframes გადაადგილება (-დან ( ტრანსფორმაცია: translateX(0); ) to ( ტრანსფორმაცია: translateX(100px); ) ) @-moz-keyframes გადაადგილება (-დან ( -moz-transform: translateX(0); ) -ზე ( - moz-transform: translateX(100px) ) @-webkit-keyframes გადაადგილება (-დან -webkit-transform: translateX(0); ) to ( -webkit-transform: translateX(100px); ) )
ჩვენ შეგვიძლია გამოვიყენოთ სტენოგრამა ყველა ანიმაციის თვისების ერთდროულად დასაყენებლად:
div ( ანიმაცია: გადაადგილება 1s ease-in-out 0.5s 2 ალტერნატიული; -moz-ანიმაცია: გადაადგილება 1s ease-in-out 0.5s 2 ალტერნატიული; -webkit-ანიმაცია: გადაადგილება 1s ease-in-out 0.5s 2 ალტერნატიული; )
/* ანიმაცია 0%-დან 100%-მდე */ @keyframes move ( 0% ( transform: translateX(0); ) 100% ( transform: translateX(100px); ) ) /* ანიმაცია შუალედური ჩარჩოთი */ @keyframes move ( 0% ( ტრანსფორმაცია: translateX(0); ) 50% ( ტრანსფორმაცია: translateX(20px); ) 100% (translate: translateX(100px); ) )
W3C-ს აქვს ბევრი სასარგებლო და დეტალური ინფორმაცია "CSS3 ანიმაციის" შესახებ.
ჩვენი სლაიდერის ძირითადი სტრუქტურა ახლა, როდესაც ჩვენ ვიცით, როგორ მუშაობს გადასვლები და ანიმაციები, მოდით შევხედოთ როგორ შევქმნათ ჩვენი სლაიდერი მხოლოდ CSS3-ის გამოყენებით. ეს ესკიზი აჩვენებს, თუ როგორ უნდა იმუშაოს ანიმაცია:როგორც ხედავთ, სლაიდერი იქნება კონტეინერი, რომელშიც გამოსახულებები იქნება ნაჩვენები.
ანიმაცია ძალიან მარტივია: სურათი მიჰყვება მოცემულ მიმართულებას, ცვლის "top", "z-index" და "opacity" თვისებებს.
მოდით გადავიდეთ პირდაპირ HTML მარკირებაში სლაიდერის შესაქმნელად.
-
პუმა
-
ლომები
-
სნოუოკერი
-
ყვირილი
-
მზის აბაზანების მიღება
Div id = "სლაიდერი"
ეს არის მთავარი სლაიდერის კონტეინერი. მას არ აქვს კონკრეტული ფუნქცია, მაგრამ ჩვენ გვჭირდება ანიმაციის დასაპაუზებლად.
Div id = "ნიღაბი"
ჩვენ გამოვიყენებთ ამ ბლოკს ყველაფრის დასამალად, რაც ხდება სლაიდერის გარეთ. ამას გარდა, ნიღაბი საშუალებას გვაძლევს გამოვაჩინოთ სლაიდერის შინაარსი.
Li id = "პირველი" კლასი = "პირველი ანიმაცია"
სიის თითოეულ ელემენტს აქვს ID და კლასი. ID აჩვენებს ინსტრუმენტს და კლასი მიბმულია ანიმაციასთან, რომელიც უნდა მოხდეს.
Div class="tooltip"
ეს ბლოკი აჩვენებს სურათის სათაურს. თქვენ შეგიძლიათ შეცვალოთ ის თქვენი საჭიროებიდან გამომდინარე, მაგალითად, დააწკაპუნოთ ან დაამატოთ მოკლე აღწერა.
Div class = პროგრესის ზოლი
ეს ბლოკი შეიცავს ფუნქციას, რომელიც აჩვენებს ანიმაციის პროგრესს.
ახლა დროა CSS ფაილის გენერირება.
3. CSS სტილები შევქმნათ სლაიდერის ძირითადი სტრუქტურა. ეს იქნება სურათის იგივე ზომა. border თვისება სასარგებლო იქნება გამოსახულების გარშემო საზღვრის შესაქმნელად./* სლაიდერის სტრუქტურა */ #სლაიდერი ( ფონი: #000; საზღვარი: 5px მყარი #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); სიმაღლე: 320px; სიგანე: 680px; ზღვარი: 40px ავტომატური 0;
"ნიღბის" კლასი დამალავს ყველა ელემენტს, რომელიც მდებარეობს სლაიდერის გარეთ. მისი სიმაღლე უნდა იყოს სლაიდერის სიმაღლის ტოლი.
/* ყველაფრის დამალვა სლაიდერის გარეთ */ #mask ( overflow: დამალული; სიმაღლე: 320px; )
და ბოლოს, სურათების სიის დასალაგებლად, ჩვენ გამოვიყენებთ "პოზიცია: აბსოლუტური" და "ტოპ: -325 პიქსელი", რათა ყველა სურათი განლაგდეს სლაიდერის გარეთ.
/* სურათების სია */ #slider ul ( ზღვარი: 0; padding: 0; პოზიცია: შედარებითი; ) #slider li ( სიგანე: 680px; /* სურათის სიგანე */ სიმაღლე: 320px; /* სურათის სიმაღლე */ პოზიცია: აბსოლუტური ; ზედა: -325px /* საწყისი პოზიცია (სლაიდერის გარეთ) */ list-style: none )
კოდის ამ რამდენიმე ხაზით ჩვენ შევქმენით სლაიდერის მარკირება. ახლა ჩვენ უბრალოდ უნდა დავამატოთ ანიმაცია.
4. CSS3 Keyframe Animationსანამ ანიმაციას დავიწყებთ, უნდა განვსაზღვროთ რამდენიმე პარამეტრი, რომ ანიმაცია სწორად მივიღოთ.
როგორც ვიცით, ანიმაციის საერთო ხანგრძლივობა იქნება 25 წამი, მაგრამ უნდა ვიცოდეთ რამდენი საკვანძო კადრი იქნება 1 წამში.
მოდით გადავჭრათ ოპერაციების სერია, რომელიც მოგვცემს საკვანძო კადრების ზუსტ რაოდენობას და ანიმაციის მთლიან ხანგრძლივობას. აქ არის გამოთვლები:
ჩვენ განვსაზღვრავთ სურათების საერთო რაოდენობას სლაიდერში: 5;
ჩვენ განვსაზღვრავთ ანიმაციის ხანგრძლივობას თითოეული სურათისთვის: 5 წამი;
ანიმაციის საერთო ხანგრძლივობას ვადგენთ სურათების საერთო რაოდენობის თითოეულის ხანგრძლივობაზე გამრავლებით: 5 სურათი × 5 წამი = 25 წამი;
ჩვენ ვიანგარიშებთ რამდენი საკვანძო ჩარჩო (პროცენტი) იქნება ერთ წამში.
საკვანძო კადრების ჯამური რაოდენობა გაყავით ანიმაციის სრულ ხანგრძლივობაზე: 100%/25 = 4%,
ერთ წამში არის 4 საკვანძო კადრი, ანუ 1 წამი უდრის ანიმაციის 4%-ს.
მთელი ამ მათემატიკის შესრულებით, ახლა ჩვენ შეგვიძლია გამოვიყენოთ CSS ანიმაცია სლაიდერზე. ჩვენ შეგვიძლია ჩავდოთ ანიმაცია უსასრულო მარყუჟში, რადგან... თითოეული სურათისთვის დაყენდება ცალკე ანიმაცია, სხვა სურათებისგან დამოუკიდებლად.
#slider li.firstanimation ( ანიმაცია: ციკლი 25s წრფივი უსასრულო; ) #slider li.secondanimation ( ანიმაცია: cycletwo 25s linear infinite; ) #slider li.thirdanimation ( ანიმაცია: ციკლი სამი 25s წრფივი უსასრულო; .:imation. cyclefour 25s linear infinite ) #slider li.fifthanimation (ანიმაცია: cyclefive 25s linear infinite; )
ანიმაციის თვისებების მინიჭების შემდეგ, ჩვენ უნდა გამოვიყენოთ საკვანძო კადრები ანიმაციის გასააქტიურებლად.
ამ პრინციპის დაცვით, ჩვენ შეგვიძლია დავაკავშიროთ ყველა ანიმაცია ერთმანეთთან, თუნდაც ისინი ერთმანეთისგან დამოუკიდებელი იყოს. ეს მოგვცემს უსასრულო მარყუჟს.
მე დავამატე "გაუმჭვირვალობა" და "z-index" თვისებები, რათა ერთი სურათიდან მეორეზე გადასვლა უფრო მიმზიდველი ყოფილიყო.
როგორც კოდში ხედავთ, პირველ ანიმაციას უფრო მეტი საკვანძო ჩარჩო აქვს ვიდრე სხვებს. ამის მიზეზი ის არის, რომ როდესაც სლაიდერი გაშვებულია, პირველი სურათი ტოვებს ადგილს მეორესთვის, მაგრამ როდესაც ბოლო სურათი დაასრულებს ანიმაციას, პირველ სურათს უნდა ჰქონდეს დამატებითი საკვანძო ჩარჩოები, რათა თავიდან აიცილოს შეფერხებები ანიმაციის მარყუჟებს შორის.
აქ არის ყველა კოდი ანიმაციისთვის:
/* ანიმაცია */ @keyframes ციკლი ( 0% ( ზევით: 0px; ) /* როდესაც სლაიდერი იწყება, პირველი სურათი უკვე ჩანს */ 4% ( ზევით: 0px; ) /* საწყისი პოზიცია */ 16% ( ზედა : 0px; /* 16%-დან 20%-მდე (1 წამი) გამოსახულების გამომავალი */ 21% ( ზედა: -325 პიქსელი; გამჭვირვალობა: 0; z-ინდექსი: -1; ) /* დაუბრუნდით საწყის პოზიციას ნიღბის გარეთ */ 92 % ( ზედა: -325 პიქსელი; გამჭვირვალობა: 0; z-ინდექსი: 0; ) 96% ( ზედა: -325 პიქს; გამჭვირვალობა: 0; ) /* 96%-დან 100%-მდე (1 წამი) – შეყვანა */ 100%( ზევით: 0px; * მოძრაობის დაწყება 16% * / 20% ( ზევით: 0 px; გამჭვირვალობა: 1; ) 24% ( ზედა: 0 px; გამჭვირვალობა: 1; ) /* 20% -დან 24% -მდე (1 წამში) - შეყვანა */ 36% ( ზედა: 0px; გაუმჭვირვალობა: 1; z-ინდექსი: 0; ) /* 24%-დან 36%-მდე (3 წამი) სურათი ჩანს */ 40% ( ზედა: 325px; გამჭვირვალობა: 0; z-ინდექსი : 0 ) /* 36% -დან 40% -მდე (1 წამი) - გასვლა */ 41% ( ზევით: -325px; გამჭვირვალობა: 0; z-ინდექსი: -1; ) /* დაბრუნება თავდაპირველ პოზიციაზე */ 100%( ზედა: -325 პიქსელი; გამჭვირვალობა: 0; z-ინდექსი: -1; ) ) @keyframes cyclethree ( 0% ( ზედა: -325px; გამჭვირვალობა: 0; ) 36% ( ზედა: -325 px; გაუმჭვირვალობა: 0; z-ინდექსი: 0; -1; ზედა: 0px; გაუმჭვირვალობა: 1; -325 პიქსელი: 0; z-ინდექსი: -1; 0; ) 76% ( ზევით: -325 px; გაუმჭვირვალობა: 0; ) 80% ( ზედა: 0px; გაუმჭვირვალობა: 1; ) 84% (ზემოდან: 0px; გაუმჭვირვალობა: 1; ) 96% (ზემოდან: 0px; გაუმჭვირვალობა: 1 z-ინდექსი: 0) 100% (ზედა: 325 პიქსელი; გაუმჭვირვალობა: 0; )
მას შემდეგ, რაც ჩვენ შევქმნით ანიმაციას, ჩვენ უნდა დავამატოთ პროგრესის ზოლი თითოეული ანიმაციის ხანგრძლივობის საჩვენებლად.
პროგრესის ზოლის ანიმაციის პროცესი იგივეა, რაც სლაიდერისთვის. მოდით შევქმნათ თავად პროგრესის ზოლი:
/* პროგრესის ზოლი */ .პროგრესი-ზოლი (პოზიცია: შედარებითი; ზედა: -5 პიქსელი; სიგანე: 680 პიქსელი; სიმაღლე: 5 პიქსელი; ფონი: #000; ანიმაცია: სრული გაფართოება 25 წმ სიმარტივე უსასრულო; )
ნუ შეგეშინდებათ სინტაქსის. არსებობს იგივე ფუნქცია, რაც "დან მდე". თქვენ ხედავთ, რომ საკვანძო ჩარჩოები ადგენენ თითოეული სურათის გარეგნობას და გაქრობას.
/* ანიმაციის სტატუსის ზოლი */ @keyframes fullexpand ( /* ანიმაცია სტაციონარულია ამ საკვანძო კადრებში */ 0%, 20%, 40%, 60%, 80%, 100% (სიგანე: 0%; გამჭვირვალობა: 0; ) / * მათში - ცოცხლდება */ 4%, 24%, 44%, 64%, 84% ( სიგანე: 0%; გამჭვირვალობა: 0.3; ) /* მათში - შეუფერხებლად ივსება */ 16%, 36 %, 56%, 76%, 96% ( სიგანე: 100%; გამჭვირვალობა: 0.7; ) /* ამ საკვანძო კადრებში პროგრესის ზოლმა დაასრულა თავისი გზა */ 17%, 37%, 57%, 77%, 97% ( სიგანე: 100% გაუმჭვირვალობა: 0.3 ) /* ამ საკვანძო კადრებზე გაქრება და შემდეგ განახლდება ციკლი */ 18%, 38%, 58%, 98% (სიგანე: 100%; გაუმჭვირვალობა: 0; ))
სლაიდერი მეტ-ნაკლებად დასრულებულია. მოდით დავამატოთ რამდენიმე დეტალი, რათა ის უფრო ფუნქციონალური იყოს. ჩვენ ჩავსვამთ ინსტრუმენტების რჩევებს გამოსახულების სათაურებისთვის, რომლებიც ხილული იქნება გადასვლისას.
ინსტრუმენტების სტილები:
#slider .tooltip (ფონი: rgba(0,0,0,0.7); სიგანე: 300px; სიმაღლე: 60px; პოზიცია: შედარებითი; ქვედა: 75px; მარცხნივ: -320px; ) #slider .tooltip h1 ( ფერი: #fff font-size: 24px;
აქ ჩვენ მხოლოდ სურათების სათაურები გავხადეთ ხილული, მაგრამ თქვენ შეგიძლიათ იგივე გააკეთოთ ნებისმიერი ტექსტისთვის, ბმულისთვის ან ნებისმიერი სხვასთვის, რაც გსურთ.
7. CSS3 გადასვლებიჩვენ ვნახეთ, როგორ გამოვიყენოთ CSS3 გადასვლები ელემენტებზე, ახლა მოდით გავაკეთოთ ისინი ინსტრუმენტებისთვის.
თუ გახსოვთ, ჩვენ დავამატეთ ID თითოეულ სიას ("პირველი", "მეორე" და ა.შ.) ისე, რომ გადაადგილებისას, თითოეული ინსტრუმენტი ასოცირდება ცალკეულ სურათთან, ყველა ინსტრუმენტის მინიშნება ერთდროულად არ გამოჩნდეს.
#slider .tooltip ( … გარდამავალი: ყველა 0.3s ease-in-out; ) #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip ( მარცხნივ: 0px; )
8. პაუზა და გადატვირთეთიმისათვის, რომ მომხმარებლებმა შეაჩერონ სლაიდერი კონტენტის სანახავად, ჩვენ უნდა გავაჩეროთ ანიმაცია ჰოვერზე. ჩვენ ასევე მოგვიწევს პროგრესის ზოლის ანიმაციის შეჩერება.
#slider: hover li, #slider: hover .progress-bar (ანიმაცია-თამაშის მდგომარეობა: შეჩერებულია; )
9. დემონსტრაცია საბოლოოდ მივედით გაკვეთილის ბოლოს. სლაიდერი ახლა 100% მზადაა!(). ის მუშაობს Firefox 5+, Safari 4+ და Google Chrome-ში, ასევე iPhone-სა და iPad-ში. თქვენ ასევე შეგიძლიათ ჩამოტვირთოთ არქივი ().
მადლობა მასიმო რიგის სურათებისთვის.10. დასკვნა ეფექტი შთამბეჭდავია, მაგრამ, რა თქმა უნდა, ეს სლაიდერი არ არის ძალიან მრავალმხრივი. მაგალითად, მეტი სურათის დასამატებლად, თქვენ უნდა შეცვალოთ ყველა ძირითადი ჩარჩო. CSS3-ს აქვს დიდი პოტენციალი, მაგრამ მას აქვს თავისი საზღვრები და ზოგჯერ JavaScript სასურველია, სამიზნე აუდიტორიის მიხედვით.
ამ სლაიდერს აქვს რამდენიმე მაგარი ფუნქცია, როგორიცაა პაუზა (ჰოვერზე) და უნიკალური გამოსახულების ბმულები, რომლებიც მომხმარებლებს საშუალებას აძლევს ურთიერთქმედონ სლაიდერთან. თუ საჭიროა სრული მხარდაჭერა ყველა ბრაუზერში, მაშინ CSS3-ის გამოყენება შეუძლებელია, ამიტომ რეკომენდირებულია JavaScript. სამწუხაროდ, CSS3 ანიმაციას ბევრი შეზღუდვა აქვს. ამ დროისთვის, მოქნილობის ნაკლებობის გამო, ჩვენ ვერ ვახერხებთ მის ფართო გამოყენებას. იმედი მაქვს, რომ ეს სტატია მოგცემთ წახალისებას CSS3-ის შემდგომი შესწავლისთვის.
თავისუფლად გაგვიზიარეთ თქვენი მოსაზრებები კომენტარებში.
მთარგმნელისგან:
თარგმანის შეცდომის აღმოჩენის შემთხვევაში, გთხოვთ, გააუქმოთ გამოწერა პირად შეტყობინებებში. გმადლობთ.
ტეგები: ტეგების დამატება
HTML ფოტო სლაიდშოუ მარტივად შემატებს ბზინვარებას თქვენს გვერდს და მიიქცევთ როგორც ვიზიტორების, ისე საძიებო სისტემების ყურადღებას. Cincopa გთავაზობთ რამდენიმე საოცარ და სწრაფად მორგებულ სკინს, რომელიც საშუალებას მოგცემთ აჩვენოთ მრავალი ფოტო ან ვიდეო შედარებით მცირე სივრცეში და სერვერის კვოტის გამოყენების გარეშე, უფასო ჰოსტინგისა და მიწოდების წყალობით (რომლის პაკეტის განახლება შესაძლებელია საფასურით). HTML სლაიდშოუს შექმნისა და ჩასმის მთელი პროცედურა რამდენიმე წუთს იღებს და ძალიან მარტივია დასრულება, მაშინაც კი, თუ თქვენ გაქვთ ნულოვანი პროგრამირების ცოდნა.
Cincopa-ს HTML ფოტო სლაიდერი საოცრად ეფექტური, საიმედო და მიმზიდველია. ტექნიკური მოთხოვნები სრულდება ავტომატურად სლაიდშოუს შემქმნელის მიერ და ყველაფერი რაც თქვენ ნამდვილად გჭირდებათ HTML სლაიდშოუს შესაქმნელად არის უბრალოდ მაღალი ხარისხის მედია ფაილების ატვირთვა. ამ ფაილების ჩამოტვირთვა შესაძლებელია თქვენი ნებისმიერი მოწყობილობიდან ან სოციალური ქსელებიდან, როგორიცაა Facebook ან Instagram.
SKINS HTML სლაიდ შოუ Cincopa-სგან როგორ მუშაობს1 აირჩიეთ ჩვენი საოცარი სკინებიდან
2 ატვირთეთ თქვენი ფაილები ღრუბელში” Cincopa
3 მიიღეთ მარტივი კოდი და ჩასვით თქვენს ვებსაიტზე
აირჩიეთ SKIN HTML სლაიდშოუაირჩიეთ HTML მხარდაჭერილი სკინების სლაიდშოუდან და შეცვალეთ პარამეტრები, როგორიცაა მდებარეობის მართვის პანელი, მდებარეობის კონტროლი, Cooliris ხედი, შერწყმა, ავტომატური თამაში და ა.შ.; შემდეგ, დაათვალიერეთ კანი ცალკე ფანჯარაში. გადაწყვეტილების მიღებამდე აუცილებლად სცადეთ რამდენიმე სკინი.
ატვირთეთ მედია ფაილებითქვენ შეგიძლიათ ჩამოტვირთოთ იმდენი ფაილი, რამდენიც გსურთ თქვენი დესკტოპიდან, პორტატული მოწყობილობებიდან ან პირდაპირ თქვენი ვებკამერიდან, ასევე ნებისმიერი გარე ვებ წყაროდან. მოაწყეთ თქვენი ფაილები ღრუბელზე” Cincopa; Cincopa ზრუნავს თქვენი ფოტოების კონვერტაციაზე, ზომის შეცვლაზე და სხვა ადაპტაციაზე. HTML სლაიდშოუს დიზაინი მოგვიანებით შეიძლება შეიცვალოს თქვენს მფლობელობაში არსებული ნებისმიერი მოწყობილობიდან.
ჩადეთ გენერირებული კოდიCincopa-ს მარტივი ნაბიჯ-ნაბიჯ ინტერფეისი მოგთხოვთ აირჩიოთ მეთოდი; ეს ნიშნავს, რომ თუ თქვენ მართავთ HTML-ზე დაფუძნებულ საიტს, უნდა აირჩიოთ „HTML სლაიდების ჩვენება“. დააკოპირეთ აპლიკაციის მიერ გენერირებული კოდის ხაზი და ჩასვით თქვენს საიტზე სადმე.
რატომ გამოვიყენოთ Cincopa HTML სლაიდშოუს შემქმნელი?Cincopa გთავაზობთ ექსკლუზიურ, მედიით მდიდარ პროდუქტებსა და სერვისებს, რომლებიც შექმნილია HTML ვებსაიტის სლაიდერის ნებისმიერ შესაძლო მოთხოვნაზე პასუხის გასაცემად. სლაიდშოუს შემქმნელს აქვს მარტივი ნაბიჯ-ნაბიჯ ინტერფეისი, რომელიც დაგეხმარებათ შექმნისა და მართვის პროცესში, მაღალი დონის პროგრამული უზრუნველყოფის და გამოყოფილი სერვერების მეშვეობით, რომლებიც უზრუნველყოფენ საიმედო, გლუვ და სწრაფ შესრულებას და უსაფრთხოების გაფართოებულ სისტემას, რათა უზრუნველყოთ თქვენი ფაილების არსებობა. სრულიად დაცული.
Cincopa გაძლევთ საშუალებას მიიღოთ კრეატიული გადაწყვეტილებები, მაგრამ გათავისუფლებთ ყველა ტექნიკური უსიამოვნებისგან. თქვენ შეგიძლიათ ატვირთოთ შეუზღუდავი რაოდენობის ფაილები პრაქტიკულად ნებისმიერი წყაროდან და აჩვენოთ HTML სლაიდების ჩვენება ნებისმიერ საიტსა და სოციალურ არხზე.
HTML სლაიდშოუს ძირითადი მახასიათებლები: