Iklan parallax adalah format iklan yang memanfaatkan efek scrolling (gulir) parallax untuk menciptakan ilusi kedalaman dan dimensi pada layar, mirip seperti melihat pemandangan 3D. Efek ini dicapai dengan membuat elemen latar depan dan latar belakang bergerak dengan kecepatan berbeda saat pengguna menggulir halaman, yang membuat iklan menjadi lebih menarik secara visual.
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