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 :


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(http://3.bp.blogspot.com/-GQFpSZy29aE/VWVCqV0W-KI/AAAAAAAAAZ0/avB0lT1kJrs/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>
shared

Komentar Terbaru

Just load it!