Pete R. introduced his One Page Scroll to the world a few weeks ago.

He did a great job on replicating the one page scrolling effect used on the new Apple iPhone 5S/5C websites.

I have looked at the animations briefly in my previous post – Apple iPhone 5C page decunstructed

Today I want to show you how these animations were created in a more detailed breakdown.

View Demo →Download Files ↓

Fade in animation on page load

This particular animation isn’t used on the Apple iPhone pages, but you can still use it on your projects and learn how the combination of JavaScript and CSS3 can help your projects.

HTML

<body class="loading"> <section> ... </section> </body>

CSS

.loading { background: url('../img/ico_loading.gif') no-repeat center center; } section { opacity: 0; -webkit-transition:opacity .6s; -moz-transition:opacity .6s; -o-transition:opacity .6s; transition: opacity .6s; } .loaded section { opacity: 1; }

jQuery

$(window).load(function() { // start up after 2sec no matter what window.setTimeout(function(){ $('body').removeClass("loading").addClass('loaded'); }, 2000); });

We are removing the .loading class from the body, after the page is loaded and delaying the page load by 2 seconds.

Warning

To use the above code on a real project, you also need to include fall-back styles for users without JavaScript. Use the .no-js class rendered on the html tag to apply no-js styles.

Reveal animation

This is a really cool effect, and I can see the potential for it to be used on many projects. Simply line up your images floating next to each other and use translate3d to change their starting position, then reset the translate3d value to 0.

#revealAnim .images-container img { -webkit-transition: -webkit-transform .6s .9s; -moz-transition: -moz-transform .6s .9s; transition: transform .6s .9s; } #revealAnim .images-container .back { z-index:2; -webkit-transform:translate3d(-40%, 0, 0); -moz-transform:translate3d(-40%, 0, 0); transform:translate3d(-40%, 0, 0); } #revealAnim .images-container .front { -webkit-transform:translate3d(61.6%, 0, 0); -moz-transform:translate3d(61.6%, 0, 0); transform:translate3d(61.6%, 0, 0); } #revealAnim .images-container .side { -webkit-transform:translate3d(-338%, 0, 0); -moz-transform:translate3d(-338%, 0, 0); transform:translate3d(-338%, 0, 0); } .viewing-page-2 #revealAnim .images-container img { -webkit-transform: translate3d(0, 0, 0) !important; -moz-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; }

As you can see; the animation starts after the page transitions are finished. The .9s is the transition delay and also the length of the page animation.

Animation without a delay

The third slide of the demo moves a few elements into view while the page is animating to its position.

There is no delay on these animations and everything falls into place in .9s , making it a nice and slick effect.

I have used similar transitions and transform methods on the reveal animation. There is no need to repeat the css here.

Animating overlapping elements

This is the cool part of the deconstruction. Moving elements from one slide to the other and changing its offset creates a very eye-catching effect.

HTML

<section id="betweenSlidesAnimEnd"> <div class="fake-content"> <div class="images-container"> <img class="green" src="img/img_green.png" /> </div> </div> <div class="section-content"> <div class="copy-container"> ... </div> <div class="images-container"> <img class="front2" src="img/img_iphone.png" /> </div> </div> </section>

The .images-container has an image with two iPhones side by side and the green iPhone is in a separate container .fake-content . We need these two separate containers in order to move the two images independently.

One Page Scroll renders a class on the body showing which page you are currently at. We will use .viewing-page-3 to change the offset of the .fake-content and move into the view of page 3.

.viewing-page-3 .fake-content { -webkit-transform: translate3d(0, -100%, 0) !important; -moz-transform: translate3d(0, -100%, 0) !important; transform: translate3d(0, -100%, 0) !important; } .viewing-page-3 .fake-content .green { -webkit-transform: translate3d(0, 160px, 0) !important; -moz-transform: translate3d(0, 160px, 0) !important; transform: translate3d(0, 160px, 0) !important; }

This brings the green iPhone into the view on page 3, even though it’s part of the page 4 markup. Cool right?

.viewing-page-4 .fake-content, .viewing-page-4 .fake-content .green { -webkit-transform: translate3d(0, 0, 0) !important; -moz-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; }

Then we reset the translate3d value to 0 to make everything animate into its default position.

Conclusion

I hope that this and my previous iPhone 5C page deconstruction will help you to get your head around CSS transitions and transforms .

Was this article helpful to you? Are you planning on creating a one page scroll website? Share your creations and feedback in the comments below.

You can create similar effect using ScrollMagic, start learning ScrollMagic today.

View Demo →Download Files ↓

Related Aticles