In our index.html file, just before the closing body tag, add a reference to the script. We can use Rellax to have these elements scroll at different speeds. To get started we have a space-themed page taking us on a trip to the moon. Let’s use it to bring our page some parallax movement. It’s worth taking a look through how this was built if you’d like to see how a nice simple JavaScript utility can be written and shared. It sets up a loop variable using “requestAnimationFrame”, and then in each iteration uses CSS to translate each object by a calculated offset. Looking into the code we find that it’s using a very similar approach to our “show-on-scroll” code. It’s lightweight and has no need for jQuery, and we can call it in from either local file or by using a CDN. The JavaScript utility Rellax is a handy, and quite simple plugin created by the design agency Dixon and Moe. In this example I’m using a tool called Rellax. This means that if I was to scroll the page up by 100 pixels, the “faster” box actually scrolls something like 130 pixels, and the “slower” box moves about 70 pixels. To it’s left is a box that scrolls faster, and the box on the right scrolls slower. The box in the middle, marked “No parallax” is scrolling at the same speed as the page. In this example we see how parallax works when scrolling a website.Įach of these boxes scrolls upward as I scroll down the page. The technique is popular in many places including video games, where it’s usually seen in the layered backgrounds. If we’re moving, we see objects close to us move faster than objects further away. It’s a popular effect that can be used to create an illusion of depth. Parallax movement is when things move at different speeds relative to each other.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |