#Parallax menu html trial#

You may need to show the parallax effect only on specific devices. Transform is for smaller elements and Transform 3D in combination with Parallax Type “Mouse Move” makes the element look like a 3D object. You should choose Background Position if the image of this layer fills the whole background. There are also three options in the drop-down menu here. Contain changes the size of the image in the way it becomes fully visible in the section but doesn’t change its proportions. Cover will resize the image so that it fills the whole section, even if it is stretched or cut on some side. Auto means that the image will be displayed in its original size. This option defines the size of this layout’s picture. This value can also be bigger than 100 and lesser than 0 (it can have negative value). And here you can set the vertical position of this layer’s picture regarding the background image (in percentage terms). Take into consideration that this value can be bigger than 100 and lesser than 0 (it can have negative value). Here you can set the horizontal position of this layer’s picture regarding the background image (in percentage terms). If the pictures overlap each other, the one with a bigger Z-index will be shown on top of those with the smaller Z-index. The number you type into this bar will define the priority of the layer. Take into consideration that this value could be bigger than 100. The bigger this value is, the faster and more visibly this layer’s picture will move. This option allows you to set the speed of movement for this layer. Here you can choose the next image layer that will move over the previously chosen background picture. #bg3-1 else if ($(document).scrollTop() >= section4Top & $(document).

In this case it was really just a process of trial and error. This was the most fiddly part of the process, since the elements need to positioned in such a way that they align in a pleasing manner when the user scrolls to any of the four articles. Within each layer individual content elements are absolutely positioned. Margin-left: -470px /* move left by half element's width */ Left: 50% /* align left edge with center of viewport */ The four layers are: small clouds, large clouds, balloon/landscape images, articles. The articles and background layers are given a fixed positioned with CSS, and assigned a z-index so that the foreground layers appear above the background layers. If you plan on implementing a similar menu on a production site, please be aware of its origin. On a production site you’d want to ensure that the site degrades gracefully on mobile devices, where scroll events and fixed positioning might work in unexpected ways.ĭisclaimer 2: The navigation menu in my demo is inspired by the menu on the Nike Better World website. I wanted to keep the demo lean ‘n’ mean, and not clutter it by sniffing mobile browsers and forking my code. The scrolling looks smoothest in Safari (at least that’s the case on my PC), but my demo should work in any modern browser.ĭisclaimer 1: Because this is just an experiment I’ve not spent any time optimising the demo to work on mobile devices. As you scroll, the page’s four content layers are animated independently of one another to create an illusion of depth. You can scroll in the usual fashion, use the navigation menu at the right-hand side of the page, or the next/prev buttons that appear underneath each article. My demo web page shows one approach to building a vertical parallax scrolling interface: Parallax scrolling uses the same principle to trick the viewer into thinking they are observing a 3d scene. When you observe the landscape from a moving car, objects closer to the car appear to pass you faster than scenery further away. Parallax scrolling is a 2d animation process that creates an illusion of depth by animating foreground layers faster than background layers. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.Įven if you’re not familiar with the term “parallax scrolling” you will certainly be familiar with the technique. Parallax scrolling website interfaces have been popping up all over the place recently.

Build a parallax scrolling website interface with jQuery and CSS

#Parallax menu html trial#