Don’t autoplay heavy media like videos, since in abundance they drastically slow down loading.Long scrolling can have a negative effect on SEO, but this can be avoided by following the advice of Neil Patel from Quicksprout.Disorientation and the inability to go back are the innate drawbacks of long scrolling, but a fixed menu allows users to move freely. If users are searching for something in particular, a more structured navigation system like Amazon’s works better - but for explorability, long scrolling is the fastest and most fun for users. The prominence of mobile browsing supports the long scrolling pattern since smaller screen sizes call for more scrolling.Ĭombined with the infinite scrolling pattern described below, long scrolling can create a completely immersive browsing experience. This works great for social media sites and others with user-generated content, where part of the fun is browsing through everything all at once, and the content is diverse and difficult to categorize because it’s always updating. Var rellaxNonCentered = new Rellax('.A site has so much eclectic content that a multi-page format would be too difficult to navigate.Ī site wants to tell a story in a smooth, linear fashion.Ĭreate a single-page, long-scrolling site to consolidate your content in a single place. We can either do this by adding a data-rellax-percentage value to each of the rocks, or we can set this globally in our original JavaScript at the bottom of the page. This will adjust the element’s position so that when we scroll to it, it’ll still be visible on the page. This means that elements further down the page will have moved more than elements at the top, as by the time we’ve scrolled all the way down there, they’ve been parallaxed to somewhere we may not expect. When Rellax calculates how far to move the elements it does so based on the height of the page. Lastly for planet earth we’ll set it far back into the scene with a speed of “-4”. The next rock is also far back so we’ll give it a speed of “-3”. The next one in front again, so we’ll give a positive value of “3”. The second one is far back so it’s going to have a speed of “-2”. The first rock is a small one that sits in front so we’ll give it a fast speed of “8”. 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. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |