Judul Anda adalah salah satu bagian terpenting dari beranda Anda. Ini biasanya yang Anda lihat pertama kali, dan karena itu yang menentukan kesan pertama. Seperti kesan pertama lainnya, Anda ingin kesan itu bagus. Sekarang, jika Anda mencari cara kreatif untuk mempresentasikan judul Anda, Anda akan menikmati tutorial ini karena kami akan menunjukkan kepada Anda bagaimana menambahkan animasi blok teks CSS ke judul Anda dan Anda juga dapat mengunduh file layout JSON secara gratis!
penelitian
Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.
Ayo mulai desainnya
Tambahkan bagian # 1
Latar belakang gradien
Mulailah dengan menambahkan bagian biasa ke halaman baru atau ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan terapkan latar belakang gradien berikut:
- Warna 1: # f0f2b
- Warna 2: # c10b1a
- Jenis gradien: linier
- Arah gradien: 63 derajat
jarak
Beralih ke tab desain bagian dan terapkan nilai isian atas dan bawah khusus berikut ini pada berbagai ukuran layar:
- Lapisan atas: 7vw (desktop), 20vw (tablet), 25vw (telepon)
- Lapisan bawah: 7vw (meja), 20vw (tablet), 25vw (telepon)
Batas
Tambahkan juga batas ke bagian.
- Lebar perbatasan: 2vw (atas, kiri, kanan)
- Lebar batas bawah: 0vw
- Warna perbatasan: #ffffff
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
perekat
Buka parameter garis dan modifikasi parameter dimensi sesuai:
- Lebar: 100%
- Lebar maks: 100%
Tambahkan modul teks ke kolom
Tambahkan konten H1
Kemudian tambahkan modul teks dengan judul H1 pilihan Anda.
Tambahkan tag Div ke setiap kata dalam judul H1
Beralih ke tab teks salinan judul Anda dan tambahkan div yang berbeda untuk setiap kata dalam judul Anda. ID CSS harus berbeda untuk setiap kata.
Siap
di
Membangun
Cantik
Situs web?
Pengaturan teks H1
Beralih ke tab desain modul dan ubah pengaturan teks H1 sesuai:
- Jenis huruf: Work Sans
- Berat font judul: sedang
- Warna Teks Tajuk: #ffffff
- Ukuran Teks Header: 4vw (desktop), 5vw (tablet), 6vw (ponsel)
- Tinggi garis kepala: 1,4 em
jarak
Kemudian ubah nilai margin pada ukuran layar yang berbeda.
- Margin kiri: 20vw (meja dan tablet), 15vw (telepon)
- Margin kanan: 35vw (desktop), 20vw (tablet), 15vw (telepon)
Tambahkan modul kode ke kolom
Masukkan kode CSS
Agar animasi blok teks diterapkan ke judul kita, kita memerlukan beberapa kode CSS. Kami akan menambahkan kode CSS ini ke modul kode baru.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
jarak
Beralih ke tab desain modul dan hapus semua bantalan bawah default.
- Margin bawah: 0px
Tambahkan modul tombol ke kolom
Tambahkan salinan
Modul selanjutnya yang kita butuhkan adalah modul tombol. Masukkan salinan pilihan Anda.
Pengaturan tombol
Beralih ke tab desain modul dan ubah pengaturan tombol sesuai:
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 1vw (desktop), 2vw (tablet), 3vw (telepon)
- Warna teks tombol: #ffffff
- Warna latar tombol: # 000000
- Lebar batas tombol: 0px
- Tombol font: Work Sans
jarak
Lalu pergi ke pengaturan jarak dan terapkan margin kustom dan nilai padding pada ukuran layar yang berbeda.
- Margin teratas: 3vw (kantor),
- Margin kiri: 20vw (meja dan tablet), 15vw (telepon)
- Lapisan atas: 1.2vw (desktop), 2vw (tablet), 4vw (telepon)
- Lapisan bawah: 1.2vw (meja), 2vw (tablet), 4vw (telepon)
- Padding kiri: 1.8vw (desktop), 3vw (tablet), 6vw (ponsel)
- Padding kanan: 1.8vw (meja), 3vw (tablet), 6vw (telepon)
animasi
Sesuaikan juga pengaturan animasinya.
- Gaya Animasi: Flip
- Arah animasi: turun
- Penundaan animasi: 2000 ms
- Intensitas animasi: 100%
- Opasitas mulai animasi: 100%
- Kurva kecepatan animasi: kemudahan masuk
- Animasi ulangi: sekali
Tambahkan bagian # 2
Lanjutkan dengan menambahkan bagian reguler baru tepat di bawah yang sebelumnya.
jarak
Buka pengaturan bagian dan hapus padding atas default.
- Lapisan atas: 0px
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan lebih banyak modul, buka parameter garis dan biarkan garis menempati seluruh lebar bagian kontainer.
- Lebar: 100%
- Lebar maks: 100%
Tambahkan modul teks ke kolom
Tambahkan konten
Selanjutnya, tambahkan modul teks dengan a isi deskripsi pilihan Anda.
Warna latar belakang
Tambahkan warna latar belakang putih.
- Warna Latar Belakang: #ffffff
Pengaturan teks
Beralih ke tab desain modul dan ubah pengaturan teks yang sesuai:
- Font teks: Work Sans
- Warna teks: # 9b9b9b
- Ukuran teks: 1vw (desktop), 2vw (tablet), 3vw (telepon)
- Tinggi baris teks: 2.6em
jarak
Tambahkan juga nilai spasi khusus pada ukuran layar yang berbeda.
- Margin teratas: -5vw (desktop), -20vw (tablet), -27vw (telepon)
- Margin kiri: 20vw (meja), 13vw (tablet), 8vw (telepon)
- Margin kanan: 20vw (desktop), 13vw (tablet), 8vw (telepon)
- Lapisan atas: 5vw (desktop), 7vw (tablet dan telepon)
- Bantalan bawah: 5vw (meja), 7vw (tablet dan telepon)
- Padding kiri: 3vw (desktop), 5vw (tablet), 6vw (ponsel)
- Padding kanan: 3vw (meja), 5vw (tablet), 6vw (telepon)
Kotak bayangan
Dan selesaikan pengaturan modul dengan menerapkan bayangan kotak yang halus. Itu dia!
- Kekuatan Box Shadow Blur: 50px
- Warna bayangan: rgba (0,0,0,0,1)
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
final pikiran
Pada artikel ini, kami telah menunjukkan kepada Anda cara menambahkan animasi blok teks CSS ke judul Anda. Penting untuk memastikan judul Anda terlihat dan dibaca dari awal, menambahkan animasi ke judul Anda pasti bisa membantu! Anda juga dapat mengunduh file layout JSON secara gratis. Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
Diterjemahkan dari: ElegantThemes
