Apple-zoom-out-effect.markdown

Apple zoom out effect

Forked from Marius Balaj's Pen Apple zoom out effect.

Forked from Gregor Adams's Pen Apple zoom out effect.

A Pen by Captain Anonymous on CodePen.

License.

index.html

    <h1>Just scroll!</h1>

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

    <div class="content">
        <h2>Apple iMac scrolling effect.</h2>
        <p>
        iMac 27" mockup by <a href="https://dribbble.com/shots/438772-iMac-27-Fully-Scalable-PSD" target="_blank">Koy Carraway</a>.<br/>
        Picture from <a href="http://wallwidehd.com">WallWideHD</a> - Transfagarasan.<br/>
        Read more about Transfagarasan <a href="http://en.wikipedia.org/wiki/Transf%C4%83g%C4%83r%C4%83%C8%99an" target="_blank">here</a>.
        </p>
    </div>

script.js

$(function() {
  // cache all elements before we do anything

  var $window = $(window);
  var $intro = $('.intro');
  var $mac = $('#mac');
  var $h1 = $('h1');
  
  // define variables and prefill

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

  
  // listen to scroll
  $window.on('scroll', function() {
    windowTop = $window.scrollTop();


    // hide intro if point is reached
    if (windowTop >= 940) {
      $intro.hide();
    } else {
      if (windowTop < 200 && windowTop > 100) {
        // only perform in a 100px range
        $h1.fadeOut(500);

      }
      $intro.show();
      scrollPercent = (offset.top - windowTop) / offset.top;
      scale = 'scale(' + scrollPercent + ')';
      $intro.css({
        'transform': scale
      });

    }
  });
});

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,800);

body {
  color: #333;
  font-family: Open sans;
}

h1 {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: 52px;
  z-index: 999;
  color: rgba(255, 255, 255, 0.3);
}

.mac {
  height: 613px;
  width: 764px;
  margin: 1340px auto 100px;
  background: white url("http://i.imgur.com/AyELvGR.jpg") no-repeat 0 0;
  background-size: 764px 613px;
  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;
  transform-origin: 50%;
}

.content {
  width: 500px;
  margin: 0 auto 150px;
}

.content h2 {
  font-size: 52px;
  line-height: 1.0865;
  font-weight: 300;
  margin-bottom: 48px;
}

.content p {
  font-size: 18px;
  margin: 1em 0 0 0;
  line-height: 1.8;
  color: #555;
  font-weight: 400;
}

.content p a {
  color: #555;
  text-decoration: underline;
}