სლაიდ შოუს შექმნა html-ში. სლაიდშოუ სრული ეკრანის ფონით CSS3-ში. ალტერნატიული ანიმაციის მაგალითი

სლაიდშოუს შექმნის პროგრამების მიმოხილვა ვებსაიტისთვის სლაიდშოუს შექმნა

ვებსაიტზე განთავსებისთვის სლაიდ შოუს შექმნისას უმჯობესია გამოიყენოთ მზა პროგრამული გადაწყვეტილებები. ჩემი აზრით, საუკეთესო და მარტივი ვარიანტია jQuery-ის გამოყენებით, განსაკუთრებული უფასო ბიბლიოთეკასკრიპტები ( მცირე პროგრამები JavaScript-ში). წინა სტატიებში უკვე იყო საუბარი ამ შესანიშნავი ვებ განვითარების ხელსაწყოს შესახებ. მაგალითად, იხილეთ სტატია ფოტო გალერეა jQuery- მარტივი და ლამაზი! . ახლა გამოვიყენოთ jQuery საიტზე სლაიდ შოუს, ე.წ სლაიდერის შესაქმნელად.

ამისათვის ჩვენ გამოვიყენებთ Slides დანამატს, რომელიც შექმნილია პროგრამისტის Nathan Searles-ის მიერ, ტექნიკური დირექტორიდიზაინის სტუდია "The Brigade" პორტლენდში, ორეგონი, აშშ. მისი კიდევ ერთი განვითარება აღწერილი იყო სტატიაში ფოტო გალერეა ონლაინ მაღაზიისთვის.

Slides მოდული მარტივი ინსტალაციაა, აქვს სლაიდ შოუში სურათების შეცვლის რამდენიმე ვარიანტი და ხშირად გამოიყენება საიტის სათაურისთვის. მაგალითი იმისა, თუ როგორ მუშაობს ეს სლაიდერი ნაგულისხმევ პარამეტრებთან, ნაჩვენებია სურათზე:

სლაიდშოუს ინსტალაცია სლაიდები

როგორც ყოველთვის, ჯერ შექმენით სკრიპტების საქაღალდე საიტზე. შემდეგ თქვენ უნდა გადმოწეროთ არქივი და გახსენით იგი შექმნილ საქაღალდეში. ის შეიცავს ორ სკრიპტს jquery-1.8.3.min.js და jquery.cycle.all.min.js.

შემდეგ, გვერდის სათაურში, ტეგის შიგნით... ჩავსვით შემდეგი ხაზები, რომლებიც მიუთითებს სკრიპტებისკენ მიმავალ გზას და პატარა ჯავასკრიპტს, რომელიც განსაზღვრავს სლაიდ შოუს პარამეტრებს:




$(".სლაიდშოუ").ციკლი((
fx: "გაქრება"
});
});


.სლაიდშოუ(
სიგანე: 200px;
სიმაღლე: 135px;
ზღვარი: ავტო;
}

როგორც ხედავთ, ასევე არსებობს მარტივი CSS წესი, რომელშიც თქვენ უნდა მიუთითოთ ფანჯრის ზომა მომავალი სლაიდ შოუს სურათებისთვის (სიგანე - სიმაღლე). ბუნებრივია, ყველა სურათს უნდა ჰქონდეს იგივე ზომა. თუ გსურთ, შეგიძლიათ გააფართოვოთ CSS პარამეტრები, მაგალითად, საზღვრების, ფონის, ბალიშების და სხვა ელემენტების დამატებით. სლაიდშოუს სურათები. ამ შემთხვევაში, თქვენ უნდა მიუთითოთ მთლიანი ზომა, ანუ გამოსახულება პლუს ჩაღრმავები და საზღვრები სიგრძისა და სიგანის გასწვრივ, რომელიც თქვენ დაყენებულია.

მნიშვნელოვანი შენიშვნა:თუ თქვენი საიტი იყენებს რამდენიმე jQuery დანამატები, მაშინ უფრო მოსახერხებელია jquery.js ფაილის (სასურველია უახლესი ვერსიის) გადატანა root საქაღალდერათა არ გადმოწეროთ რამდენჯერმე. ამ შემთხვევაში, მასზე წვდომის ხაზი ყველა დანამატისთვის ერთნაირად გამოიყურება. კერძოდ, ჩვენი მაგალითისთვის ასე გამოდის:

არ არის რეკომენდებული ერთ გვერდზე რამდენიმე გამოყენება სხვადასხვა ვერსიები jQuery რათა ისინი არ ეწინააღმდეგებოდეს ერთმანეთს. ამავდროულად, დარწმუნდით, რომ შეამოწმეთ დანამატების მოქმედება დაინსტალირებულით jQuery ვერსია, რადგან ყველა ვერსია არ არის ურთიერთშემცვლელი.

ბოლო ნაბიჯი არის სურათების განთავსება გვერდზე. აქაც ყველაფერი მარტივია. მოათავსეთ სურათები ტეგის ან სხვა ტეგის შიგნით, რომელიც საშუალებას მოგცემთ დააყენოთ სიგანე და სიმაღლე და მიუთითოთ მისი class="slideshow" . ჩვენი მაგალითისთვის, სლაიდერის HTML კოდი ასე გამოიყურება:

ამაზე სლაიდშოუს შექმნაის თითქმის დასრულებულია და მისი ნახვა შეგიძლიათ ბრაუზერში თქვენი გვერდის გახსნით.

სლაიდ შოუს პარამეტრების დაყენება სლაიდები

შექმნილ სლაიდ შოუში შეგიძლიათ დააყენოთ სხვადასხვა ტიპისფრეიმებს შორის გადასვლები გვერდის სათაურში განთავსებული ჯავასკრიპტის შეცვლით. გარდა ამისა, სკრიპტში ხაზის sync:false შეცვლით sync:true , შეგიძლიათ ამოიღოთ სივრცე სურათების შეცვლისას.

სურათების ჩვენების ხანგრძლივობა კონტროლდება დროის ამოწურვის პარამეტრით, ხოლო სიჩქარე სიჩქარის პარამეტრით. მაგალითად, აქ არის რამდენიმე გავრცელებული სლაიდშოუს ვარიანტი და შესაბამისი სკრიპტები, რომლებიც უნდა იყოს ჩასმული გვერდის სათაურში.

1. დაშლა (ჩვენი მაგალითი): $(დოკუმენტი).ready(function() ( $(".სლაიდშოუ").ციკლი(( fx: "fade", //გარდამავალი ტიპი სიჩქარე: 1000 , //სურათის შეცვლის სიჩქარე ტაიმაუტი: 1000 //კადრის ხანგრძლივობა }); });
2. გადარევა: $(დოკუმენტი).ready(function() ( $(".სლაიდშოუ").ციკლი(( fx: "shuffle", სინქრონიზაცია: ყალბი, სიჩქარე: 500 ტაიმაუტი: 5000 }); });
3. მასშტაბირება: $(დოკუმენტი).ready(function() ( $(".სლაიდშოუ").ციკლი(( fx: "zoom", სინქრონიზაცია: ყალბი }); });
4. გადაატრიალეთ X ან Y ღერძში: $(დოკუმენტი).ready(function() ( $(".სლაიდშოუ").ციკლი(( fx: "curtainX", // Y ღერძის გასწვრივ ბრუნვისთვის - curtainY სინქრონიზაცია: ყალბი }); });
5. ვერტიკალურად კოლაფსი: $(დოკუმენტი).ready(function() ( $(".სლაიდშოუ").ციკლი(( fx: "turnDown", // მიმართულების დაყენება შესაძლებელია turnUp, turnLeft, turnRight სინქრონიზაცია: მართალია }); });
6. გადახვევა (ოფსეტური): $(დოკუმენტი).ready(function() ( $(".სლაიდშოუ").ციკლი(( fx:"scrollDown", // ოფსეტური მიმართულების დაყენება შესაძლებელია scrollUp, scrollLeft, scrollRight სინქრონიზაცია: მართალია }); });
7. გაქრობა მარჯვნივ: $(დოკუმენტი).ready(function() ( $(".სლაიდშოუ").ციკლი(( fx: "საფარი }); });

ზოგჯერ საჭიროა სლაიდშოუს რამდენიმე ვარიანტის განთავსება საიტის ერთ გვერდზე, როგორც ეს კეთდება ამ სტატიაში. ამისათვის თქვენ უბრალოდ უნდა მიუთითოთ სხვადასხვა კლასები$(".slideshow").cycle((((იხ. კოდი ზემოთ ცხრილში) ხაზის თითოეული ვარიანტისთვის და არ დაგავიწყდეთ ჩაწერა CSS ზომებიფანჯრები თითოეული კლასისთვის.

• თარგმანი
• სახელმძღვანელო

CSS3-ის წყალობით ჩვენ შეგვიძლია შევქმნათ ანიმაციური ეფექტები JavaScript-ის გამოყენების გარეშე, რაც ბევრ დეველოპერს გაუადვილებს მუშაობას.
ჩვენ არ უნდა გამოვიყენოთ ზედმეტად CSS3, რადგან ძველი ბრაუზერები არ უჭერენ მხარს მის ყველა თვისებას. ყოველ შემთხვევაში, ჩვენ ყველანი ვხედავთ CSS3-ის პოტენციალს და ამ სტატიაში განვიხილავთ, თუ როგორ შევქმნათ მარყუჟის გამოსახულების სლაიდერი მხოლოდ CSS3 ანიმაციის გამოყენებით.

სტატიის სექციები პროცესის თავიდან ბოლომდე გასაგებად, ქვემოთ მოცემულია სტატიის შინაარსი. გთხოვთ გაითვალისწინოთ, რომ ეს ეფექტი გამართულად იმუშავებს მხოლოდ თანამედროვე ბრაუზერები, რომელიც მხარს უჭერს გამოყენებულ CSS3 თვისებებს.

შესავალი
CSS3 გადასვლებთან და საკვანძო კადრების ანიმაციასთან დაკავშირებული ძირითადი ცნებების აღწერა.

HTML მარკირება
HTML მარკირების შექმნა გამოსახულების სლაიდერისთვის.

CSS სტილები
შექმენით სტილის ფურცელი სლაიდერის ჩვენებისთვის.

CSS3 Keyframe ანიმაცია
ანიმაციის დამატება სლაიდერში. ჩვენ განვიხილავთ აქ მიმდინარე პროცესებს.

პროგრესის ზოლის დამატება ჩვენი სლაიდერისთვის.

სათაურების საჩვენებლად მინიშნების დამატება.

CSS3 გადასვლები
აჩვენეთ ინსტრუმენტების მინიშნება სვლისას CSS3 გადასვლების გამოყენებით

პაუზა და გადატვირთვა

დემონსტრაცია
მოდით ვაჩვენოთ სლაიდერი მოქმედებაში.

დასკვნა
საბოლოო აზრები.

1. შესავალი

ამ გაკვეთილის გამოსაყენებლად, თქვენ უნდა გქონდეთ ძირითადი გაგება CSS-ის, კონკრეტულად CSS3 გადასვლებისა და საკვანძო კადრების ანიმაციების შესახებ.
ამათთან ოპერირება მარტივი ცნებები, ვნახოთ როგორ მოვიქცეთ ფუნქციური სლაიდერისურათები.

ძირითადი ცნებები CSS3 გადასვლები, როგორც წესი, როცა ცვლით CSS მნიშვნელობა, ცვლილებები ნაჩვენებია სტატიკურად. ახლა, გარდამავალი თვისების წყალობით, ჩვენ შეგვიძლია მარტივად შევიტანოთ ცვლილებები ერთი მდგომარეობიდან მეორეში.

ჩვენ შეგვიძლია გამოვიყენოთ ოთხი გარდამავალი თვისება:

გარდამავალი-საკუთრება
განსაზღვრავს სახელ(ებ)ს 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; )

CSS3 ანიმაციის ძირითადი ცნებები CSS ანიმაცია საშუალებას გვაძლევს შევქმნათ ანიმაციები JavaScript-ის გარეშე Keyframe-ების ნაკრების გამოყენებით.
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% არის დასასრული. შეგიძლიათ დამატებით დაამატოთ შუალედური ჩარჩოებიანიმაციებისთვის.

/* ანიმაცია 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 მარკირებაში სლაიდერის შესაქმნელად.

2. HTML მარკირება HTML მარკირება ძალიან მარტივია. ის აშკარად არის ორგანიზებული და SEO მეგობრული. ჯერ შევხედოთ სრული კოდი, შემდეგ კი დეტალურად გავარკვევთ, თუ როგორ მუშაობს ყველაფერი.

• პუმა
• ლომები
• სნოუოკერი
• ყვირილი
• მზის აბაზანების მიღება

Div id = "სლაიდერი"
ეს არის მთავარი სლაიდერის კონტეინერი. მას არ აქვს კონკრეტული ფუნქცია, მაგრამ ჩვენ გვჭირდება ანიმაციის დასაპაუზებლად.

Div id = "ნიღაბი"
ჩვენ გამოვიყენებთ ამ ბლოკს ყველაფრის დასამალად, რაც ხდება სლაიდერის გარეთ. ამას გარდა, ნიღაბი საშუალებას გვაძლევს გამოვაჩინოთ სლაიდერის შინაარსი.

Li id = "პირველი" კლასი = "პირველი ანიმაცია"
სიის თითოეულ ელემენტს აქვს ID და კლასი. ID აჩვენებს ინსტრუმენტს და კლასი მიბმულია ანიმაციასთან, რომელიც უნდა მოხდეს.

Div class="tooltip"
ეს ბლოკი აჩვენებს სურათის სათაურს. თქვენ შეგიძლიათ შეცვალოთ ის თქვენი საჭიროებიდან გამომდინარე, მაგალითად, დააწკაპუნოთ ან დაამატოთ მოკლე აღწერა.

Div class = პროგრესის ზოლი
ეს ბლოკი შეიცავს ფუნქციას, რომელიც აჩვენებს ანიმაციის პროგრესს.

ახლა დროა CSS ფაილის გენერირება.

3. CSS Styles მოდით შევქმნათ ძირითადი სტრუქტურასლაიდერი. ეს იქნება სურათის იგივე ზომა. 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 ) opacity:1 z-index:0 ) /* 4% to 16% (3 წამი) გამოსახულება ჩანს */ 20% ( top: 325px; z-index: 0; ) /* 16%-დან 20%-მდე (1 წამი) გამოსახულების გამომავალი */ 21% ( ზედა: -325 პიქსელი; გამჭვირვალობა: 0; z-ინდექსი: -1; ) /* დაუბრუნდით საწყის პოზიციას ნიღბის გარეთ */ 92% ( ზედა: -325 პიქსელი; გამჭვირვალობა: 0; z-ინდექსი: 0; ) 96% ( ზედა: -325 პიქს; გამჭვირვალობა: 0; ) /* 96%-დან 100%-მდე (1 წამი) – შეყვანა */ 100% ( ზედა: 0px; გაუმჭვირვალობა: 1 ;) ) @keyframes cycletwo ( 0% ( ზედა: -325px; გაუმჭვირვალობა: 0; ) /* საწყისი პოზიცია ნიღბის გარეთ */ 16% (ზედა: -325px; გამჭვირვალობა: 0; ) /* მოძრაობის დაწყება 16% * / 20% ( ზედა: 0px; გამჭვირვალობა: 1; ) 24% ( ზედა: 0px; გამჭვირვალობა: 1; ) /* 20% -დან 24% -მდე (1 წამში) - შეყვანა * / 36% ( ზედა: 0px; გამჭვირვალობა: 1; z-ინდექსი: 0; ) /* 24%-დან 36%-მდე (3 წამი) სურათი ჩანს */ 40% ( ზედა: 325 px; გამჭვირვალობა: 0; z- ინდექსი: 0 ) /* 36%-დან 40%-მდე (1 წამი) - გასვლა */ 41% ( ზევით: -325 პიქსელი; გამჭვირვალობა: 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 პიქსელი; გაუმჭვირვალობა: 0; ) 80% ( ზედა: 0 პიქსელი; გაუმჭვირვალობა: 1; ) 84% ( ზევით: 0 პიქსელი; გაუმჭვირვალობა: 1; ) 96% ( ზევით: 0 პიქსელი; გაუმჭვირვალობა: 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
• სლაიდშოუ

ტეგების დამატება

ამ გაკვეთილზე ჩვენ გადავხედავთ პროგრამას ავტომატური შექმნასლაიდშოუ HTML5 ტექნოლოგიის გამოყენებით.

მაშინაც კი, თუ Javascript-ის, css-ისა და html-ის ცოდნა არ მოგცემთ საშუალებას თავად შექმნათ სლაიდშოუ, ეს შეიძლება გაკეთდეს Hislider პროგრამის გამოყენებით. მისი ჩამოტვირთვა შეგიძლიათ ბმულიდან - Hislider.com. საიტს აქვს როგორც უფასო, ასევე ფასიანი ვერსია. მე ვაჩვენებ ყველა მოქმედებას უფასო ვერსია. თუ მოგწონთ პროგრამა, შეგიძლიათ შეიძინოთ იგი ფასიანი ვერსია. შევქმენი სატესტო სლაიდშოუ. მისი ნახვა შეგიძლიათ ბმულის გამოყენებით:

ჩამოტვირთვაროგორ შევქმნათ თქვენი პირველი სლაიდშოუ Hislider-ის გამოყენებით

პროგრამის ინსტალაციისა და გაშვებისას თქვენს წინაშე გამოჩნდება პროგრამის ფანჯარა, რომელიც მოგთხოვთ დაიწყოთ სლაიდ შოუს შექმნა. დააჭირეთ ღილაკს "ახლის შექმნა":

მიუთითეთ სლაიდშოუს საჭირო სიგანე (სიგანე) და სიმაღლე (სიმაღლე):

შემდეგ თქვენ უნდა დაამატოთ სურათები. ეს შეიძლება გაკეთდეს ფანჯრის ცენტრში ბმულზე ან ღილაკზე ღილაკზე დაჭერით:

სურათების დამატების შემდეგ, გადასვლების პანელი გააქტიურდება. გადადით "გადაცემის" ჩანართზე:

და დაამატეთ გადასვლები, რომლებიც მოგწონთ:

დააწკაპუნეთ "OK" და გადაგიყვანთ სლაიდშოუს რედაქტორში. ჩვენ ვაკეთებთ საჭირო ცვლილებებს. ზედა არის სამი ღილაკი:

პირველი "REFRESH" ღილაკი აუცილებელია ცვლილებების განხორციელების შემდეგ სლაიდშოუს განახლებისთვის, რათა ნახოთ ეს ცვლილებები.

მეორე ღილაკი „PREVIEW“ აუცილებელია ბრაუზერში სლაიდ შოუს გადახედვისთვის.

და ბოლო ღილაკი "PUBLISH" გამოიყენება სლაიდ შოუს შესაქმნელად.

საკმარისია საინტერესო პროგრამა. მით უმეტეს, თუ არ გაქვთ დრო ან უნარები, მაშინ ამ პროგრამასთქვენი შემცირდება თქვენი ვებსაიტის სასწავლებლის შემუშავების დროს. ან შეგიძლიათ შექმნათ მენიუ, შემდეგ შეცვალოთ კოდი, როგორც გჭირდებათ და ეს არის ის, თქვენი სლაიდ შოუ მზად არის.

თქვენ ალბათ უკვე გსმენიათ ახალი HTML5 ელემენტის შესახებ ტილო. ეს სპეციალური ელემენტი, რომელიც საშუალებას გაძლევთ შექმნათ და შეცვალოთ გრაფიკა. გარდა ამისა, ჩვენ შეგვიძლია გამოვიყენოთ ის, როგორც გვერდის ნებისმიერი სხვა ელემენტი - გამოვიყენოთ მასზე jQuery ანიმაციები, მოვაგვაროთ მისთვის ღონისძიებები და გავაერთიანოთ იგი შაბლონში.

როგორც წესი, ელემენტის გამოყენება ტილოშემოიფარგლება თამაშებითა და კონცეპტუალური დემოებით. IN ეს გაკვეთილიჩვენ მას პრაქტიკულად გამოვიყენებთ - გავაკეთებთ სლაიდშოუს დიდი გარდამავალი ეფექტით, რომელიც იმუშავებს ძველ ბრაუზერებში.

იდეა

თან JavaScript-ის გამოყენებითმოდი გავაკეთოთ სპეციალური ფილტრისლაიდშოუს თითოეული სურათისთვის. ჩვენ შევქმნით ახალი ვერსიასურათები უფრო მაღალი კონტრასტით და სხვა ნათელი ფერებიდა შეინახეთ იგი ტილოს ელემენტში.

როდესაც მომხმარებელს სურს გადავიდეს შემდეგ სლაიდზე, ელემენტზე ტილოეკრანზე ნაჩვენები ანიმაციის გამოყენებით fadeIn, ქმნის გლუვი გადასვლის ეფექტს.

HTML

დავიწყოთ HTML მარკირების შექმნით.

html5-slideshow.html

სლაიდ შოუ HTML5 ტილოს ელემენტზე და jQuery | დემონსტრაცია საიტის ვებსაიტისთვის

• 
• 
• 
• 

სლაიდშოუს განლაგება ძალიან მარტივია. მთავარი ელემენტი დივ#slideshow შეიცავს შეუკვეთებელ სიას და ისრებს შემდეგი და წინა სლაიდებისკენ. შეუკვეთავი სია შეიცავს სლაიდებს, რომლებიც განისაზღვრება როგორც ელემენტები ლი. ზემოთ მოყვანილი ილუსტრაცია აჩვენებს, რომ ელემენტი ტილოშეცვლილი სურათით აქ იქნება ჩასმული.

დასასრულს jQuery და ჩვენი ფაილი შედის script.js, რომელიც მოგვიანებით იქნება განხილული ამ გაკვეთილზე.

CSS

სლაიდების ჩვენების ყველა სტილი შეიცავს ფაილს styles.css. ჩვენ ვიყენებთ მთავარი #slideshow ელემენტის ID-ს, როგორც სახელთა სივრცის განსაზღვრას, ასე რომ თქვენ შეგიძლიათ უბრალოდ დაამატოთ ეს სტილები თქვენს პროექტს დასახელების კონფლიქტების რისკის გარეშე.

styles.css

#სლაიდშოუ(ფონის ფერი:#F5F5F5; საზღვარი: 1px მყარი #FFFFFF; სიმაღლე:340px; ზღვარი:150px ავტო 0; პოზიცია: შედარებითი; სიგანე:640px; -moz-box-shadow:0 0 22px #111; -webkit -box-shadow:0 0 22px #111 box-shadow:0 0 22px #111 ) #slideshow ul( height:320px; left:10px; list-style:none out of none; overflow:დამალული; position:absolute; top:10px; width:620px) #slideshow li(position:absolute; display:none; z-index:10; ) #slideshow li:first-child( display:block; z-index:1000; ) #slideshow . slideActive( z-index:1000; ) #slideshow canvas( ჩვენება:არცერთი; პოზიცია:აბსოლუტური; z-index:100; ) #სლაიდშოუ .arrow( სიმაღლე:86px; სიგანე:60px; პოზიცია:აბსოლუტური; ფონი:url(" img/arrows.png") გამეორების გარეშე; ზედა: 50%; ზღვარი-ზედა: -43 პიქსელი; კურსორი: მაჩვენებელი; z-ინდექსი: 5000; ) #სლაიდშოუ .წინა (ფონის პოზიცია: მარცხნივ ზედა; მარცხნივ:0; ) #სლაიდების ჩვენება .წინა: hover( ფონის პოზიცია:მარცხნივ ქვედა;) #სლაიდშოუ .შემდეგი (ფონის პოზიცია:მარჯვნივ ზედა;მარჯვნივ:0;)

ჩვენ შეგვიძლია დავყოთ ჩვენი ვიზიტორები, რომლებიც ურთიერთობენ სლაიდშოუსთან სამ ჯგუფად:

• ვისაც JavaScript გამორთული აქვს. ასეთი მომხმარებლები ნახავენ მხოლოდ პირველ სლაიდს და ვერ შეძლებენ სხვა სლაიდებზე გადასვლას.
• ვისაც აქვს ჩართული JavaScript, მაგრამ არ აქვს ელემენტის მხარდაჭერა ტილო. ასეთი ვიზიტორებისთვის სლაიდები მყისიერად იცვლება გარდამავალი ეფექტის გარეშე.
• ვისაც ჩართული აქვს JavaScript მხარდაჭერადა ელემენტი მხარდაჭერილია ტილო. ეს ჯგუფი იყენებს უახლესს Firefox-ის ვერსიები

, Safari, Chrome, Opera. ისინი ნახავენ სლაიდშოუს მთელი თავისი დიდებით. წესები შემუშავებულია პირველი ორი ჯგუფის გათვალისწინებით. სელექტორის გამოყენებითპირველი შვილი

ნაგულისხმევად გამოჩნდება მხოლოდ პირველი სლაიდი.

JavaScript

ჩვენ უკვე განვიხილეთ სლაიდშოუს ძირითადი პრინციპი. ახლა მოდით შევხედოთ პრაქტიკულ განხორციელებას.

script.js - ნაწილი 1 $(window).load(function())( // ჩვენ ვიყენებთ window.load მოვლენას, ამიტომ დარწმუნებული ვართ, რომ //ჩატვირთულია შეცდომების გარეშე. // შეამოწმეთ, მხარს უჭერს თუ არა მიმდინარე ბრაუზერს ტილო ელემენტს: var supportCanvas = "getContext" in document.createElement("canvas");// ტილოს ელემენტის მანიპულირება არის CPU ინტენსიური, // ამიტომ ვიყენებთ setTimeout, რომ გავხადოთ ის ასინქრონული და გავაუმჯობესოთ // გვერდის პასუხის დრო var slides = $("#slideshow li"), მიმდინარე = 0, სლაიდშოუ = (სიგანე : 0, სიმაღლე: 0); setTimeout(function())( window.console && window.console.time && console.time("გენერირებული:"); if(supportCanvas)($("#slideshow img").each(function())(თუ (! slideshow.width)( // მიიღეთ პირველი სურათის ზომები: slideshow.width = this.width; slideshow.height = this.height; ) // გამომავალიშეცვლილი ვერსია