Buat efek teks uap animasi

Sep 13, 2025

Bagaimana caranya

Menambahkan efek ke teks dapat menambah tingkat keterlibatan dan minat yang sama sekali baru. Efek seperti Tipografi Kinetik. akan menarik perhatian pemirsa, bantuan pengalaman pengguna dan membantu menceritakan kisah yang diberitahu. Efek teks pada Lakukan keajaiban Situs membawa font web. ke dalam garis fokus demi baris. Baca terus untuk mencari tahu cara membuat ulang sesuatu yang serupa.

Ambil file proyek Untuk membantu mengikuti tutorial ini.

01. MEMAKSIKAN DOKUMEN HTML

Langkah pertama adalah mendefinisikan struktur dokumen yang akan menyimpan konten HTML. Ini terdiri dari wadah dokumen, yang menyimpan bagian kepala dan tubuh. Sementara bagian kepala menyimpan tinta ke CSS eksternal dan sumber daya javascript, tubuh menyimpan konten yang terlihat dibuat pada langkah 02.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; judul & gt; blur teks & lt; / judul & gt;
& lt; tautan rel = "stylesheet" type = "teks / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; tubuh & gt;
  *** Langkah 2 di sini
& lt; / body & gt;
& lt; / html & gt;

02. Konten HTML

Langkah ini mendefinisikan konten HTML yang terlihat. Perhatikan bagaimana teks yang ditunjuk untuk memiliki efek blur semuanya terkandung dalam wadah yang memiliki kelas 'blur'. Kelas ini digunakan oleh JavaScript untuk merujuk item teks pada langkah 03, dan oleh CSS di langkah-langkah selanjutnya.

 & lt; h2 & gt;
  Disiplin berasal dari
  & lt; ul kelas = "blur" & gt;
  & lt; li & gt; komitmen & lt; / li & gt;
  & lt; li & gt; perselisihan & lt; / li & gt;
  & lt; li & gt; dedikasi & lt; / li & gt;
  & lt; li & gt; pelatihan & lt; / li & gt;
  & lt; li & gt; aspiration & lt; / li & gt;
  & lt; li & gt; pendidikan & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Penundaan animasi otomatis

Buat file baru yang disebut 'code.js'. Setiap item di dalam wadah blur harus disajikan tiga detik setelah item sebelumnya. JavaScript digunakan untuk mengotomatiskan aplikasi atribut CSS unik. Langkah pertama dari ini adalah untuk memilih semua item tingkat pertama di dalam wadah blur - setelah halaman telah dimuat.

 window.addeventlistener ("muat", fungsi () {
  var nodes = document.queryselectorall (". blur & gt; *");
  *** Langkah 4 di sini
});

04. Jumlah detik

Loop 'untuk' digunakan untuk referensi setiap item dikembalikan ke variabel 'node' pada langkah sebelumnya. Penghitung indeks dari loop 'untuk' digunakan untuk menghitung jumlah detik untuk menetapkan ke atribut penundaan animasi. Akibatnya, setiap item memiliki penundaan yaitu tiga detik lebih lama dari item sebelumnya.

 untuk (var i = 0; i & lt; node.length; i ++) {
  node [i] .tyle.AntimationDelay = (i * 3) + "s";
}

05. CSS WHUR.

Buat file baru yang disebut 'Styles.css'. Langkah pertama untuk mendefinisikan aturan presentasi CSS memulai masing-masing item teks sebagai tidak terlihat. Animasi yang disebut 'animationblur' juga diterapkan yang akan menghidupkan item ke dalam tampilan selama lima detik. Mode animasi harus diatur ke 'maju' sehingga berhenti pada bingkai terakhirnya.

 .blur & gt; * {
  Opacity: 0;
  Animasi: Animatblur 5s ke depan;
}

06. memulai animasi

Animasi yang diterapkan pada elemen 'blur' pada langkah 5 didefinisikan dalam langkah ini. Referensi ke 'animationblur' dibuat sebagai animasi keyframe. Bingkai pertama 'dari' menetapkan elemen seperti yang terlihat dengan bayangan teks - tetapi dengan warna teks transparan. Inilah yang menghasilkan efek teks yang kabur.

 @keyframes animatblur {
  dari {
  Opacity: 1;
  Teks-shadow: 0 0 1 RGBA (0,0,0, .5);
  Warna: RGBA (0,0,0,0);
  }
    *** Langkah 7 di sini
}

07. Bingkai Animasi Akhir

Bingkai 'to' dalam animasi mendefinisikan bingkai final yang akan dianimasikan teks. Bingkai ini menetapkan bayangan teks untuk menghilang, bersama dengan warna teks yang sepenuhnya terlihat. Dikombinasikan dengan Langkah 06, bingkai animasi antara 'dari' dan 'to' akan dihitung secara otomatis oleh browser.

 untuk {
  Opacity: 1;
  Teks-shadow: 0 0 px RGBA (0,0,0,0);
  Warna: # 000;
}

Artikel ini awalnya muncul di majalah Desainer Web. Berlangganan di sini .

Ingat - selalu pikirkan pengguna

Generate - the conference for web designers

Saat memperkenalkan efek mewah ke halaman yang perlu dimaksudkan, Anda harus memikirkan pengalaman pengguna.Dan inilah yang freelance front-end Pengembang Sara Soueidan akan mengungkapkannya 'Menggunakan CSS (dan SVG) untuk kebaikan UX' Bicara di Hasilkan London 2018. .

Dalam ceramahnya dia akan menunjukkan berbagai kemungkinan yang ditawarkan CSS untuk meningkatkan pengalaman pengguna UI Anda secara keseluruhan, menggunakan CSS (dengan taburan SVG dan JS di sana-sini).

Pastikan Anda tidak ketinggalan. Dapatkan tiket Anda sekarang.

Artikel terkait:

Buat efek teks goyah dengan Javascript
Buat efek teks neon yang bersinar
Cara Membuat Teks Render dengan sempurna

Buat efek teks uap animasi

01. MEMAKSIKAN DOKUMEN HTML

02. Konten HTML

03. Penundaan animasi otomatis

04. Jumlah detik

05. CSS WHUR.

06. memulai animasi

07. Bingkai Animasi Akhir

Ingat - selalu pikirkan pengguna

Bagaimana caranya - Artikel Terpopuler

Cara mengatur dan mengoptimalkan Smugmug Storefront Anda

Cara Membuat Halaman Komik

Bagaimana cara melukis gelombang realistis di Photoshop

Seberapa gertakan bekerja di aplikasi 3D

Power A blog menggunakan API WordPress

cat kartu tarot asli

Buat Meteor Shower dalam 3DS MAX

Bangun tata letak kompleks dengan Postcss-Flexbox

Kategori