Teks Animasi Intro CSS Halaman Penuh

sukma
sukma
4 minute read

Apakah Anda ingin menambahkan bagian perkenalan di situs web Anda? Mengapa tidak membuatnya beranimasi? Dengan bantuan Animasi intro CSS, kami akan membuat halaman yang terlihat bagus.

Teks sederhana Animasi CSS sangat menyenangkan untuk menampilkan beberapa informasi cepat kepada pelanggan. Jika Anda menyediakan beberapa layanan, maka merupakan hal yang bagus untuk menunjukkan siapa Anda dalam catatan singkat.

Seperti yang kita ketahui, desain web merupakan faktor utama dan penting untuk mengatur elemen dengan cara yang menarik.

Membuat pengguna situs web Anda mengesankan, Sangat menyenangkan menggunakan efek gulir gambar pahlawan yang bagus, warna latar belakang, gambar, dan tipografi yang indah.

Hari ini, saya akan menunjukkan kepada Anda cara membuat halaman depan yang memiliki intro cepat di situs Anda.

Saya akan membuat halaman layar penuh dengan Smooth CSS Fade Animation dan bar pengatur waktu di bagian atas halaman.

Semua kita lakukan dengan menggunakan HTML / CSS dan sedikit jquery. Saya akan menggunakan teknik yang hampir sama yang kita lakukan saat membuat semua jenis slider jQuery.

Hanya perbedaannya itu akan menunjukkan kepada Anda beberapa teks cepat, bukan gambar. Selain itu, ini sepenuhnya responsif dan berfungsi dengan baik di semua ukuran layar.

Markup Animasi Intro Dasar

Kami hanya memiliki HTML yang sangat mudah dimengerti. Anda dapat melihatnya, ia memiliki nama kelas div utama intro yang menampung semua div dan tag HTML lainnya.

Kelas div animated-bar adalah bilah kemajuan pemuatan yang akan Anda lihat di bagian atas layar.

Selanjutnya, kami mendefinisikan setiap slider sebagai bagian yang menyertakan konten lainnya.

<div class="intro">    <div class="animated-bar"></div>    <div class="slide slide-a">       <div class="slide-content">          <p class="slide-a-child">Hi There!</p>          <h1 class="slide-a-child">My name is Mohamed</h1>          <p class="slide-a-child">I'm a Front End web developer</p>       </div>    </div> </div>

Itu sangat sederhana. Dan tidak sulit untuk menambahkan slide kedua. Yang harus Anda salin dan tempel kode slide pertama dan kemudian ubah nama kelas slider.

Mari kita lihat kodenya dan lihat kita hanya perlu mengubah nama kelas slide-a ke slide-b.

<div class="slide slide-b">   <div class="slide-content">      <h2 class="slide-b-child">what I do</h2>      <p class="slide-b-child">I design modern, clean and creative websites</p>      <p class="slide-b-child">And make them alive on the internet</p>   </div> </div>

Terapkan Styling

CSS agak panjang, dan di sini saya akan menjelaskan kepada Anda beberapa hal tentang CSS. Jangan khawatir; Anda akan mendapatkan semua CSS dari file unduhan.

Untuk membuat layar penuh kita memiliki properti CSS baru yang disebut VH. VH memungkinkan pengguna untuk mengatur ukuran benda sesuai dengan tampilan.

.intro {   width: 100%;   min-height: 100vh;   position: relative; }

Properti animasi CSS memungkinkan untuk membuat animasi dan memungkinkan untuk menentukan animasi yang dibuat bingkai utama.

Ukuran bilah dapat dengan mudah dicapai melalui elemen ketinggian dan sebagai perhatian posisi, kita dapat menggunakan posisi absolut kemudian mengatur bagian atas ke nol untuk mengaturnya di bagian atas layar atau halaman.

.intro .animated-bar {   width: 0;   height: 3px;   background: #fff;   z-index: 9999;   position: absolute;   top: 0;   left: 0;   -webkit-animation: bar 5s 3 linear;           animation: bar 5s 3 linear; }

Javascript

Dengan bantuan javascript, kita dapat mengatur waktu tunggu, fade out dan beberapa fungsi lain seperti visibilitas. Setiap slide akan memiliki fungsi batas waktu, dan is-visible class ditambahkan melalui javascript ke semua div turunan dari nama kelas div slider utama slide.

Juga, Ketika fungsi timeout berkompetisi, itu akan menambah kelas display: none; ke div utama kelas slide tetapi itu tidak akan menambahkan kelas ini ke div terakhir dari slider.

$(document).ready(function () {     'use strict';     var slide  = $('.slide'),         slideAelements = $('.slide-a-child'),         replay = $('button.replay');     slide.each(function (i) {         if (i < 3) {             setTimeout(function () {                 slide.eq(i).fadeOut();             }, 5000 * (i + 1));         }     });     function animateSlideA() {       slideAelements.each(function (i) {           setTimeout(function () {               slideAelements.eq(i).addClass('is-visible');           }, 300 * (i + 1));       });     }    animateSlideA();    replay.on('click', function () {      location.reload(true);    }); });

Itu dia! Lihat demo animasi intro CSS untuk melihat cara kerjanya dan terapkan di situs web Anda agar terlihat lebih bagus.