ანიმირებული გადასვლები

ანიმირებული გადასვლები  CSS - ში

Иконка CSSვებ გვერდების გაფორმებამ დღევანდელ დღეს არნახულ ეფექტებს მიაღწია.  (CSS) - ის დახმარებით დღეს უკვე შესაძლებელია არა მარტო სხვადასხვა ელემენტების განთავსება და მართვა და მათი ფერების ცვლაც კი, არამედ ბევრი საინტერესო ეფექტების დამატებაც, რაც გაფორმებას აძლევს სულ სხვა იერს.
ძოგიერთ მათგანს ჩვენ ახლა განვიხილავთ.
  • ფერის ნელი ცვლა 
  • ნელი ქრობა
  • ნელი გადიდება — დაპატარავება
  • ნელი გადაადგილება
  • ნელი ტრიალი
CSS3 - ში გაჩნდა ახალი ფუნქციები, რომელთა დახმარებითაც შეიძლება მთელი ანიმაციების კეთება. ბრაუზერების შემქმნელები ცდილობენ არ ჩამორჩნენ და იყვნენ მოწინავენი ყოველივე ამაში  და აკეთებენ ამისათვის ყველაფერს, რომ ყველა ახალი ფუნქცია კარგად და გამართულად მუშაობდეს . თუმცა ყველა ბრაუზერი ერთნაირად კარგად არ მუშაობს და ამის შესახებ მოგვიანებით ვისაუბრებთ.

ფერების ნელი ცვლა

მაგალითისათვის შევქმნათ HTML  დოკუმენტი და ჩავსვათ მასში ბლოკი div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#block1{
 width:150px; /* სიგანე */
 height:150px; /* სიმაღლე */
 background:#234543; /* ფერი */
 margin:100px auto; /* საზღვარი */
 border-radius:8px; /* კუთხის რადიუსი */
 -o-border-radius:8px; /* რადიუსი ოპერასთვის */
 -webkit-border-radius:8px; /* ქრომი და საფარი */
 -moz-border-radius:8px; /* მოზილა */
 -webkit-transition: background-color 1s linear;
 -o-transition: background-color 1s linear;
 -moz-transition: background-color 1s linear;
 transition: background-color 1s linear;
}
#block1:hover{background:#00CC66;} /* ბლოკის ფერი კურსორის დაჭერისას */
ფერის ნელი ცვლა ხდება ფუნქცია transition - ის გამოყენების ხარჯზე, რაც თარგმანში გადასვლას ნიშნავს. და ეს გადასვლა 1 წამის განმავლობაში ხდება, როგორც არის მითითებული. Linear შესაძლებელია შევცვალოთ ease  - ით და გადასვლა უფრო სწრაფი იქნება. ნახეთ მაგალითი.

ნელი ჩაქრობა

CSS კოდი თითქმის იგივეა, მხოლოდ თვისებებას მიუთითებთ — all, ანუ ყველაფერს რაც მიჰყვება ფსევდო კლასს hover, მიენიჭება ნელი გადასვლა. ჩვენს შემთხვევაში ეს მელი ჩაქრობაა. ბლოკი შეიცვლის გამჭვირვალეობას კურსორის მიტანისას ელემენტზე 50%.- ით
1
2
3
4
5
6

-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
 
#block1:hover{opacity:0.4;}

ნელი გადიდება

ამ ვარიანტში ყველაფერი იგივეა. მხოლოდ აქ გამოყენებულია თვისება  linear - ი  ease ს ნაცვლად. დავაყენოთ ფსევდოკლასი hover სიგრძე და სიგანე, ორიგინალური ზომებისაგან განსხვავებული.

ნელი გადაადგილება

აქ მნიშვნელობებს დავუწერთ ფსევდოკლასს, გამოვიყენებთ თვისებას transform.
1
2
3
4
5
6

#block1:hover{
-webkit-transform: translate(50px,0);
-moz-transform: translate(50px,0); 
-o-transform: translate(50px,0);
transform: translate(50px,0);
}
დაწერილი ნიშნავს რომ, კურსორის მიტანისას ობიექტზე ხდება მისი გადაადგილება მარცხნივ 50 პიქსელით.

ნელი ბრუნი

1
2
3
4
5

#block1:hover{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); 
-o-transform: rotate(180deg); 
}
ეს ნიშნავს რომ, ობიექტი დატრიალდება 180° - ით საათის ისრის მიმართულებით
რაც შეეხება ბრაუზერებს. Opera, Mozilla, Chrome მშვენივრად მუშაობენ, მაგრამ  Internet Explorer ის ცოტა არ იყოს უჭირს. ამ სიახლეების გაგება და მისი შემქმნელები როგორც ჩანს, ჯერ არ ფიქრობენ მის განახლებას.