Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
03 Jul

How To Create A Scrolling Background Effect

  • Information, License Free
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Building an Animated Cartoon Robot with jQuery

Building an Animated Cartoon Robot with jQuery

How to Create a Beautiful Background Image Navigation

How to Create a Beautiful Background Image Navigation

Nice and Easy to Implement News Scrolling Tickers

Nice and Easy to Implement News Scrolling Tickers

Design a Golden Flame Text Effect in Photoshop

Design a Golden Flame Text Effect in Photoshop

jQuery for Menu Background Image Animations

jQuery for Menu Background Image Animations

Bits & Pixels: Cross-Browser Transparent Columns

Bits & Pixels: Cross-Browser Transparent Columns

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…

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • A True Responsive jQuery Lightbox Plugin for Free
  • Create an Amazon-like Navigation Menu with jQuery
  • Super Smooth CSS Transitions for jQuery
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • How to Use Web Workers for Image Manipulation
  • How to Make FullScreen Page Transitions with CSS
  • Ghost: A Revolutionary Open Source Blogging Platform
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes25
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code55
  • eCommerce24
  • Framework215
  • Hosting13
  • Information240
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License411
Sponsors
Advertise Here
Partners
MaxCDN