CSS3- ის განვითარებით, შრომისმოყვარეობით იზრდება exponentially. უფრო და უფრო ფუნქციონალური შეიძლება განხორციელდეს "სუფთა" CSS- ზე. ეს პოსტი გვიჩვენებს განვითარების პროცესს. ინტერაქტიული ციკლური სლაიდერი ერთი ხაზის გარეშე JavaScript გარეშე. ავტომატური როტაცია, შერჩევა ნებისმიერი slide ერთად გლუვი გარდამავალი - "სუფთა" CSS- ზე. მაგალითი მოქმედებაში
Ზოგადი ინფორმაცია.
სტანდარტები და პრეფიქსები
თვისებები გარდამავალი, ანიმაცია და გარდაქმნა დიდი ხანია განხორციელდა ერთ ან მეორეში, რომელიც განხორციელდა ყველა პოპულარულ ბრაუზერში. 2012 წლის 6 ივნისს W3C- მა განაცხადა, რომ CSS- ის ეს ნაწილი 3.0 განვითარებული სტანდარტი მკვეთრად არ შეიცვლება და დღეს ყველა ბრაუზერის განხორციელება რეკომენდირებულია.წინა ბოლო დეველოპერებისთვის, ეს იმას ნიშნავს, რომ სტანდარტის გამოჩენა, რომელსაც შეუძლია დაეყრდნოთ. ახლა არ არის აუცილებელი, რომ მომავალში ნებისმიერი ბრაუზერი უარს იტყვის მისი პრეფიქსით არასტანდარტული თვისებებით - რადგან ეს იქნება სტანდარტული ქონების დუბლირებული და საჭიროების შემთხვევაში.
მოძველებული ინტერნეტ ვერსია Explorer, რომელიც მალე მე -9 ვერსიას მიეკუთვნება, არ არის გარდამავალი, ანიმაცია და გარდაქმნას ნებისმიერი გზა. მაგრამ მათი წილი კვლავ აღემატება 10% -ს. IE7-9 სთავაზობს JS- "დანამატს" და სლაიდებს შორის გლუვი გადართვის ეფექტი არაფერია.
რატომ CSS, არა JS?
არსებობს ბევრი ამოცანა, რომელიც შეიძლება გადაწყდეს, როდესაც cSS დახმარება: ინტერაქტიული გალერეები, მრავალ დონის ჩამოსაშლელი მენიუები, სამგანზომილებიანი დიაგრამების მშენებლობა და ანიმაცია ... რატომ იყენებთ CSS- ს, როდესაც თქვენ შეგიძლიათ ყველაფერი გააკეთოთ JS- ზე, განსაკუთრებით იმის გათვალისწინებით, რომ მზა განვითარებული მოვლენების მასა? ძირითადი არგუმენტები შეიძლება იყოს: - Უმეტეს შემთხვევაში, CSS ეფექტები მუშაობა უფრო სწრაფად, რადგან მათ მოჰყვება მათი ბრაუზერები ექსკლუზიურად. ეს განსაკუთრებით კარგად არის შესამჩნევი მობილური მოწყობილობებზე.
- ამოცანების განხორციელება, თქვენ არ გჭირდებათ ცოდნა JS და ზოგადად ნებისმიერი პროგრამირების ენებზე. რედაქტირება CSS, როგორც წესი, ასევე ხელმისაწვდომია ჩვეულებრივი მომხმარებლისთვის. და "მომხიბლავი შეშა" CSS ბევრად უფრო რთულია, ვიდრე JS.
Გაყიდვების
ბოული
ასე რომ, მეთოდოლოგიის ბლოკის ელემენტის მოდიფიკატორი (BEM) გამოიყენება CSS კლასების დასახელებისთვის. ქვედა ხაზი არის ის, რომ განლაგება ეფუძნება დამოუკიდებელი ბლოკების გვერდის განლაგებას. BEM- ის მონაცემებით, ბლოკს შეიძლება ჰქონდეს ელემენტები, მაგრამ მხოლოდ ბლოკის შიგნით.სლაიდერი კლასები:
.Slider / * ბლოკი შემცველი გამოსახულება ფირზე * / .slider__Radio / * რადიო Point * / .Slider__Tem / * Slide * /. * ასოცირებული სლაიდის ჩართვის ღილაკი * / .Slider__Number- ის შემდეგ / * ჩართულია მხარდაჭერილი IE7 და IE8, რომელიც არ უჭერს მხარს ფსევდო-ელემენტებს: შემდეგ და შემდეგ, შესაბამისად * /. სლაიდები x * /
გაცოცხლება
ანიმაციური თანმიმდევრობა ძირითადი პერსონალისთვის სამი სლაიდებისათვის გამოიყურება:@ MakeFrames Slider__Item-Autoplay_count_3 (0% (Opacity: 0;) 10% (Opacity: 1;) 33% (Opacity: 1;) 43% (Opacity: 0;) 100% (Opacity: 0;))
სლაიდერის განხორციელების ფუნქცია ის არის, რომ ყველა სლაიდები და ყველა ღილაკი ენიჭება იგივე ანიმაციას:
slider_count_3. ;
ეს მიდგომა საშუალებას გაძლევთ სერიოზულად შეამციროთ კოდი, რადგან ყველა ანიმაციას ჯერ კიდევ აქვს დუბლიკატი მათ პრეფიქსით ვერსიები (@-WebKit-keyframes, @ -moz-keyframes და @ -o-keyframes), და თითოეული ასეთი "დასტის" წესები უნდა აღინიშნოს ცალკე სლაიდების რაოდენობის მიხედვით (მომხმარებელს). თუ თქვენ ასევე ცალკე აღწერეთ ანიმაცია თითოეული სლაიდისთვის, კოდის მოცულობა შეიძლება ათეულობით კილობიტი იყოს.
ამის თავიდან ასაცილებლად, მაგრამ თანმიმდევრულად ყველა სლაიდები და ღილაკები ერთი ანიმაციის გამოყენებით, საკმარისია ანიმაციის დაწყებისას თითოეული წყვილის Slide + ღილაკზე:
.Slider__Item: მეცხრე ტიპის (2), .slider__number: მე -4 ტიპის (2)\u003e. ანიმაცია-დაგვიანებით: 5s; ანიმაცია-დაგვიანებით: 5s;) .Slider__Item: მე -3 ტიპის (3), .Slider__Number: მე -3 ტიპის (3)\u003e .Slider__number- ის შემდეგ (-MOZ-Animation-Delay: 10s ; -Webkit-Animation-Delay-Delay: 10s;-ანიმაცია-დაგვიანებით: 10s; ანიმაცია-დაგვიანებით: 10s;) ...
პირველი წყვილი, ნაგულისხმევი მნიშვნელობა რჩება - ნულოვანი ოფსეტური.
ასევე მნიშვნელოვანია, რომ ოფსეტური არ არის დამოკიდებული სლაიდების რაოდენობაზე და შეიძლება აღწერილი იყოს მათი მაქსიმალური თანხისთვის.
შედეგად, სლაიდებს შორის გლუვი ანიმაციური გარდამავალი გამოიყურება:
პაუზის როდესაც კურსორი
იმ შემთხვევაში, როდესაც მომხმარებელს სურს სლაიდზე ეკრანზე, მაგრამ არ სურს როტაციის გამორთვა, შეგიძლიათ გამოიყენოთ პაუზის რეჟიმი სლაიდზე:Hover: Hover .Slider__Tem, .slider: Hover .Slider__Number- ის შემდეგ (-MOZ-Animation-Play-Play-Play-Play-Play-Play-Play-Play-Play-Play-Phot: Paused; -პლეი-სახელმწიფო: შეჩერებული;)
გადართვა დააჭირეთ ღილაკს
არსებობს რამდენიმე CSS "მოვლენები" შეცვლა hTML ელემენტი. თუ ჩვენ ვსაუბრობთ მაუსის დაწკაპუნების შესახებ, მაშინ ეს არის ფსევდო-კლასის გამოჩენა: ფოკუსი: სამიზნე, ან: გადამოწმებული გვერდი ერთ-ერთ ელემენტზე. ფსევდო-კლასი: ფოკუსირება შეიძლება არა უმეტეს ერთ ელემენტზე თითო გვერდზე; ფსევდო-კლასი: სამიზნე ლიტრი ბრაუზერის ისტორია და მოითხოვს ტეგის "ა" ყოფნას; Pseudo-Class: შეამოწმეთ ახსოვს მდგომარეობა გვერდის გასვლამდე, პლუს, რადიოს აუზების შემთხვევაში, არის დისკრეტული შეცვლა, როდესაც კონკრეტული ჯგუფის მხოლოდ ერთი ელემენტი შეიძლება შეირჩეს - რა არის საჭირო..slider__Radio (Styles არჩეული რადიო Docks) .Slider__Radio: შეამოწმეთ (შერჩეული რადიოტოქტების სტილები)
ქვემოთ მოყვანილი სელექტორების 4-ში, თვითნებური ელემენტის მდგომარეობის შეცვლა (მაგალითად, სლაიდის სისუსტე) შესაძლებელია მხოლოდ რადიო ღილაკით, მეზობლების შერჩევით + და ~. მეზობლისა და მეზობლის შთამომავლების სტილის შეცვლა შეგიძლიათ, მაგრამ ნებისმიერ შემთხვევაში მეზობელი უნდა იყოს რადიოკოპრებზე.
/ * პირველი სლაიდის სტილი "არ არის შერჩეული" * / .Slider__Radio: NT-CIPLE (1) ~ .Slider__Item: მე -1 ტიპის (1) (opacity: 0.0;) / * სტილი პირველი სლაიდი სახელმწიფო "შერჩეული" * / .slider__Radio: მე -6-ის ტიპი (1): შეამოწმეთ ~ .slider__Item: მე -5 ტიპის (1) (opacity: 1.0;)
გამოიყენება გამჭვირვალე სლაიდების გადართვა, რომელიც შეიცავს სურათს. ეს უფრო მეტია უნივერსალური გზავიდრე სურათის თვისებების გადართვა, რადგან div კონტეინერში, ცარიელი img ელემენტისგან განსხვავებით, შეიძლება განთავსდეს ნებისმიერი Დამატებითი ინფორმაცია (მაგალითად, სლაიდების სახელი, ან ასოცირებული აღწერა, მათ შორის ბმულები).
სლაიდებისათვის, გარდამავალი თვისებები მიუთითებს, რომ მათ შორის გლუვი შორის გადართვა.
.Slider__Item (-MOZ-Transition: Opacity 0.2S ხაზოვანი; -WebKit-Transition: Opacity 0.2S ხაზოვანი წრფივი; -o-Transition: Opacity 0.2S ხაზოვანი ხაზოვანი; გარდამავალი 0.2s ხაზოვანი;)
როტაცია შეჩერდება სლაიდების არჩევისას
როდესაც თქვენ აირჩიეთ მომხმარებლის ნებისმიერი slide, თქვენ უნდა შეწყვიტოს ანიმაცია ყველა სლაიდები და ღილაკები. ეს არის იმის გამო, რომ რევოლუციის ანიმაციის თვისებების ღირებულებების პრიორიტეტი ყოველთვის იმავე თვისებების ყველა სხვა ღირებულებაშია (შეგიძლიათ შეუშალოს კი inline თვისებები! მნიშვნელოვანია`om).მას შემდეგ, რაც ანიმაცია, მაშინაც კი, თუ სტრუქტურა იგივეა, არსებობს ყველა სლაიდი, და აუცილებელია გამორთვა ყველა სლაიდების ანიმაცია (სხვაგვარად გლუვი გარდამავალი სამი სლაიდები მიიღებენ მონაწილეობას), ყველა რადიო არხზე უნდა განთავსდეს პირველი სლაიდამდე.
...
უფრო მეტიც, ყველა ღილაკი (რადიო ღილაკი Labels) უნდა დაჯგუფდეს ცალკე ერთეულში და განთავსებული რადიო აუზების შემდეგ, სხვაგვარად პრობლემები შეიძლება წარმოიშვას ლეიბლების საყოველთაო პოზიციებზე სლაიდების თვითნებური რაოდენობისთვის.
შეწყვიტოს ანიმაცია ყველა სლაიდები და ღილაკები, როდესაც არჩევის ნებისმიერი slide არის მითითებული შემდეგნაირად:
.Slider__Radio: შეამოწმეთ ~ .slider__Item ,.Slider__Radio: გადამოწმებული ~ .slider__number-list\u003e .slider__number- ის შემდეგ (opacity: 0.0; -მო-ანიმაცია: არა, - ანიმაცია: არა; არა;)
თვითნებური ნომერი სლაიდები
ჩადება უნივერსალური სლაიდერი ნებისმიერი რაოდენობის სლაიდები შეუძლებელია, რადგან თითოეული რიცხვი სჭირდება საკუთარი "დასტის" CSS- ის ანიმაცია. ყველა ასეთი "დასტის" (თუ აღწერილია) შეიძლება იყოს დაკავშირებული სლაიდერის ერთეულის მოდიფიკატორის მეშვეობით:.slider_count_x.
სადაც x არის სლაიდების რაოდენობა.
ძველი ბრაუზერის მხარდასაჭერად, პირველი სლაიდი არ არის ანიმაციური. ამ მიზეზით, პირველი სურათის კონტეინერი არის opacity ყოველთვის ტოლია 1.0. პრობლემაა: ორი სხვა სლაიდების გლუვი გადართვა, პირველი გადადის (ეს შეიძლება იყოს მშობლის მშობლის მშობლის ბლოკი). გადაცემის ეფექტის ამოღების მიზნით, გარდამავალი დაგვიანებით დაგვიანებულია ყველა სლაიდებისთვის, გარდა შერჩეული; შერჩეული, Z- ინდექსი დამონტაჟებულია მეტი ვინმეს:
.slider__Item (Opacity: 1.0; თანამდებობა: ნათესავი; -მოზ-გარდამავალი: Opacity 0.0S ხაზოვანი 0.2s; -გებრიტი 0.0s ხაზოვანი 0.2s; -O-Transition: Opacity 0.0S ხაზოვანი 0.2S; გარდამავალი. 0.0s ხაზოვანი 0.2s;) .Slider__Radio: მე -4 ტიპის (1): შეამოწმეთ ~ .Slider__Tem: მე -4 ტიპის (1), .slider__Radio: მე -4 ტიპის (2): შეამოწმეთ ~ .Slider__Tem: Nth-of-type (2), .slider__Radio: მე -4 ტიპის (3): შეამოწმეთ ~ .slider__Item: მე -3 ტიპის (3), .Slider__Radio: მე -4 ტიპის (4): გადამოწმებული ~. Slider__Item: მე -4 ტიპის (4), .slider__Radio: მე -5 ტიპის (5): შეამოწმეთ ~ .slider__Item: მე -5 ტიპის (-5) (-MOZ- გარდამავალი: Opacity 0.2S ხაზოვანი; -Webkit გარდამავალი : Opacity 0.2s 0.2s ხაზოვანი; -O-Transition: Opacity 0.2s ხაზოვანი; გარდამავალი: Opacity 0.2s ხაზოვანი; Z- ინდექსი: 6;)
ისე, რომ სლაიდები არ ეწინააღმდეგება სხვა ელემენტებს საიტის სხვა ელემენტებთან (მაგალითად, არ გადალახეს მენიუს მენიუს 6-ზე ნაკლები ან ტოლია), შექმნას საკუთარი კონტექსტი (კონტექსტის კონტექსტი) მინიმალურად აუცილებელია ხილვადობისთვის, Z- ინდექსი:
.Slider (Z- ინდექსი: 0;)
ისე
უკვე დღეს, პროგრამირების უნარ-ჩვევებისა და სპეციალიზებული ბიბლიოთეკების გარეშე, მისი საბოლოო სტანდარტიზაციისთვის, CSS 3.0 საშუალებას გაძლევთ კომპლექსური და საინტერესო ამოცანების განხორციელება. აღწერილი ინტერაქტიული სლაიდერი, ამჟამად, სრულად ფუნქციონირებს RuneT- ის 80% -ში. დარჩენილი მომხმარებლების უმრავლესობისთვის, კერძოდ, IE7-9 ბრაუზერის მომხმარებლებისთვის, შეგიძლიათ გამოიყენოთ JS- "დანამატი", რომელიც ახორციელებს სლაიდერის ძირითად ფუნქციებს.სამუშაო მაგალითი ჩანს
3 მარტი, 2015 წლის 18:15 საათზესაინტერესო და ამავე დროს მარტივი სლაიდერი სუფთა CSS.3
- ვებ-გვერდის განვითარება,
- CSS,
- HTML.
მე არ გავხსნი არა ამერიკას, მე არ გაოცება საზოგადოებას ახალი აქცენტით და არ გაუხსნის ტვინს, ვინც CSS3- ში, როგორც Aqualant. მე გეტყვით მარტივი გზა, რათა შეიქმნას სლაიდერი მარტივი CSS3 ფუნქციების გამოყენებით JavaScript- ის გამოყენების გარეშე.
1. ფონდის მოძრაობა
სლაიდერის განხორციელების მიზნით, ჩვენ გვჭირდება საკმაოდ მარტივი კომპლექტი ტეგები, რომელიც თავის მხრივ რეაგირებს სლაიდერის ელემენტებს.
აქ ჩვენ ვხედავთ, რომ საერთო "Wrapper" ბლოკი შეიცავს "სლაიდერს" ბლოკს 5 სლაიდებით, რომელიც შეიძლება განთავსდეს ნებისმიერი HTML კოდი, რომელიც მდებარეობს სლაიდზე. საერთო ერთეულის წინაშე, არსებობს რადიო ღილაკები, რომლებიც შემდგომში იქნება დაფარული საკუთარი სლაიდების ნავიგაციის პანელის შესაქმნელად, რომელთანაც Controls- ის დაბლოკვის ეტიკეტები დაგვეხმარება.
2. სლაიდერის გაკეთება
აქ ჩვენ შეჩერდება და განიხილავს პატარა CSS. გთხოვთ გაითვალისწინოთ, რომ ზოგიერთი თვისებები, ჯვარედინი ბრაუზერის პრეფიქსები ყველაფერს აკეთებენ თანამედროვე ბრაუზერები შეიძლება გაიგოს ისინი. * (ზღვარი: 0; padding: 0; -Webkit-box-sizing: სასაზღვრო ყუთი; -მო-ყუთი-სული: სასაზღვრო ყუთი;-ყუთი-ყუთი: სასაზღვრო ყუთი; ყუთი Sizing: სასაზღვრო ყუთი; ) სხეული (ფონის გამოსახულება: URL (http://habrastorage.org/files/996/d76/d04/996d76d0410d422FA54CC433CET2A.png);
ფონზე და გაზიარებული სტილის დიზაინით ყველაფერი ნათელია.
Wrapper (სიმაღლე: 350px; ზღვარი: 100px auto 0; პოზიცია: ნათესავი; სიგანე: 700px;) .slider (ფონის ფერი: #DDD; სიმაღლე: მემკვიდრეობა; overflow: დამალული; პოზიცია: ნათესავი; -შავდა: 0 0 20 კვ.მ. (0, 0, 0, .5); -მო-ყუთი-ჩრდილი: 0 0 20px rgba (0, 0, 0 ,.5); -o-box-shadow: 0 0 20px Rgba (0, 0, 0, .5). ყუთი- shadow: 0 0 20px rgba (0, 0, 0 ,.5);
საერთო ერთეული და ბლოკი ერთად სლაიდერი აქვს იგივე ზომები, რათა სრულყოფილად მონიტორინგი პოზიცია სლაიდერი გვერდზე. მიუხედავად იმისა, რომ არ არსებობს სლაიდები, სლაიდერი დროებით მოხატული ღია ნაცრისფერი.
Wrapper\u003e შეყვანის (ჩვენება: არა;)
რადიო ღილაკები დამალვა. მოგვიანებით დაგჭირდებათ.
შედეგი ამ მომენტში ასეთი:
3. სლაიდების გაკეთება
აქ ჩვენ გვჯერა საერთო სტილის სლაიდები და თითოეული slide ცალკე:სლაიდები: აბსოლუტური; სიგანე: მემკვიდრეობა;) .Slide1 (ფონის გამოსახულება: URL (http://habrastorage.org/Files/3F2/628/bd5/3F2628BD58C8452DB516195CB0C9BFFC9.jpg); : //habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f9807f49a14f97ba0e.jpg);) .slide3 (ფონის გამოსახულება: URL (http://habrastorage.org/files/663/6b1/ d4f /.jpg) ;) .Slide4 (ფონის გამოსახულება: URL (http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c897D84ab015C87D84B015C87 ფაილები / 53C / FF6 / C1C / 53CFF6C1CAF842368C70B8EF892D8402.jpg);
ყველა სლაიდებისთვის, ჩვენ აღვნიშნეთ აბსოლუტური პოზიცია ისე, რომ თქვენ შეგიძლიათ ითამაშოთ ეფექტი გამოჩენა. სლაიდების ზომები გადაიყვანეს სლაიდერის ზომიდან, რათა მათ არ უნდა ჰქონდეთ რამდენიმე ადგილი.
4. ჩვენ დავამზადებთ ნავიგაციას სლაიდებზე
მას შემდეგ, რაც რადიო ღილაკები იმალება და ჩვენ გვჭირდება როგორც კონცენტრატორები, ჩვენ ვამზადებთ მომზადებულ ეტიკეტებს:გადატანა .კონტროლები (მარცხნივ: 50%; მარგინი-მარცხნივ: -98px; თანამდებობა: აბსოლუტური;) .Wrapper ლეიბლი (კურსორი: მაჩვენებელი: Inline-Block; სიმაღლე: 8px; ზღვარი: 25px 12px 0 16px; პოზიცია: ნათესავი; სიგანე: 8px; -Webkit-Border-Radius: 50%; -მო-საზღვრისპირა რადიუსი: 50%;-საზღვრის რადიუსი: 50%; სასაზღვრო რადიუსი: 50%;) .wrapper ლეიბლი: შემდეგ (საზღვარი: 2px მყარი #ddddd; შინაარსი: "" ჩვენება: ბლოკი; სიმაღლე: 12px; მარცხნივ: -4px; პოზიცია: აბსოლუტური; ზედა: -4px; სიგანე: 12px; -მდე-საზღვრის რადიუსი: რადიუსი: 50%;-საზღვრის რადიუსი: 50%; სასაზღვრო რადიუსი: 50%;)
ჩვენ ნავიგაციის კლასიკას ვაკეთებთ. თითოეული ღილაკი არის წრის სახით, შიგნით, რომელიც აქტიურ სლაიდთან ერთად, ცარიელი ტერიტორია ნაწილობრივ ხატავს. იმავდროულად, ჩვენ გვაქვს შემდეგი შედეგი:
5. ჩვენ ვისწავლოთ ღილაკს დააჭირეთ
დროა, რომ სლაიდერის გასწავლა სლაიდების გადართვისთვის კონკრეტული ღილაკის დაჭერით:Wrapper Label (Cursor: Pointer; ჩვენება: Inline-Block; სიმაღლე: 8px; ზღვარი: 25px 12px 0 16px; პოზიცია: ნათესავი; სიგანე; 8px; -Webkit-border-radius: 50%; -მო-საზღვრისპირა რადიუსი ;-საზღვრისპირა რადიუსი: 50%; სასაზღვრო-რადიუსი: 50%; -Webkit-transition: ფონური მარტივად .5s; -მო-გარდამავალი: ფონური მარტივად .5- გარდამავალი: ფონური Ease-in-out-in-out .5s; გარდამავალი: ფონზე Ease-in-out .5s;) .Wrapper Label: Hover, # Slide1: შემოწმებულია ~ .კონტროლის ლეიბლი: NTH-of-type (1), # Slide2: შეამოწმეთ ~ .კონტროლის ეტიკეტი: მე -3 ტიპის (2), # Slide3: შეამოწმეთ ~ .Controls Label: NTH-of-type (3), # Slide4: შეამოწმეთ ~ .კონტროლის ლეიბლი: მე -5 ტიპის (4) # Slide5: შემოწმდა ~ .კონტროლის ლეიბლი: მე -5 ტიპის (5) (ფონის: #DDD;)
ნავიგაციის ღილაკებზე, დაამატეთ გლუვი შეღებვა მათში. ასევე დაამატეთ პირობები, სადაც აქტიური ღილაკი და ღილაკი, რომელზეც კურსორი იქნება ჩაირთვება. ჩვენი რადიო ღილაკები მზად არიან:
6. საინჟინრო სლაიდერი
კარგად, ახლა ჩვენ გავაკეთებთ ისე, რომ სლაიდები საბოლოოდ გადავიდა:სლაიდები (სიმაღლე: მემკვიდრეობა: 0; პოზიცია: აბსოლუტური; სიგანე; z-index: 0; -Webkit-transform: მასშტაბი (1.5); -მომ-ტრანსფორმაცია: მასშტაბი (1.5); (1.5); ტრანსფორმაცია: მასშტაბი (1.5); -Webkit-Transition: გარდაქმნის მარტივად .5s, opacity ease-in-out-in-out .5s; -მომ-გარდამავალი: ტრანსფორმაციის მარტივად .5s, opacity მარტივია -მომხმარებამ; -ო-გარდამავალი: ტრანსფორმაციის მარტივად .5s, opacity ease-in-out-in-out .5s; გარდამავალი: ტრანსფორმაციის მარტივად .5s, opacity ease-in-out. ) # Slide1: .slide\u003e .Slide1, # Slide2: შეამოწმეთ ~ .Slide2, # Slide3: შეამოწმეთ ~ .slide3, # Slide4: შეამოწმეთ ~ .slide4, # Slide5: გადამოწმებული ~. .slide\u003e .Slide5 (Opacity: 1; Z- ინდექსი: 1; -Webkit-Transform: მასშტაბი (1); -მომ-ტრანსფორმაცია: მასშტაბი (1); მასშტაბი (1); ტრანსფორმაცია: მასშტაბი ( ტრანსფორმაცია: მასშტაბი (ერთი);)
ჩვენ დავამატებთ თვისებებს საერთო სლაიდების სტილის, რომელშიც ყველა სლაიდები გახდება უხილავი და წავიდეთ ფონზე. ჩვენ ასევე დავამატეთ უმნიშვნელო ზრდა სლაიდებში, ხოლო ისინი უხილავია, რათა საინტერესო გამოჩენა სლაიდერში.
შედეგი შეიძლება იხილოთ აქ.
CSS sliders აქვს გარკვეული უპირატესობა sliders on JavaScript. ერთ-ერთი ასეთი უპირატესობაა ჩამოტვირთვა სიჩქარე. არა მხოლოდ გამოსახულებები sliders გამოიყენება. დიდი ზომები (თუ არ არსებობს ოპტიმიზაცია სხვადასხვა ეკრანებზე), ის ასევე იხარჯება სკრიპტებზე გარკვეული დროის განმავლობაში. მაგრამ სტატიაში თქვენ ნახავთ მხოლოდ sliders on სუფთა CSS.
ეს არის ის, რაც მე აღმოვაჩინე საიტზე სლაიდერების საგანი:
1. CSS3 სლაიდერი სურათები
სლაიდერი CSS, რომელიც იყენებს რადიო ღილაკს სლაიდების ნავიგაცია. ეს რადიო აუზები ქვეშ sliders. ასევე, რადიო აუზების გარდა, ნავიგაცია ხორციელდება მარცხენა და მარჯვენა შუტერის გამოყენებით. რა სურათის შენარჩუნება ახლა ნაჩვენებია - ფსევდო-სკოლები გამოიყენება: შემოწმებულია.
2. CSS3 სლაიდერი სურათები მინიატურებით
განსხვავებით წარსულში სლაიდერი CSS, აქ ნაცვლად რადიო აუზების ქვედა არის გამოსახულება ყველა გამოსახულება, რომელიც ასევე მოსახერხებელია, როდესაც ქმნის გამოსახულება გალერეა. სურათები შეიცვალა სახის ეფექტით: შეუფერხებლად გაქრება.
3. გალერეა CSS- ზე
მაგრამ ეს სლაიდერი CSS არის სრულყოფილი გაყიდვის გვერდებზე. როგორც წესი, ბევრი ვებ დეველოპერები განვითარების სესხების (გაყიდვის გვერდებზე) მოათავსეთ სლაიდერი ძალიან დასაწყისში ისე, რომ პირველ ეკრანზე (გარეშე სენსორული), სტუმარი დაუყოვნებლივ დაინახა ყველა სარგებელი, რომ ეს არის ამ გვერდზე. გარდა ამისა, ეს სლაიდერი ადაპტირებადია, რომელიც ასევე სასიამოვნოა.
4. CSS სლაიდერი გარეშე ბმულები
დაუყოვნებლივ მინდა შეამჩნია, რომ ეს სლაიდერი არ იყენებს ბმულებს! ჩვეულებრივ, ძირითადი გამოსახულების გარდა (სლაიდი), კიდევ 2 სლაიდები ჩანს. ისინი მთავარია. სლაიდების შეცვლა ხდება ლამაზი რეჟიმით: პირველი ორი სლაიდები გადავიდა და სლაიდი ხდება ცენტრი, რომელიც მაშინ გახდება მთავარი. შემდეგ სლაიდი იზრდება და განთავსდება დანარჩენი.
5. ადაპტური სლაიდერი CSS3- ზე
კიდევ ერთი ადაპტური სლაიდერი, რომლის კონტროლიც რადიოკოპტერებს ეფუძნება. რომ ნახოთ, თუ როგორ ეს სლაიდერი შეხედავს სხვადასხვა მოწყობილობებიah - თქვენ შეგიძლიათ დამოუკიდებლად შეცვალონ ბრაუზერის ფანჯარა, ან სლაიდერის გვერდზე არსებობს სხვადასხვა მოწყობილობების სპეციალური ხატები, დაჭერით, რომელზეც ნახავთ თქვენს კომპიუტერში, ტაბლეტზე ან სმარტფონზე.
*** ბონუს სლაიდერი ***
გარდა ამისა, ყველა sliders, რომლებიც წარმოდგენილია ზემოთ, მინდა, გთხოვთ, თქვენ სხვა. ეს სლაიდერი შესანიშნავია გამოსახულების გალერეის შესაქმნელად. სიტყვები არ ახსენით, რას აკეთებს, ასე რომ, ყველაფერი უკეთესია, რომ ყველაფერი ვიდეოში უყუროთ:
1. შესანიშნავი jQuery სლაიდშოუ
დიდი სანახაობრივი სლაიდების გამოყენებით jQuery ტექნოლოგიების გამოყენებით.
2. jQuery "მასშტაბური კარუსელი" მოდული
Scalable სლაიდების ჩვენება jQuery. თქვენ შეგიძლიათ დააყენოთ ზომები slideshows რომ თქვენ შესაფერისი.
3. jQuery plug "slidejs"
სურათების სლაიდერი ტექსტური აღწერილობით.
4. მოდული "jslidernews"
5. CSS3 JQuery Slider
როდესაც თქვენ hover კურსორი ნავიგაცია ისრებით, მრგვალი მინიატურების მომდევნო slide გამოჩნდება.
6. Cute JQuery Slider "პრეზენტაცია ციკლი"
jQuery სლაიდერი გამოსახულების დატვირთვის მაჩვენებლით. არსებობს ავტომატური სლაიდების ცვლილება.
7. JQuery Plugin "Parallax Slider"
სლაიდერი მოცულობითი ეფექტებით. ამ სლაიდერის გაშუქება ფონზე ფონზე, რომელიც შედგება რამდენიმე ფენისგან, რომელთაგან თითოეული არის სკოლიდან სხვადასხვა სიჩქარე. შედეგად, აღმოჩნდება გარსის ეფექტის იმიტაცია. ძალიან ლამაზია, შეგიძლიათ ამის შესახებ. უფრო შეუფერხებლად ეფექტი გამოჩნდება ბრაუზერებში, როგორც: ოპერის, Გუგლ ქრომი., ანუ.
8. ახალი, მსუბუქი jQuery Slider "BxSlider 3.0"
დემო გვერდზე "მაგალითები" სექციაში შეგიძლიათ იპოვოთ ბმულები ყველა შესაძლო პარამეტრები გამოიყენეთ ეს მოდული.
9. გამოსახულებების ჯვარია სლაიდერი, მოდული "Slidejs"
Stylish jquery სლაიდერი აუცილებლად შეძლებს დაამშვენებს თქვენს პროექტს.
10. JQuery მოდული სლაიდების ჩვენება "მარტივი სლაიდები" v1.1
ადვილად გამოიყენოთ jQuery მოდული, რათა შეიქმნას სლაიდების ჩვენება.
11. მოდული "JQuery Slidy"
მარტივი jquery მოდული სხვადასხვა დიზაინი. არსებობს ავტომატური სლაიდების ცვლილება.
12. JQuery CSS გალერეა ავტომატური სლაიდების ცვლილებით
თუ გარკვეული დროის განმავლობაში სტუმარი არ არის "წინ" ან "უკან" ისრები, გალერეა ავტომატურად დაიწყებს სენსორულს.
13. JQuery Slider "Nivo Slider"
ძალიან პროფესიონალური მაღალი ხარისხის სინათლის მოდული სწორი კოდი. სლაიდების ცვლილების ბევრი სხვადასხვა ეფექტი არსებობს.
14. JQuery Slider "Mobilyslider"
ახალი სლაიდერი. jQuery სლაიდერი სხვადასხვა ეფექტი გამოსახულების ცვლილება.
15. JQuery Plugin "Slider²"
მარტივი სლაიდერი ავტომატური სლაიდების ცვლილებით.
16. ახალი JavaScript სლაიდერი
სლაიდერი ავტომატური გამოსახულების ცვლა.
მოდული სლაიდების დანერგვისთვის ავტომატური სლაიდების ცვლილებით. გამოსახულების გამოსახულების გამოყენებით ეკრანის მართვა შესაძლებელია.
jquery css. გამოსახულება სლაიდერი გამოყენებით Nivoslider მოდული.
19. JQuery Slider "Jshowoff"
მოდული კონტენტის როტაცია. სამი ვარიანტი გამოყენებისათვის: ნავიგაციის გარეშე (ავტომატური ცვლა სლაიდების ფორმატში), ნავიგაციის სახით ღილაკების სახით, სურათების სახით ნავიგაცია.
20. ჩამკეტის ეფექტი პორტფელის მოდული
ახალი jQuery მოდული ფოტოგრაფი პორტფელისთვის. გალერეამ განახორციელა სურათების შეცვლის საინტერესო ეფექტი. ფოტოები ერთმანეთს შეცვლის ობიექტივის ჩამონათვალში.
21. მარტივი JavaScript CSS სლაიდერი "Tinyslider 2"
სურათების სლაიდერის განხორციელება javaScript- ის გამოყენებით და CSS.
22. Tinycircleslider Slider- ის ქარი
ელეგანტური მრგვალი სლაიდერი. სურათებს შორის ტრანსფორმაცია ხორციელდება წრის ირგვლივ, როგორც წითელ წრეში. დიდი ჯდება თქვენს საიტზე, თუ თქვენ ხართ დიზაინის გამოყენების მრგვალი ელემენტები.
23. სურათების სლაიდერი jQuery
მარტივი სლაიდერი "სლაიდერი ნაკრები". სლაიდერი წარმოდგენილია სხვადასხვა დიზაინით: ვერტიკალური და ჰორიზონტალური. ასევე განხორციელდა სხვადასხვა ტიპის ნავიგაცია სურათებს შორის: "წინ" და "უკან" ღილაკების გამოყენებით მაუსის საჭე გამოყენებით, მაუსის დაჭერით.
24. გალერეა მინიატურებით "სლაიდერი ნაკრები"
გალერეა "სლაიდერი ნაკრები". Scroll მინიატურული ხორციელდება როგორც ვერტიკალური და ჰორიზონტალური მიმართულებით. გადასვლის სურათებს შორის ხორციელდება გამოყენებით: მაუსი თვლები, მაუსის დაწკაპუნებით ან მინიატურული კურსორი.
25. JQuery Slider Kit Content Slider
ვერტიკალური და ჰორიზონტალური შინაარსის სლაიდერი jQuery.
26. JQuery Slide Show "Slider Kit"
სლაიდშოუ ავტომატური სლაიდების ცვლილებით.
27. მარტივი პროფესიული JavaScript CSS3 სლაიდერი
Neat Slider on jQuery და CSS3, შექმნილია 2011 წელს.
jQuery სლაიდშოუ მინიატურებით.
29. მარტივი jquery სლაიდშოუ
სლაიდშოუ ნავიგაციის ღილაკებით.
30. შოკირებული სლაიდშოუ jQuery "Skitter"
jQuery მოდული "Skitter" შექმნას განსაცვიფრებელი სლაიდშოუ. მოდული მხარს უჭერს 22 (!) სხვადასხვა ანიმაციური ეფექტების ხედი სურათების შეცვლისას. მას შეუძლია მუშაობა ორი სანავიგაციო ვარიანტით სლაიდებისთვის: სლაიდების ნომრებისა და მინიატურების გამოყენებით. დარწმუნდით, რომ ნახოთ დემონსტრაცია, ძალიან მაღალი ხარისხის იპოვოს. მეორადი ტექნოლოგიები: CSS, HTML, JQuery, PHP.
31. სლაიდების ჩვენება "უხერხულ"
ფუნქციური სლაიდშოუ. სლაიდების სახით შეიძლება შესრულდეს: მარტივი სურათები, სურათები ხელმოწერებით, სურათებით pop-up რჩევები, ვიდეო კლიპები. თქვენ შეგიძლიათ გამოიყენოთ ისრები, ბმულები slide ნომრები და გასაღებები მარჯვნივ / მარცხნივ კლავიატურის ნავიგაცია. სლაიდშოუ რამდენიმე ვერსიით დამზადებულია: მინიატურების და მათ გარეშე. სანახავად ყველა ვარიანტი, ფეხით გასწვრივ ბმულები Demo # 1 - დემო # 6 მდებარეობს თავზე დემო გვერდზე.
ძალიან ორიგინალური დიზაინის სლაიდერი გამოსახულება მსგავსი გულშემატკივართა. ანიმაციური სლაიდების ცვლილება. სურათებს შორის ნავიგაცია ხორციელდება ისრებით. იგი ასევე უზრუნველყოფს ავტომატური ცვლა, რომელიც შეიძლება ჩართული და off გამოყენებით პიესა / პაუზის ღილაკს მდებარეობს ზედა.
ანიმაციური jQuery სლაიდერი. ფონის სურათები ავტომატურად სკალირებას, როდესაც ბრაუზერის ფანჯარა ცვლილებები. თითოეული გამოსახულება floats ბლოკი ერთად აღწერა.
34. "Flux Slider" Slider on jQuery და CSS3
ახალი jQuery სლაიდერი. რამდენიმე მაგარი ანიმაციური ეფექტი შეცვლის სლაიდების შეცვლისას.
35. JQuery "Jswitch" მოდული
ანიმაციური jquery გალერეა.
მსუბუქი სლაიდშოუ ავტომატური სლაიდების ცვლილებით.
37. მოდულის ახალი ვერსია "Slidedeck 1.2.2"
პროფესიული შინაარსის სლაიდერი. პარამეტრები შესაძლებელია ავტომატური slide shift, ისევე როგორც ვარიანტი გამოყენებით მაუსის საჭე გადასვლის შორის სლაიდები.
38. JQuery Slider "Sudo Slider"
მარტივი გამოსახულება ცილისწამების შესახებ jQuery. ძალიან ბევრი განხორციელება პარამეტრები: ჰორიზონტალური და ვერტიკალური ცვლილებები სურათების, ბმულები სლაიდების ნომერი და მათ გარეშე, ერთად ხელმოწერების სურათები და გარეშე, სხვადასხვა ეფექტი გამოსახულების ცვლილება. ავტომატური სლაიდების ცვლილების ფუნქციაა. ბმულები ყველა სამაგალითო დანერგვისთვის შეგიძლიათ იხილოთ დემო გვერდზე.
39. JQUERY CSS3 სლაიდშოუ
სლაიდშოუ მინიატურებით მხარს უჭერს ავტომატური სლაიდების რეჟიმს.
40. JQuery "Flux Slider"
Slider ერთად მრავალჯერადი ეფექტები იმიჯი ცვლილება.
41. მარტივი jquery სლაიდერი
Stylish image სლაიდერი jQuery.
მინდა გითხრათ მარტივი გზა, რათა შეიქმნას სლაიდერი, გამოყენებით JS, CSS ანიმაციის დახმარებით.
1) დასაწყისისთვის, თქვენ დაწერებთ HTML- ს, ვარაუდობენ, რომ 4 სურათი შეიცვლება სლაიდერში.
2) შემდეგი, ჩვენ მოათავსეთ ბლოკის ზომა და კიდევ რამდენიმე პარამეტრი, პოზიცია: ნათესავი აუცილებელია ფორმატირების კონტექსტის შესაქმნელად, მაშინ ნათელი იქნება, რატომ.
სლაიდერი (სიგანე: 500px; სიმაღლე: 300px; ზღვარი: ავტო; ზღვარი: 25px; სასაზღვრო: 1px მყარი შავი; პოზიცია: ნათესავი; overflow: დამალული;)
3)
ჩვენ ასევე განსაზღვრავს გარკვეული თვისებები სლაიდების თავს:
სლაიდი (სიგანე: 500px; სიმაღლე: 300px; თანამდებობა: აბსოლუტური; ზედა: 0; მარცხნივ: 0;)
როგორც ჩანს, CSS- სგან ჩანს, სლაიდერის ზედა მარცხენა კუთხეში ყველა სლაიდს დავაკვირდებით, რითაც განსაზღვრავს იმავე წყაროს პოზიციას.
1. სლაიდი წყაროს პოზიციაზეა, აჩვენებს მომხმარებლის მიერ.
2. სლაიდების გადადის მარცხნივ, სანამ არ გამოდის სრულიად საზღვარგარეთ სლაიდერი (სლაიდერი ასევე მითითებულია ზემოთ, overflow: ფარული, შესაბამისად, slide არ აწარმოებს მიმდებარე ობიექტებს).
5. Slide descends ქვემოთ ერთი დონის ერთად სლაიდერი
6. სლაიდების გადადის დაწყების პოზიცია
სხვა სიტყვებით რომ ვთქვათ (კადრები ახლა, ნომრების მიხედვით ზემოთ):
@ Keyframes slide (საწყისი (top: 0;) 1 (ტრანსფორმაცია: Translate (0PX, 0PX);) 2 (ტრანსფორმაცია: Translate (-500PX, 0);) 3 (Transform: Translate (-500PX, 300px )) 4 (ტრანსფორმაცია: თარგმნა (500px, 300px);) 5 (ტრანსფორმაცია: თარგმნა (500px, 0);) to (transform: (0px, 0px);))
5)
ასე რომ, ნათელი გახდა, რა გზას სლაიდი ჰგავს. თითოეული სლაიდ "წრეების" გარშემო მისი კონტეინერი არის სლაიდერი - და ბრუნდება ორიგინალური. ამდენად, ჩვენ შეგვიძლია უსასრულოდ ირონია ნებისმიერი რაოდენობის სლაიდები. მაგრამ ერთი ნიუანსი დარჩა, რაც ამ სქემაში ყველაზე მნიშვნელოვანი რამ არის. აუცილებელია სწორად გამოვთვალოთ ანიმაციის storytelling დროში და დააყენოთ სწორი დაგვიანებით თითოეული slide ისე, რომ არ ყველა ერთდროულად იყოს ანიმაციური. იმისათვის, რომ გავიგოთ, თუ როგორ უნდა დააყენოთ დაგვიანებით სწორად და გამოვთვალოთ ანიმაციური დრო, მივედი ქვემოთ.
ავიღოთ წინა წერტილიდან ნაბიჯების აღნიშვნა და გაიგებს, რა ხდება ყოველ ნაბიჯზე. არსებითად, ნაბიჯების რაოდენობა 1, 2 და 6 არის ის ნაბიჯები, სადაც სლაიდი შედის თვალსაზრისით. ის ფაქტიდან, რომ სლაიდები უნდა გადავიდეს და, როგორც ეს იყო, ერთმანეთს სლაიდერისგან, შეიძლება დაასკვნა, რომ 2 და 6 ნაბიჯების ხანგრძლივობა უნდა იყოს თანაბარი. დაუყოვნებლივ გააკეთეთ დაჯავშნა, რომ მე წარმატებით ვმუშაობდი ამ დიზაინს მხოლოდ იმ პირობით, რომ პირველი ნაბიჯის ხანგრძლივობა მე -2 და მე -6 და მე -6 ნაწილის ხანგრძლივობაა. რა ხდება 3.4 და 5-ის ნაბიჯების დროს არსებითად ტექნიკური საჭიროებებით, და სიმარტივისთვის, მოდით გავაერთიანოთ ეს სამი ნაბიჯი 1-ში.
გამარტივების შემდეგ, ჩვენ გვყავს:
1. ნაბიჯი - სლაიდერი აჩვენებს წყაროს
2. ნაბიჯი - სლაიდერი გადადის მარჯვნივ
3. ნაბიჯი - სლაიდერი იღებს ტექნიკურ მოძრაობას
4. ნაბიჯი - სლაიდერი მარცხნივ მარცხნივ, დაბრუნების თავდაპირველ პოზიციაზე
სლაიდების ინციდენტის უზრუნველსაყოფად, იმ მომენტში, როდესაც სლაიდი 2 ნაბიჯს იწყებს, მომდევნო სლაიდმა უნდა დაიწყოს ნაბიჯი 4.
თუ დრო, ყველა ანიმაციის წრე არის t;
სლაიდების რაოდენობა - n;
ხანგრძლივობა 3 ნაბიჯები - y;
ნაბიჯების ხანგრძლივობაა 1.2 და 4 - x;
ანიმაცია დაგვიანებით ნაბიჯი N-Slide - Z;
მაშინ:
Y \u003d (100 * n - 150) / n;
x \u003d (100 - y) / 3;
X და Y უნდა ითარგმნოს ინტერესი და შემდეგ:
z \u003d 2 * x * t;
იმ შემთხვევაში, როდესაც n \u003d 4, როგორც ზემოთ მოყვანილ მაგალითში, მივიღებთ:
3rd Pitch - 62.5%, 1, 2 და მე -4 - 12.5%. ანიმაციური დაგვიანებით ნაბიჯი თითოეული შემდგომი სლაიდისთვის - 25%.
რომელი ინტერვალით იქნება მესამე ეტაპზე ეტაპებს შორის - არ აქვს მნიშვნელობა.
6) ახლა, რომ ჩვენ ყველანი დათვლილი და ვიცი ყველა ღირებულებები შეიძლება მიეცეს საბოლოო კოდი.
ანიმაცია:
@ Keyframes Slide (დან (Top: 0; მარცხენა: 0;) 12.5% \u200b\u200b(ტრანსფორმაცია: Translate (0PX, 0PX);) 25% (ტრანსფორმაცია: Translate (-500PX, 0);) 36% (ტრანსფორმაცია: თარგმნა (- 500px, 300px);) 37% (ტრანსფორმაცია: Translate (500px, 300px);) 87.5% (ტრანსფორმაცია: Translate (500px, 0);)) to (0px, 0px);)
სლაიდები:
Slide1 (Background: URL (1.jpg); ანიმაციური დაგვიანებით: 7.5s;) .Slide2 (Background: URL (2.jpg); ანიმაცია-დაგვიანებით: 5s;) .Slide3 (Background: URL (3.jpg); ანიმაცია-დაგვიანებით: 2.5s;) .slide4 (URL (4.jpg); ანიმაცია-დაგვიანებით: 0s;)
გენერალური CSS ყველა სლაიდებისთვის:
სლაიდი (სიგანე: 500px; სიმაღლე: 300px; თანამდებობა: აბსოლუტური; ზედა: 0; მარცხენა: ანიმაციის სახელი: Slid; ანიმაცია-ხანგრძლივობა: 10s; ანიმაცია-დრო-ფუნქცია: ხაზოვანი; ანიმაცია-ესერაცია-რიცხვი: უსასრულო; )
აქ, ფაქტობრივად, ყველაფერი! მადლობა ყველას, ვინც ბოლომდე წაიკითხავს.
