Სიყვარულის დაკარგვა კანადის მიერ Jam3 არის ლამაზად ბნელი, მობილურისთვის მზა ინტერაქტიული ლექსი ნამდვილი გულით დაკარგული სიყვარულის ირგვლივ მდგრადი გრძნობების შესახებ. The ვებგვერდის განლაგება აშენდა HTML5-ის გამოყენებით GSAP ბიბლიოთეკა აძლიერებს მის ანიმაციას, მისი ერთ-ერთი ყველაზე თვალსაჩინო მახასიათებელია მისი ანიმაციური 3D ტექსტი, რომელიც ნამდვილად აცოცხლებს Love Lost-ის პოეზიას.

• შექმენით ინტერაქტიული 3D ტიპოგრაფიული ეფექტები

ის გამოიყურება შთამბეჭდავად, როგორც ჯოჯოხეთი, და არ არის ძნელი ჩართვა საკუთარ ნამუშევარში, რათა შექმნათ მიმზიდველი მომხმარებლის გამოცდილება; აი, როგორ კეთდება.

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

01. გაუშვით HTML დოკუმენტი

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

*** STEP 2 HERE. 

02. ხილული HTML შინაარსი

ხილული HTML შინაარსი შედგება სტატიის კონტეინერისგან, რომელიც შეიცავს ხილულ ტექსტს. სტატიის კონტეინერის მნიშვნელოვანი ნაწილია 'data-animate' ატრიბუტი, რომელსაც CSS მიუთითებს ვიზუალური ეფექტების გამოსაყენებლად. სტატიის შიგნით ტექსტი დამზადებულია h1 ტეგიდან, რათა მიუთითებდეს, რომ შინაარსი არის გვერდის მთავარი სათაური.

Hello There!

03. CSS ინიცირება

შექმენით ახალი ფაილი სახელწოდებით "styles.css". ინსტრუქციების პირველმა კომპლექტმა დაადგინა, რომ გვერდის HTML კონტეინერი და სხეული ჰქონდეს შავი ფონი, ისევე როგორც ხილული საზღვრების დაშორება. თეთრი ასევე დაყენებულია ტექსტის ნაგულისხმევ ფერად გვერდის ყველა ბავშვის ელემენტისთვის მემკვიდრეობით; ტექსტის ნაგულისხმევი შავი ფერის თავიდან აცილება, რაც კონტენტი უხილავი ჩანს.

html, body{ background: #000; padding: 0; margin: 0; color: #fff; }

04. ანიმაციური კონტეინერი

კონტენტის კონტეინერში მითითებულ "data-animate" ატრიბუტით არის გამოყენებული კონკრეტული სტილი. მისი ზომა დაყენებულია ისე, რომ ემთხვეოდეს ეკრანის სრულ ზომას vw და vh საზომი ერთეულების გამოყენებით, ასევე ოდნავ შემობრუნებული. გამოყენებულია ანიმაცია სახელწოდებით 'moveIn', რომელიც გაგრძელდება 20 წამის განმავლობაში და მეორდება უსასრულოდ.

[data-animate="move in"]{ position: relative; width: 100vw; height: 100vh; opacity: 1; animation: moveIn 20s infinite; text-align: center; transform: rotate(20deg); }

05. ანიმაციის ინიცირება

წინა საფეხურზე მითითებულ 'moveIn' ანიმაციას სჭირდება განმარტება @keyframes-ის გამოყენებით. პირველი კადრი, რომელიც იწყება ანიმაციის 0%-დან, ადგენს შრიფტის ნაგულისხმევ ზომას, ტექსტის პოზიციონირებას და ხილულ ჩრდილს. გარდა ამისა, ელემენტი დაყენებულია ნულოვანი გამჭვირვალობით ისე, რომ თავდაპირველად უხილავი იყოს – ე.ი. ნაჩვენებია ხედვის მიღმა.

@keyframes moveIn { 0%{ font-size: 1em; left: 0; opacity: 0; text-shadow: none; } *** STEP 6 HERE. }

06. ანიმირება ხედში

შემდეგი კადრი მოთავსებულია 10%-ზე ანიმაციის საშუალებით. ეს ჩარჩო აყენებს გამჭვირვალობას სრულად ხილვად, რის შედეგადაც ტექსტი თანდათანობით ანიმაციური ხდება ხედში. გარდა ამისა, ემატება მრავალი ჩრდილი ლურჯი და მცირდება ფერის მნიშვნელობებით, რათა ტექსტს 3D სიღრმის ილუზიები მისცეს.

10% { opacity: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px #777, .6em -.6em 4px #444, .8em -.8em 4px #111; }
*** STEP 7 HERE

07. ანიმაციის დასრულება

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

80%{ font-size: 8em; left: -8em; opacity: 1; }
100%{ font-size: 10em; left: -10em; opacity: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px #777, .06em -.06em 4px #444, .08em -.08em 4px #111; }
***

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

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

Დაკავშირებული სტატიები:

• შექმენით კაშკაშა ნეონის ტექსტის ეფექტი
• როგორ გავასწოროთ ვებ ანიმაციები
• შექმენით სიუჟეტი ვებ ანიმაციებისთვის