Membuat Efek Zoom Pada Background Sebuah Halaman

Membuat sebuah halaman, misalnya halaman statis pada blog akan terlihat lebih menarik bila menggunakan suatu efek tertentu. Menambahkan sebuah background bisa menjadi salah satu opsi, namun pada artikel ini Anda dapat menambahkan efek zoom atau membesar pada background saat halaman tersebut di-scroll. Anda dapat melihat demonya pada halaman dibawah :

DEMO

Membuat efek zoom tersebut membutuhkan tambahan kode CSS maupun Javascript yang dapat Anda tambahkan pada blog Anda.

body{padding:0;margin:0;font-family: 'Roboto', sans-serif;}
.aiiplan {
  position:fixed; 
  top:0; 
  z-index:0; 
  width:100%; 
  padding-top:50%; 
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IEWvXQS7JzZGLklvqi-Jj73QX83beiUHo-HqFKOx0bwNurE2SvWdbfZifJHrMfGLfxZADBLLhtnSByxPFAoAnoJCqFkACI6xqpPphIVPNyIj_pwdUuVrT6uqHFWBnPWtD8ahW6oz5xg/s320/stars-in-the-sky-digital-art-hd-wallpaper-2560x1440-2122.jpg) center center no-repeat; 
  transform:scale(1);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.aiiorr{
  position:absolute;
  background-color:none;
  left:0;
  right:0;
  top:0;
  margin-left:auto;
  margin-right:auto;
  width:50%;
  padding: 60px 40px;
}
.aiiorr h1{
  color:#333;
}
.aiiorr p{
  color:#fff;
}

$(window).scroll(function(e) {
  var scrollSeviye = $(this).scrollTop();
    if(scrollSeviye>2400){
    scrollSeviye=2400;
  }
  var buyutme=(scrollSeviye/6000)+1;
  $('.aiiplan').css('-webkit-filter', 'blur('+scrollSeviye/120+'px)');
  $('.aiiplan').css('transform', 'scale('+buyutme+')');
});

<div class="aiiplan"></div>
<div class="aiiorr">
  <h1>Scroll Ke Bawah</h1>
  <p> Isi halaman </p>
</div>