Membuat Animasi Intro pada Section

Pada tulisan kali ini, saya akan menceritakan bagaimana “Membuat Animasi Intro pada Section”. Sebuah koleksi efek mewah pada text, guna untuk menghidupkan tombol tagline dan memberi sentuhan pada bagian(section) intro website Anda.

Animasi dalam desain web sering digunakan untuk mengarahkan pengguna untuk fokus pada bagian(section) tertentu. Salah satu bagian(section) yang dipastikan untuk menarik perhatian adalah tagline utama, dengan sebuah tombol tindakan. Penggunaan tipografi yang baik dan pilihan warna yang bijak merupakan sebuah trik. Namun kami memutuskan untuk memberi sedikit sentuhan dengan menciptakan beberapa efek pada teks dan Anda dapat dengan mudah menerapkan sentuhan tersebut ke dalam bagian(section) intro web Anda.

Membuat struktur

Struktur HTML untuk setiap efek cukup sederhana:section.cd-intro  digunakan sebagai wadah untukdiv.cd-intro-content  yang membungkus tagline utama.

Struktur untuk tagline utama sedikit berbeda dari satu efek ke efek yang lain. Untuk efek Goyang misalnya, kami menggunakanh1  untuk judul halaman, sebuah tagp  sebagai tagline, dandiv.action-wrapper  untuk membungkus tombol tindakan.

.bouncy  kelas ditambahkan ke.cd-ke-content  digunakan untuk memicu animasi.

Tutorial lainya   Upload File / Folder secara aman dengan "scp" di terminal

Menambahkan gaya (Style)

Secara default, kami menyembunyikan konten intro dengan menetapkan opacity menjadi nol, maka kita akan menjalankan animasi tersebut menggunakan CSS.

Untuk efek goyang misalnya, kita buat 3 animasi yang berbeda untuk<h1> ,<p>  dan .cd-btn tombol:

Mari kita lihat efek pada video yang sekarang ini, jika Anda membuka file video.html, Anda dapat melihat bahwa tambahandiv.cd-bg-video-wrapper  telah dimasukkan. Unsur tersebut digunakan untuk membungkus video latar belakang (Anda tidak akan melihat<video>  elemen dalam HTML karena hal itu telah dimuat dengan menggunakan Javascript – lebih lanjut mengeni ‘Events Handling’ section).

Tutorial lainya   Cara Menambahkan Meta Description Pada Blogger

Selain itu, kami memasukkan dua elemen svg (.svg-mask  dan.svg-mask-mobile ) di dalam<h1> . Svg ini digunakan untuk menciptakan efek transparansi judul (yang pertama ketika lebar perangkat(device) lebih besar dari 768px, kedua untuk perangkat lain).

Pada dasarnya, idenya adalah: kita membuat sebuah persegi panjang yang buram menggunakan elemen <path>, tapi kemudian kita menambahkan area transparan dalam bentuk judul halaman (pada halaman demo, ‘Video Effect‘).
Svg ini kemudian digunakan sebagai lapisan untuk menutupi seluruh.cd-intro-content . Area transparan svg yang memungkinkan Anda untuk melihat apa yang ada di bawahnya (video latar belakang).

Anda dapat membuat masker svg hanya dengan menggunakan vektor editor grafis. Kami menggunakan Adobe Illustrator, di mana kami menciptakan sebuah persegi panjang dan kemudian menghapus teks menggunakan alat pathfinder.

Penanganan Events

Sebuah Efek intro telah diciptakan menggunakan CSS saja. Kami menggunakan jQuery untuk efek video hanya untuk memuat/menjalankan video latar belakang jika lebar perangkat lebih besar dari 768px. Sebuah data video yang  telah ditambahkan kediv.cd-bg-video-wrapper  kemudian mengambil url video.

Tutorial lainya   Tutorial Membuat Drag n Drop

Animasi Intro Section
demo here

Penulis Tutorial

Penulis Tutorial

Kata terindah

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *