Do you like to explore the code of other front-end developers?
And do you know that it’s the best way to learn new techniques of coding?
In this new series of articles I will be featuring interesting demos and code snippets from CodePen.io and you can take them apart, break them and learn something new.
I have received many messages and a positive feedback regarding my recent parallax website tutorial. Based on your feedback I have decided to create another tutorial, this time aimed more towards a junior and mid developers.
I will try to explain everything in more detail and you can also download the starting files to follow the tutorial step by step.
Today’s parallax website tutorial is a detailed explanation of the Parallax Scrolling Effect using Skrollr.js published a few weeks ago.
You will learn how to create a simple parallax scrolling website using Skrollr.js plugin.
I would like to take a minute and thank all my clients and YOU all my valuable readers for being a part of this amazing journey. You all made the 2013 a very special one.
I hope you enjoyed some of my posts, and a big thank you for leaving a comment or sharing on social networks. It makes a big difference and helps to create a better community of curious web developers and designers. A community where we learn by doing and where we share what we learn. This ultimately helps us to create a better websites for our clients and customers.
And now to the fun part of this festive season.
You may have seen the Discovershadow.com site, where the initial header image zooms in and fades out once you scroll down the page.
Pretty slick effect would you say, huh? Today I’m going to show you how you can accomplish a similar effect on your next project.
I must admit, I am not the biggest fan of parallax websites, but it looks like it’s still a very popular effect for web designers. On my recent project for one of my clients, I was asked to create a simple parallax effect on the home page and actually quite enjoyed playing around with different settings and effects.
Today I’d like to share with you a simple demo of a few parallax effects created using Skrollr.js.
If you like the Foundation CSS framework, you probably know that a new version 5 came out a couple of weeks ago. One of the new features Offcanvas menu is a nice addition to the most advanced responsive front-end framework in the world. While it works like a charm straight out of the box, you might run into an issue in IE9.
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.