WebAppers

/ best free open source web resources /

Shopify

How To Create A Scrolling Background Effect

Posted · Category: Information, License Free

Would you like the Scrolling Background Effect like youlove.us? The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

The JavaScript is where the real magic happens. They have made use of the jQuery library and Alexander Farkas backgroundposition.js script to help them make the background move. The final result looks very nice. However, it might consume a lot of your CPU resources.

Scrolling Background Effect

Requirements: jQuery Framework
Demo: http://youlove.us/blog/the-youloveus-scrolling-background-effect…
License: License Free

6 Comments
  • Juan

    In all the computers I’ve tested this page, firefox uses more that 90% of the processor when the page is opened. That can’t be good…

  • rosinaaa

    thanks for the info! its a nice effect!

  • http://koodough.com Koodough

    The scrolling webpage used 80% from one of my cpu cores on my iMac 2.4 Ghz using Safari 4.0.1 and Mac OS X 10.5.7

  • Christopher

    The effect is indeed sweet, but the cost to it is impossible to go with!

    80% (and up) of the CPU load for only that page, that’s not a technique I’m going to be eager to see on lots of websites…

  • http://www.applejuice.it applejuice

    sweet but very cpu-stressing

  • http://www.mistral-connexion.com Mistral Connexion

    Very nice, but CPU load is too high!
    I wont use it…

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons