Apply Parallax & Zoom Effects To Images On Scroll Using jQuery

This is a simple jQuery & CSS/CSS3 solution to apply subtle parallax, zoom and blur effects to any images as you scroll down the web page.

How to use it:

1. Add an images into a container.

<header class="parallax-zoom-blur">
  <img src="https://unsplash.it/1800/1200?image=883">
</header>

2. The primary CSS styles.

header {
  overflow: hidden;
  padding-bottom: 55%;
}

@media (min-width: 600px) {

header { padding-bottom: 50%; }

}

@media (min-width: 700px) {

header { padding-bottom: 45%; }

}

header img {
  width: 100%;
  max-width: none;
  position: fixed;
  top: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

3. Load the latest version of jQuery library at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

4. Enable the parallax / zoom / blur effects on the header images using window scroll.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $(".parallax-zoom-blur img").css({
    width: (100 + scroll/5)  + "%",
    top: -(scroll/10)  + "%",
    "-webkit-filter": "blur(" + (scroll/100) + "px)",
    filter: "blur(" + (scroll/100) + "px)"
  });
});

---

This awesome jQuery plugin is developed by derekjp. For more Advanced Usages, please check the demo page or visit the official website.