Objects which are closer to the eye have a larger parallax than objects which are in the distance. The actual word parallax is derived from the Greek παραλλαξη (parallaxis) which means alteration. So is it HTML5? Sure HTML5 does have a part to play in the parallax scrolling effect but it's more than HTML5, it also utilizes some form of javascript, such as jQuery, and wouldn't be possible without a little bit of CSS3. Whenever clients ask me for an "HTML5" site, I have to ask them specifically how they interpret the meaning HTML5 - at the moment it just seems to be the buzzword that clients keep saying to me without really understanding what it means. So what exactly is the parallax effect? Well it's probably one of the things that your clients refer to when they blindly say "I want my site HTML5". Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight. When combined with the scrolling functionality of a website, parallax scrolling effects can have a strong visual impact, especially when combined with some form of story which takes you on a journey. More recently it started to make an appearance in web interfaces - you'll be familiar with silverbackapp which used the effect as part of the header. The parallax effect with regard to interfaces has been around since the 1980's when it was first used in video game titles and subsequently in games themselves. The parallax scrolling effect has been popular ever since sites such as Nike's Better World introduced it on their websites a few years ago. Interested in saving some time and making sure you're using modern best practices? There's a great responsive jQuery slider plugin on Envato Market that could do the job perfectly! It's already used on over 150,000 websites.
In this tutorial I'm going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js. One of the biggest trends in recent modern web design is use of parallax scrolling effects.
0 kommentar(er)
