Cara kerjanya
- Ilusi kedalaman: Iklan parallax menciptakan ilusi kedalaman 3D dengan membuat lapisan gambar latar belakang bergerak lebih lambat daripada elemen latar depan saat pengguna menggulir.
- Pergerakan berbeda: Perbedaan kecepatan ini menciptakan kesan bahwa beberapa elemen lebih dekat dengan penampil daripada yang lain.
- Tampilan imersif: Efek ini membuat tampilan iklan lebih dinamis, imersif, dan interaktif, terutama pada perangkat seluler, sehingga menarik perhatian pengguna.
Manfaat
- Meningkatkan engagement: Efek visual yang menarik dapat membuat pengguna menghabiskan lebih banyak waktu di halaman, mengurangi bounce rate (tingkat pentalan), dan meningkatkan rasio klik tayang (CTR).
- Cerita yang lebih menarik: Iklan parallax dapat digunakan untuk menceritakan sebuah kisah atau menyampaikan pesan secara lebih menarik dengan membuat gerakan yang mendalam dan berlapis.
- "Faktor wow": Menambahkan animasi kedalaman dapat memberikan pengalaman yang menonjol dan mengesankan bagi pengunjung situs.
🔧 Langkah-langkah Membuat Iklan Parallax
1. Salin kode berikut:klik untuk menyalin
👇
<!-- Iklan Parallax -->
<div class="parallax-ad">
<div class="parallax-bg"></div>
<div class="parallax-content">
<h2>🎁 Promo Spesial Hari Ini!</h2>
<p>Dapatkan diskon hingga 50% untuk semua produk elektronik!</p>
<a href="https://wa.me/628xxxxxx" target="_blank" class="btn-parallax">Pesan Sekarang</a>
</div>
</div>
<style>
.parallax-ad {
position: relative;
height: 350px;
overflow: hidden;
text-align: center;
color: #fff;
font-family: sans-serif;
}
.parallax-bg {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxx.jpg'); /* Ganti URL gambar iklan */
background-attachment: fixed;
background-size: cover;
background-position: center;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
filter: brightness(0.5);
}
.parallax-content {
position: relative;
z-index: 2;
top: 50%;
transform: translateY(-50%);
}
.parallax-content h2 {
font-size: 28px;
margin-bottom: 10px;
}
.parallax-content p {
font-size: 18px;
margin-bottom: 20px;
}
.btn-parallax {
background: #ff9800;
color: #fff;
padding: 10px 25px;
border-radius: 25px;
text-decoration: none;
transition: 0.3s;
}
.btn-parallax:hover {
background: #e68900;
}
</style>
2. Tempelkan kode diatas:
Di halaman statis atau posting blog, aktifkan mode HTML, lalu tempelkan kode di atas.
Jika mau muncul di semua halaman, bisa ditempel di bagian <body> template.3. Ganti bagian berikut sesuai kebutuhan:
Komentar untuk Kode Script iklan parallax
Posting Komentar