Cool vertical parallax page scroll effect.

[Historical Forums User]

http://www.elderscrolls.com/skyrim/overview/

Has anyone else seen the parallax on the “Elder Scrolls V: Skyrim” site? I thought it was a nice, and appropriate, way to incorporate a vertical parallax effect (which I think is more applicable to many sites). I won’t walk through how it’s accomplished, but here is the function which is called on “domready” pulled from their ‘page_fade.js’ file.

function addParallaxScrolling() {

if (!$("bgImageTop")) {

return

}

if (window.orientation == undefined && !Browser.firefox) {

var body = document.getElement("body"),

headerimage = $("bgImageTop"),

headergrad = $("bgGradientTop");

window.addEvent("scroll", function windowScrollEvent() {

body.setStyle("background-position", "0px " + (this.getScroll().y / 4) + "px");

headerimage.setStyle("top", this.getScroll().y / 4 + "px");

headergrad.setStyle("top", headerimage.getStyle("top").toInt() + headerimage.getStyle("height").toInt() + "px")

})

}

}

[sliver37]

I love the way they didn’t overdo the effect, left it nice and subtle (obviously looks bad when scrolling with the mouse wheel though).

On a side note I totally forgot about the next elders scrolls title, thanks for sticking it back in my sights!

[infocentre]

It’s nice, but if you use a scrolling-wheel it looks jerky and weird. I actually didnt realise what you were talking about at first as i used my wheel.

REALLY nice when you use the bar though – trippy!

[Historical Forums User]

Yeah, I agree with you guys, it is mighty jerky if you have a scroll mouse which step-scrolls (for lack of a better term). I wonder if there is a smoother way of creating that effect.

[TheDoc]

Also couldn’t tell until I used the scroll bar, which I think is perfect.

The best effects are the ones that the user doesn’t notice, imo.

[Historical Forums User]

@TheDoc – yup, subtle effects are very nice. I think I remember a post a few weeks ago asking for examples of ‘easter eggs’, and while this may not match that full definition, I still think its a special reward for those who notice it.

The part that really makes this for me is the second ‘stone’ background halfway down the page. It’s a nice visual cue that makes users feel as if they are descending down into the earth.

I wonder how well this effect would work for other instances of rising or descending. I imagine an application where you could descend from the clouds, a cloud passing in-front of content from time to time. It’s nice to point out small things like this.

@sliver37 – yeah, this game should be epic. :-)

[sliver37]

Thanks for the resources Mottie!

It’s fun playing around with this effect, can get some amazing results. For example using all three planes (foreground in addition to middle and back) you can create a fairly convincing 3D effect.

This would fit perfectly to those sites that are essentially one giant page, navigated by a smooth Jquery scroll targeting anchor tags. Especially if you add a subtle motion-blur. ;)

I almost wish I had of chosen this type of theme for my current project (class, not client) just to play around with it a little more.

[mcguiver178]

I am using the jquery.scrolling-parallax.js does anyone knows how to make an element move horizontally when you scroll down vertically?

[williammalo2]

I have a very simple script to do this, no jquery! :
onscroll=function(){document.body.style.backgroundPosition=”0 “+(-(pageYOffset/2))+”px”;}
you need to have this:
background-attachment: fixed;
in your css also =)

[cheatindave]

Would it be possible to combine a vertical parallax with anchor scrolling to create something similar to this

http://activatedrinks.com/#/products

It’s a very Nice effect. nice site too

[DrCLue]

If one’s event driven Javascript animations exhibit jerkiness, it’s often a good idea to de-couple the events from the animation routine itself.

Have the event handler simply store the values and do no actual animation itself

Have a separate interval pumped function read those values periodically and perform whatever animation.

Often the issue is that events occur too quickly to be properly serviced (event overrun) and frequently the difference between one event’s values and the next are not really worth servicing anyways.

If one has a situation where events come too fast AND the values may change a great deal, it’s still a good idea to decouple , but just have the interval function incrementally
walk towards the values which has a smoothing effect.

[Author]

Posts