Apple's iMac scrolling effect

Apple's iMac scrolling effect.markdown

Apple's iMac scrolling effect

A Pen by Marius Balaj 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() {
    
    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 + ')';

        el.css('transform', scale);

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

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-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;
  -webkit-background-size: 764px 613px;
  background-size: 764px 613px;
  backface-visibility: hidden;
}

.mac.intro {
  position: fixed;
  width: 2548px;
  z-index:9999;
  height: 2052px;
  -webkit-background-size: 100% auto;
  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%;
}

.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;
}