![]() ![]() The site doesn't do much with the background, but does a beautiful job moving imagery within the content - sliding, floating and fading.Įven heavy hitters like Nike are getting in on the fun. The website for upcoming Drupalcon Denver has been highly acclaimed for its parallax effects. The content on the page is a third layer and also moves at a different speed. The clouds layered over the ocean creates an visually interesting bird's eye view. So many web gurus have turned the technique on its side and created the parallax illusion vertically. ![]() By my estimation, they're still getting the hang of vertical scrolling and their brand-spanking-new browser, IE7. Typically, horizontal scrolling is frowned upon by user experience experts because the general population just isn't ready to scroll horizontally. Notice the illusion of depth created by the landscape layers. Use the scroll bar at the bottom of the page to move from left to right. Eric Johansson uses parallax scrolling in a horizontal manner. Let's start with an example similar to the anecdote I've laid out above. Then, as the user scrolls through the website, the layers move at different speeds, creating a perception of depth. The stripes on the road, the trees, the mountains and the sun all become a separate background image. So how does this translate to the web? Basically, we slice up the scene into layers. We perceive each of these elements moving at different speeds and this phenomenon contributes to our perception of depth. And the setting sun doesn't seem to moving at all, does it? Now, relative to your seat in the car, what do you perceive to be whipping by the fastest? The striped center line on the road, right? The trees on the side of the road aren't moving quite as fast, but they're faster than the mountains in the distance. You're in the back seat staring out the window, taking in the beautiful view. ![]() Picture this: You've taken the scenic route to Ma's house for Thanksgiving. Parallax techniques use well defined imagery, JQuery and CSS3 to create a truly unique browsing experience. Throw out your misconceptions that Flash and video are the only ways to achieve the third-dimension. I could've given the full code, but I wanted you to do something.If you want further help, ask that in comments.One of the hottest new trends in web design is a technique called parallax scrolling, which is the latest addition to a growing list of effects used to create a sense of depth on a web page. In case you're wondering how to find dy, dx, here's how to do that. From that, dy, dx are calculated and are set as the top, left properties of css for C (which is absolutely positioned). Every time you scroll down/up, D is recalculated. So, D is given by the relation/formula shown in the figure. There's an angle between C and A which depends upon you - set it to any number (radians is the preferable unit). Theta => (predermined) angle between A, C K => any constant > 1 (experiment for good results) The central element here is called 'A' and the moving one - 'C'. In the image here, elements are marked with circles and a name given to them (only one moving element given for simplicity, others too can be added). As you scroll more, their distance from the this central element reduces - inverse proportion. ![]() The basic idea is that all the elements that move have some distance from a central/non-motile element. The image here shows how the idea works, according to me. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |