< Return to Video

ანიმაცია CSS-ის გამოყენებით (ვიდეო ვერსია)

  • 0:01 - 0:04
    შეიძლება ახლა იმაზე დავობთ თუ რა ჯობს,
  • 0:04 - 0:09
    SetInterval-ის გამოყენება
    თუ requestAnimationFrame-სი,
  • 0:09 - 0:14
    მაგრამ მე კიდევ ერთ
    ვარიანტს შემოგთავაზებთ.
  • 0:14 - 0:17
    Chrome-ში, Firefox-სა და IE10+-ში,
  • 0:17 - 0:22
    არსებობს CSS-ით ანიმაციის შექმნის გზა,
  • 0:22 - 0:25
    რისთვისაც ჯავასკრიპტი
    საერთოდ არ არის საჭირო.
  • 0:25 - 0:31
    რაც დავწერეთ გავაკომენტაროთ
    და ვცადოთ Oh noes ანიმაციაზე.
  • 0:31 - 0:37
    -- მოვაქციოთ მრავალხაზიან კომენტარში --
  • 0:37 - 0:41
    დავიწყოთ გვერდისთვის
    სტილის ტიპის დამატებით.
  • 0:41 - 0:45
    შემდეგ კი დავუმატოთ
    CSS-ის წესის მსგავსი ხაზი,
  • 0:45 - 0:48
    რომელიც რეალურად ჩვენი
    ანიმაციის განმარტება იქნება.
  • 0:48 - 0:55
    დავწეროთ keyframes, შემდეგ კი
    სახელი ჩვენი ანიმაციისთვის - getbigger,
  • 0:55 - 0:58
    ბოლოს კი ფიგურული ფრჩხილები.
  • 0:58 - 1:01
    უბრალო ანიმაციის გასაკეთებლად, რომელიც
    ერთი მდგომარეობიდან მეორეში გადადის,
  • 1:01 - 1:07
    განვსაზღვროთ -დან და -მდე, ანუ from და to.
  • 1:07 - 1:12
    from-ში დავწეროთ CSS-ის საწყისი პირობა.
  • 1:12 - 1:16
    თუ გაიხსენებთ, დასაწყისში ეს 50px იყო.
  • 1:16 - 1:21
    to-ში დავწეროთ საბოლოო პირობა.
  • 1:21 - 1:26
    მაგალითად, იყოს 300px.
  • 1:26 - 1:30
    რადგან ანიმაცია განვმარტეთ,
    ახლა ბრაუზერს უნდა ვუთხრათ,
  • 1:30 - 1:34
    თუ რა ელემენტმა
    უნდა გამოიყენოს ეს ანიმაცია.
  • 1:34 - 1:39
    დავამატოთ ნორმალური
    CSS წესი Oh noes-სთვის,
  • 1:39 - 1:47
    შიგნით მივუთითოთ
    ანიმაციის სახელი, getbigger,
  • 1:47 - 1:53
    შემდეგ კი ანიმაციის
    ხანგრძლივობა, სამი წამი.
  • 1:53 - 1:56
    იმის მიხედვით თუ რა ბრაუზერი გაქვთ,
  • 1:56 - 1:59
    ზოგიერთი ალბათ ფიქრობთ
    რომ მაგარია და ყველაფერი მუშაობს,
  • 1:59 - 2:04
    სხვებისთვის კი, Safari,
    Chrome, ალბათ ეს არ მუშაობს.
  • 2:04 - 2:10
    ეს არის რაღაცის, სახელად
    Vendor Prefix-ების დამსახურება.
  • 2:10 - 2:16
    ზოგჯერ ბრაუზერი წყვეტს რაიმე
    ახალ თვისებას დაუჭიროს მხარი,
  • 2:16 - 2:19
    მაგრამ ამ თვისებაზე
    Vendor Prefix-ს განათავსებს,
  • 2:19 - 2:22
    იმის ნიშნად, რომ შესაძლოა
    ეს მომავალში შეიცვალოს.
  • 2:22 - 2:26
    ეს მხოლოდ ბრაუზერების
    კავშირია თვისებასთან.
  • 2:26 - 2:29
    თუ ეს Chrome-ში გვინდა
    გავუშვათ და ჯერ არ მუშაობს,
  • 2:29 - 2:32
    საჭიროა ყველაფრის კოპირება რაც გავაკეთეთ
  • 2:32 - 2:35
    და წინ webkit-ის დაწერა.
  • 2:35 - 2:39
    ესეიგი, ვაკოპირებთ ამ ნაწილს,
  • 2:39 - 2:42
    აქ ვწერთ: -webkit-
  • 2:42 - 2:50
    აქ კი ვაკოპირებთ ამას და
    აქაც, ვწერთ -webkit-, -webkit-
  • 2:50 - 2:55
    ძალიან კარგი, ახლა გამოსახულება
    იზრდება, ნებისმიერი ბრაუზერისთვის.
  • 2:55 - 2:58
    იმედია იმ დროსითვის როცა ამას უყურებთ,
  • 2:58 - 3:00
    Vendor Prefix-ები აღარ იქნება საჭირო,
  • 3:00 - 3:03
    მაგრამ კარგია მათი არსებობის ცოდნა,
  • 3:03 - 3:08
    შესაძლოა ოდესმე
    მათი თვისებები გამოგვადგეს.
  • 3:08 - 3:12
    CSS-ში კიდევ ერთი გზა
    არსებობს ანიმაციის გასაკეთებლად.
  • 3:12 - 3:15
    ეს არის გადატანის თვისება.
  • 3:15 - 3:21
    ეს ბრაუზერს მიუთითებს თუ
    როგორ გადავიდეს ერთი თვისებიდან მეორეზე.
  • 3:21 - 3:28
    ვთქვათ, გვინდა დარჩენილი დროის ფონტის ზომა
    გაიზარდოს როცა მაუსს მასზე გადავატარებთ.
  • 3:28 - 3:33
    შეგვიძლია ეს ჯავასკრიპტში გავაკეთოთ
    მაუსთან დაკავშირებული eventListener-ით,
  • 3:33 - 3:37
    შემდეგ კი requestAnimationFrame-ს
    გამოყენებით გავზარდოთ ფონტის ზომა,
  • 3:37 - 3:42
    მაგრამ ამის გაკეთება
    მთლიანად CSS-შიც შეგვიძლია.
  • 3:42 - 3:49
    ვნახოთ, როგორ შევვლიდით CSS-ში ფონტს ისე,
    რომ მაუსის გატარებისას იგი გაზრდილიყო?
  • 3:49 - 3:51
    შეგვიძლია გამოვიყენოთ hover,
  • 3:51 - 3:55
    ვწერთ: #countdown:hover,
  • 3:55 - 4:00
    შემდეგ კი font-size: 150px;
  • 4:00 - 4:03
    ახლა ისღა დაგვრჩენია ბრაუზერს მივუთითოთ,
  • 4:03 - 4:07
    რომ ფონტის ზომის თვისება ცვალოს.
  • 4:07 - 4:11
    რამდენ ხანში გააკეთოს ეს და
    დროის ათვლის რა ფუნქცია გამოვიყენოთ?
  • 4:11 - 4:19
    ვამბობთ: transition: font-size 1s linear;
  • 4:19 - 4:26
    დააპაუზეთ გაკვეთილი და
    გადაატარეთ მაუსი ტექსტს, ნახეთ რა მოხდება.
  • 4:26 - 4:29
    თუ Chrome-ში, Firefox-ში ან IE10+-ში ხართ,
  • 4:29 - 4:32
    მაშინ გამოსახულება გაიზრდება.
  • 4:32 - 4:36
    ამ ტექნიკისთვის
    Vendor Prefix-ებიც არ გვჭირდება.
  • 4:36 - 4:40
    CSS-ის ანიმაციებითა და transition-ებით
    მრავალი რამის გაკეთება შეიძლება,
  • 4:40 - 4:43
    ბრაუზერები კი მათ
    სწრფად აღიქვამს და ახორციელებს,
  • 4:43 - 4:45
    ამიტომ გირჩევთ ორივე
    უფრო დეტალურად გამოიკვლიოთ.
Title:
ანიმაცია CSS-ის გამოყენებით (ვიდეო ვერსია)
Description:
more » « less
Video Language:
English
Duration:
04:47

Georgian subtitles

Revisions

Our website uses cookies for analysis purposes.