iMac Website-Like Page Scrolling Effect with jQuery and CSS3

An awesome jQuery & CSS3 based scrolling effect that shrinks the fullscreen background image into a smaller one within a container, inspired by Apple's iMac with retina 5K display intro page.

How to use it:

1. Create a container with a full size image background.

<div class="intro mac"></div>

2. Create a container with a small size background image.

<div id="mac" class="mac"></div>

3. The required CSS/CSS3 rules.

.mac {
  height: 613px;
  width: 764px;
  margin: 1340px auto 100px;
  background: white url("bg.jpg") no-repeat 0 0;
  background-size: 764px 613px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.mac.intro {
  position: fixed;
  width: 2548px;
  height: 2052px;
  background-size: 100% auto;
  margin: 0;
  top: 0;
  left: 50%;
  margin-top: -300px;
  margin-left: -1274px;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
}

4. Load the latest version of jQuery JavaScript library at the end of the document.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

5. The Javascript to enable the scrolling effect using CSS3 transforms.

function setTransform(el, transf) {
   el.css('transform', transf);
   el.css('-moz-transform', transf);
   el.css('-webkit-transform', transf);
   el.css('-o-transform', transf);
   el.css('-ms-transform', transf);
}

$(function() {
  
  var el = $('.intro'),
    mac = $('#mac'),
    offset = mac.offset(),
    windowHeight = $(window).height();

  $(window).on('scroll', function() {

    $('h1').fadeOut(500);

    var windowTop = $(window).scrollTop(),
      scrollPercent = (offset.top - windowTop) / offset.top,
      scale = 'scale(' + scrollPercent + ')';

    setTransform(el, scale);

    if (windowTop >= 940) {
      el.hide();
    } else {
      el.show();
    }
  });

});

---

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