Apple Batteries

by myrluk3

HTML

<section class="section section-batteries section-gradient section-nopadtop" data-analytics-section-engagement="name:battery">
    <div class="section-content">
        <figure class="battery can-reveal will-reveal reveal ">
            <div class="battery-base image image-battery-base"></div>
            <div class="battery-layer battery-layer-2a image image-battery-2a"></div>
            <div class="battery-layer battery-layer-2b image image-battery-2b"></div>
            <div class="battery-layer battery-layer-1a image image-battery-1a"></div>
            <div class="battery-layer battery-layer-1b image image-battery-1b"></div>
        </figure>
    </div>
</section>

CSS

.section-batteries .battery {
    position: relative;
    z-index: 1;
	margin-top: 123px;
    margin-left: 30px;
}

body {
    background-color: #fff;
    color: #333;
    font-style: normal;
    font-family: "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 18px;
    line-height: 1.45;
    font-weight: 400;
}

.image-battery-base {
    background-repeat: no-repeat;
    background-size: 911px 378px;
    height: 378px;
    width: 911px;
    background-image: url(http://images.apple.com/v/macbook/e/design/images/design_battery_base_large.png);
}

.section-batteries .battery.did-reveal .battery-layer {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.section-batteries .battery.reveal .battery-layer {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 1000ms ease;
    transition: transform 1000ms ease;
}

.section-batteries .battery.reveal .battery-layer {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 1000ms ease;
    transition: transform 1000ms ease;
}

.section-batteries .battery-layer-2a {
    left: 290px;
    top: -28px;
}

.section-batteries .battery-layer {
    position: absolute;
    z-index: 1;
}

.image-battery-2a {
    background-repeat: no-repeat;
    background-size: 550px 147px;
    height: 147px;
    width: 550px;
    background-image: url(http://images.apple.com/v/macbook/e/design/images/design_battery_2a_large.png);
}

.section-batteries .battery-layer-2a {
    left: 290px;
    top: -28px;
}

.section-batteries .battery-layer-2b {
    left: 387px;
    top: -69px;
}

.section-batteries .battery-layer-1a {
    left: 69px;
    top: 95px;
}

.section-batteries .battery-layer-1b {
    left: 119px;
    top: 51px;
}

.image-battery-2b {
    background-repeat: no-repeat;
    background-size: 430px 106px;
    height: 106px;
    width: 430px;
   ...

JavaScript

setTimeout(function(){
	$('.battery.can-reveal').addClass('did-reveal');
}, 1000)