Iklan parallax adalah jenis iklan digital yang menggunakan efek parallax untuk menciptakan pengalaman visual yang menarik dan interaktif bagi pengguna. Efek parallax mengacu pada ilusi optik di mana latar belakang bergerak dengan kecepatan yang berbeda dibandingkan dengan elemen-elemen di depannya saat pengguna menggulir halaman.
Dalam iklan parallax, latar belakang dan elemen-elemen lainnya dalam iklan tersebut dianimasikan dengan cara yang berbeda, menciptakan ilusi kedalaman dan pergerakan tiga dimensi. Ketika pengguna menggulir halaman, elemen-elemen di depan mungkin bergerak lebih cepat daripada latar belakang, memberikan efek kedalaman dan imersi yang lebih besar.
Iklan parallax dapat digunakan dalam berbagai format, seperti iklan banner, iklan halaman penuh, atau bahkan dalam pengalaman interaktif yang lebih rumit. Efek parallax dapat membantu meningkatkan keterlibatan pengguna dengan iklan, karena memberikan pengalaman yang lebih dinamis dan menarik.
Iklan parallax biasanya dikembangkan menggunakan teknologi web seperti HTML, CSS, dan JavaScript. Namun, seiring dengan perkembangan teknologi, iklan parallax juga dapat diterapkan dalam format lain, seperti iklan video atau iklan interaktif berbasis aplikasi.
Penting untuk dicatat bahwa iklan parallax harus dirancang dengan hati-hati agar tidak mengganggu pengalaman pengguna atau memperlambat waktu pemuatan halaman.
Tutorial memasang iklan parallax pada blogger:
1. Buka Blogger.
2. Ke menu edit tema dan tempatkan kode di bawah ini tepat di bawah kode <head> atau </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
position: relative;
overflow: visible;
width: 300px;
height: 250px;
margin-right: 20px;
display: inline-block;
float: left;
z-index: 9999;
}
.paralax_div > div {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
width: 100%;
height: 100%;
position: fixed;
top: 0;
margin: 0 auto;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.paralax_div > div > div > div {
width: 100%;
height: 100vh;
position: absolute;
left: 50%;
top: 0;
border: none;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: #ddd;
}
.paralax_div > div > div > div > * {
margin: 0;
margin-top: 0;
}
.paralax_div > div > div > div > a {
width: 100%;
height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
height: 600px;
width: 300px;
}
.clear {
clear: both;
display: block
}
@media screen and (max-width:640px) {
.paralax_div {
width: 100%;
height: 250px;
margin: 0 auto;
float: none;
}
.paralax_div > div > div > div {
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.paralax_div > div > div {
width: 100%;
left:0;
text-align: center;
}
.paralax_div img {
margin: 0 auto;
width:auto;
max-width:100%;
height:auto;
}
}
@media screen and (max-width:320px) {
.paralax_div iframe,.parallax_banner ins {
margin: 0 auto;
width:100%;
height:600px;
}
}
/*]]>*/
</style>
</b:if>
3. Kemudian dilanjutkan dengan meletakkan kode pemanggil di bawah ini di bawah <div class='post-body entry-content'
<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
PASTE KODE IKLAN YANG SUDAH DI PARSE DISINI
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>
4. Tempelkan kode iklan pada text yang sudah diberikan.
5. Setelah semua selesai silahkan save dan lihat hasilnya.
Anda harus ingat, kode iklan yang akan dimasukkan adalah kode iklan yang sudah di parse.
Terimakasih...
