I just saw this sweet Header Animation (http://anchorage-theme.pixelunion.net/) and was wondering how to implement an effect like this on a site. I am quite fluent in html and css and have dabbled with javascript, but never really got in at the deep end. Maybe this is the place to start.
But how would I go about this header?
That's not an animation, that's a technique called Parallax Scrolling.
The idea is to mimic the "Parallax" optical illusion used in 3D tvs to add the effect of depth to the page while it scrolls (i.e. "background" elements move slower than "foreground" elements).
It uses the scroll position of the page to dynamically set position, opacity, rotation, or other attributes of various elements to achieve this effect.
Here's a simple tutorial on it: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
Related
I am trying to re-create an effect I made on my website. This effect consists of a repeating background that scrolls at a greater rate than the foreground. When I created this effect, I used a website builder and framework, but I am now in the process of trying to recreate everything on plain code, and I would like to know if this is possible.
Example Website: www.migte.net
(To see the example effect, scroll down a bit and you will see text saying "Experience Flawless Quality" and if you scroll down a bit more, the effect repeats with lines in the background of a video)
How would I go about having a different scroll speed for the background than the rest of the page? I had tried one solution using web-kit transformations, but it didn't seem to work. Is this possible at all without using some sort of external framework / builder?
All help would be greatly appreciated. Thanks!
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
in a project where I need to build something like the famous parallax-powered Mario Kart Wii Experience site, which also comes with horizontal and vertical scroll (if you haven't seen it, here it is: http://www.nintendo.com.au/gamesites/mariokartwii/#home)
For the scrolling effect, I grabbed the JQuery Scroll Path plugin (website here: http://joelb.me/scrollpath/), and it seems to suit my needs concerning the free scrolling.
The problem comes when I try to include some plugin to generate the parallax effect. I tried several plugins (including Stellar.js, jInvertScroll, Parallax.js, Parallax-JS), but none of them seem to work properly. I assume that there's some kind of relationship between the custom scroll that comes with the Scroll Path plugin and the need of the parallax plugins of working with the navigator scroll to make the effect work.
I searched in Google for some similar situation (i.e., implementing Scroll Path with some parallax plugin) but I didn't find anyone in my current situation, and it seems that the Scroll Path plugin isn't maintained anymore.
Any idea for making it work would be appreciated!
PS: Sorry for the grammar mistakes, I'm still in process of learning english.
To make 2 plugins working together you should understand how they work. Parallax effect is achieved with few layers that are moved with different speed - the closest to you moves fastest, the most distant moves slowest. Most of the parallax-effect plugins are based on scrollTop calculation - i.e. layers are moved depending on current scroll offset multiplied by delta-value (which differs depending on layer position).
In your case you should connect jQuery ScrollPath scroll event to parallax plugin. In ScrollPath you should generate scroll event (that will be handled by parallax plugin) in function scrollToStep (look at row 490 in jquery.scrollpath.js). To make calculations simplier you can use 'top' value applied to scrollbar * some delta (you should pick out delta value by yourself). Then in parallax plugin you should modify event handler that applies parallax effect from scroll/mousewheel to event you generate in ScrollPath plugin.
To connect 2 plugins together you should modify their code which means that you won't be able to easily update these plugins to newer version. You should make comments to all your changes in order to reapply them if plugins will be updated in future.
I have been trying to understand how they did those effects in http://artofflightmovie.com/ with no success so far. I am not even sure what to google for for help. Could any one ellaborate on it and perhaps put links to plugins\tutorials\other websites doing the same thing?
There is already a similar question, but it didn't help me a bit ^^
Custom scroll bar behavior in Javascript?
All of the answers here so far are spot on and cover various pieces of the execution. Joseph's post about how we 'contained' and 'maneuvered' the site are dead-on, and those mentioning jQuery accurately depict our heavy reliance on it :)
With that said, the other concept of moving along a non-linear path was probably the most difficult part. We literally used an Illustrator file that was setup like a piece of graph paper and drew a bezier path that reflected the movement we wanted from the scrollbar. Then we 'downsampled' the path by converting the curved lines into a bunch of straight lines that represented the curve (similar to downsampling audio waveforms) to keep performance/speed high. We took those coordinates, gave them to our designer, and he created a gigantic design file and literally designed each content section at the designated 'stop' points. Next we mapped each coordinate along the path to a percentage value of the scroll position. We stored these values in a JavaScript array. Lastly we wrote some JS functions that we pipe the scroll position through to determine how to offset the positioning of the site 'container'. (It basically 'tweens' between each coordinate allowing us very fine/precise values at any given scroll percentage) The scroll functionality is handled by a tall div that basically sets our document height to force a scrollbar, and we just read it's position during a Scroll Event and slide the container around to where it should be using the above mentioned functions.
The parallax effect is achieved by applying a percentage of the position offset (what we use to move the container around) and applying it to the sub-containers of the various content sections. This makes the subcontainers move slower or faster than the background, but on the same motion path.
Lastly, the little snowboarders and helicopters (which have CSS3 rotations in addition to x,y movement in some browsers!) are positioned by using a simliar array of 'start' and 'end' positions and tweening between them based on the scroll percentage.
I'll leave it at that to keep this from turning into a book, but I'd be happy to elaborate on specifics if you're interested.
Full disclosure: I was lead developer on the site. I'm not posting to 'toot my own horn' or anything like that, just to be helpful and provide assistance to a fellow tinkerer. I come here a lot to dig through and get insight from others. (many, many thanks to those who have helped us!) Also, shameless plug, but the film is breath-taking... go rent it if you haven't yet, you won't be sorry. :)
That's a pretty cool website ;)
Basically using some javascript you can detect how far a person has scrolled. Considering the amount of scrolling you can move the contents of your webpage around if their position is absolute.
There are a couple of jQuery plugins that allow you to do simular stuff although I'm not sure you can "scroll through" a sequence of coordinates.
Here are a couple of jQuery plugins that helps you get simular effects:
http://johnpolacek.github.com/scrolldeck.js/
http://johnpolacek.github.com/scrollorama/
http://demos.flesler.com/jquery/scrollTo
http://webdev.stephband.info/parallax.html
I just picked a couple I'm familiar with but there are many plugins that are alike.
edit:
Decided to add some more simular websites for your pleasure.
http://www.activatedrinks.com
http://www.beetle.de
http://www.nikebetterworld.com
the whole page is an "overlay" - a full width and height wrapper <div>. sort of how modal windows do their "full page shadow" effect and have a small div float inside. the whole page content is in that wrapper. the scroll path is a script. the script captures the body scroll and moves the contents of the div accordingly to the positions provided by the script. with a body long enough to be scrollable (which cannot be seen since the wrapper covers the whole page), it's as if you are scrolling sideways, upwards etc.
an analogy is a modal window. the wrapper is the full-page shade. the modal window is the content. and notice how modal windows stick to the middle? that's using a script to calculate it's position to stay in the middle by moving the modal window down, relative to the page's top. but in that website's case, they move in different directions.
It doesn't seem too complicated.
Using the .scroll(function() {}) in jQuery you listen for a scroll event. When triggered you set the position style (left, top) of the content div to give the appearance of moving sideways instead of down.
I guess you'll need overflow:none property on the div to prevent users from scrolling over the area you don't want them to see.
Sounds like a lot of effort for a clunky user interface in my opinion.
The effect i am refering to is visible at http://whyinteractive.com/showreel. The elements appear to scroll behind and in front of one another at different speeds creating some cool effects. How was this done?
What you are looking for is called the Parallax effect.
You can learn more at sites like:
http://locomotivation.squeejee.com/post/109269802/jquery-parallax-scrolling-build-your-own-1980s-video-gam
http://stephenmcintyre.net/blog/jquery-parallax-scrolling/
UPDATE:
This is pretty much exactly what you need:
CODE: Build a parallax scrolling website interface with jQuery & CSS
DEMO: Parallax Scrolling