Our scrolling background effect
We’ve had a lot of questions regarding the background effect on our new site – so I thought I’d explain how it works, to save you the trouble of picking through the source code. Feel free to base your own designs on this technique, but don’t just straight up copy our code and images – we’ve spent a good amount of time on this.
If you’re feeling nice give us a mention on your web site/blog/twitter/facebook/bebo/myspace or to your mates down the pub.
How it works
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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.
The images
We’re using four images for the whole effect, but you could make it worth with just the background and header if you wanted.
The CSS
To keep the search engines, screen readers and pre-historic browsers happy we’ve also overlaid all content and headings on the top of the images, and hidden them via CSS.
The JavaScript
The JavaScript is where the real magic happens. We’ve made use of the jQuery library and Alexander Farkas backgroundposition.js script and CSS to help make the background move.
The code below makes the whole thing work. The comments should explain what each section does.
$(function() {
// ***
// Scrolling background
// ***
// height of background image in pixels
var backgroundheight = 4000;
// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 60 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);
// calculate which pixel row to start graphic from based
// on how far through the day we are
var offset = backgroundheight / 100 * percentofday;
// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 4);
function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by
// the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 100
);
}
// Start the animation
scrollbackground();
}
The really clever bit…
You may have noticed from reading the code above, but if you come and visit us later in the day you’ll see the background position start from a different place. If you visit us at night, you’ll see a night sky, and if you visit us in the morning you’ll see a sunrise!
If you have any comments, questions or improvements to the script – drop us an email or leave a comment here.
Updated 2009-07-30
After a few comments regarding the processor usage under FireFox 3.5 i’ve updated the script to no longer use backgroundposition.js or jQuery’s animate() method – it now simply changes the body’s CSS background-position value by 1 pixel on each loop iteration. CPU usage on an older machine running FireFox 3.5 went from around 65% to 30%. All other browsers still appear not to struggle with it. Feedback welcome!
Wicked Awesome Stuff. Thanks for the explanation/tutorial. I’ll definitely implement this effect in future designs.
Oh, that’s niiiice. Particularly like how well commented your code is. Gorgeous!
superb, excellent, amazing! – just a few words that come to mind. Seriously though, great effect and great use of some simple javascript to blow peoples minds. I’d say job well done fellas.
Really beautiful merging of design and coding!
I am very impressed and inspired! Thank you for the great tutorial as well.
I love this!
This blows my mind. Incredible. How does it effect slower computers?
Thanks all for the kind comments :)
@Micah: We’ve tested it on a few different setups and not found any serious problems, it’s a lot smoother than the scrolling effect on version one of our site. One thing i’ve noticed on single core systems is that while the effect is running it slows down other apps on the machine. I’m not sure if this is down to jQuery or the code – if anyone has any suggestions to improve performance i’d be happy to give them a go.
Awesome.. thanks for share
It freezes up my FireFox (Windows ver 3.0.11) when trying to scale the browser window horizontally. It should also be noted that the left side of your banner goes beyond the left side of my window. (IE: the first letters I see in the sub-head is “ased full service….”)
Nice effect though.
[...] The youlove.us scrolling background effect expained | youlove.usyoulove.us [...]
No one pointed out the misspelling of the word “explain” in the title? Sorry that that’s the first thing I see, but I tend to have an eye for details. On a nicer note, nice article :)
Hi! The effect is amazing and it’s incredible to have an explanation from you! Thanks!
But I have a few doubts about the code: I can’t understand the mix between (%) and (px) in the same line, and the effect of the (-) in the middle as in:
backgroundPosition: ’50% -’ + startoffset + ‘px’
and:
backgroundPosition:’(50% -’ + endoffset + ‘px)’
Are this lines correct?
Thanks!
wowo great job and smart work really impressive job.
Impressive effect. Thx for the explanation, maybe I will use it in one of my designs.
@Ninjagowoo: I’ve tested the site on FireFox3 on windows and don’t experience the same issues, can you email over your system specs and a screenshot if possible to chris at youlove.us and I’ll take a look into it.
@Mike Bassler: Well spotted, I’m not sure how I missed that! Fixed.
@Changuito: The first value 50% is the horizontal position, which in our use doesn’t change and just keeps the background image centered horizontally. The second value is the one which changes, and the – makes it a negative offset so that it scrolls up the screen, rather than down. For some reason the brackets are required when using the backgroundPosition plugin with .animate() but not with .css().
Thanks again to everyone else for the kind comments.
As cool as it is at lower resolutions, when I bring my browser (Firefox 3) up to even a medium sized resolution for my screen, probably around 1920×1200, it gets pretty slow and jerky. I don’t dare max the resolution at 2560×1600 for fear of the page screeching to a hault, and this is running on an 8800GTX.
Otherwise a cool effect, but I definitely wouldn’t recommend using this on any site where accessibility is a factor.
It was pointed out to me after I pushed the link out to Twitter that the page is a little heavy on CPU. Could just be a case of burning unused cycles, but I saw a spike from about 10-20% usage on a Core2 Duo to 70-80% usage (which dropped off immediately when closing the page).
I found another site using the Alexander Farkas script (http://robot.anthonycalzadilla.com/) with a similar CPU spike.
Didn’t seem to adversely affect anything else happening on my machine, despite the flare up.
Curious as to how Flash would perform the same task. My limited investigation seems to indicate a significant spike, but not quite as high (only to 60-70%).
Had a look at the script, but I’m mostly server-side, so js isn’t my forte. Could be the recursion in your script, or the regex array manipulation in the background positioning script? Maybe just the absence of an explicit sleep (setInterval or jQuery equivalent?) making the loop too active? (The latter probably ensures the smoothest scroll though…)
(I’m using Firefox 3.11 on Ubuntu 9.04…)
Did a little digging…
Didn’t find out as much as i would have liked, but if you’re interested, you can see the results at http://thinkschematwo.com/2009/06/27/javascript-more-than-meets-the-eye/
Really nice effect, I’ve been waiting so long for you to explain it.
Clever, very clever. Thanks for showing us how to use it!
I’ll certainly use it for my websites and link back to you ;)
Erm, just replying one more time, is there a way to make it less CPU-consuming on Firefox?
Though, there’s no “chopping” on IE7, Opera & Chrome.
Again, nice work, man.
[...] The youlove.us scrolling background effect explained | youlove.usyoulove.us [...]
Cool! Would be even cooler if you’d store the actual position of the scrolling via ajax when you switch to another site and recall it there… got the idea?
really stunned I love.us !
[...] background effect – http://youlove.us/blog/the-youloveus-scrolling-background-effect-explained [...]
It is definitively impressive, though I will write an article about this into spanish.
Hi
Awesome work guys. Love it Love it Love it! Just one thing. Its doesn’t appear to work in IE6. Is there any particular reason for this? (P.S I am awre that IE6 is poo! :-) )
Amazing. Really awesome… thank you
Magic. Opens up all sorts of creative possibilities. Have tweeted this @accessibleweb
Thank you very much for this, I’ve been visiting your website since the launch waiting for this to be revealed, I had an idea it involved transparent pngs and I have seen the night and day effect done via loading different CSS files depending on the time but you have tied all this together very nicely.
One thing I noticed about your text is that it is still highlightable i.e. your H3 text can be selected and indexed in Google. Have you used SIFR to achieve this? I’m sure that SIFR cannot support transparent fonts? Unless I’m feeling a bit blind I can’t see the explanation for this anywhere… Im obviously going to give this a go myself but I’m just curious how you achieved it?
Thank you very much for this though and what a great job you have done! You all deserve a medal!
Craig
UK
[...] ¿Como hacer un background que se vaya moviendo? Mmmm suena algo raro, pero veanlo en la página del tutorial y lo van a entender. 0 # [...]
This is really cool and clever :-) Thanks for sharing your techniques!
[...] el blog de la página podemos encontrar un articulo donde comparten y explican el código [...]
[...] Would we similar to the Scrolling Background Effect similar to youlove.us? The technique is essentially the lot easier than it looks, it’s formed [...]
[...] Web: youlove.us/blog/the-youloveus-scrolling-background-effect-explained [...]
[...] The youlove.us scrolling background effect explained | youlove.us (tags: background webdesign animation jquery tutorial) [...]
[...] more from the original source: The youlove.us scrolling background effect explained | youlove.us Tags: Comments0 Leave a Reply Click here to cancel [...]
I love the effect, but I think there is a missing last line to make the script work. Line 47 should have a closing parenthesis and a semi-colon to make the code work.
[...] di YouLove per creare un immagine che cambia colore con il passare del tempo. (Articolo in inglese) Continua a leggere… AKPC_IDS += "3379,";Ciao! Sei nuovo/a da queste parti?, perchè non ti iscrivi al feed RSS per [...]
Why are you using essentially a recursive loop?
That’s probably what’s causing the memory usage overload/leak and CPU overload 60% CPU on my 1.82Ghz C2D.
I don’t know. I may be misreading the code?
Cheers
[...] here is an interesting background effect, its very effective and very pleasing, it consists of having a background rolling upwards, but very [...]
LOL! Could you please make your super-cool-script don’t use CPU so heavily? :-D
[...] Demo: http://youlove.us/blog/the-youloveus-scrolling-background-effect-explained [...]
[...] The youlove.us scrolling background effect explained via youlove.us [...]
Cheers for the explanation. Something new to add to the book of tricks ;)
Beautiful… One thing that I have noticed it that it chews through a lot of system resources (even for a decently spec’d computer). Also plays havoc on the user comment boxes! Think its a great concept just needs to be executed propperly.
[2009-07-06] The youlove.us scrolling background effect explained | youlove.us…
headerの画像の背景（宇宙）が自動で移動する。
なかなかおしゃれなjs発見。
宇宙の背景が永遠とスライドしてます。
しかし若干重いのが難点。…
So simple but cool. Thank you for this tutorial.
[...] The youlove.us scrolling background effect explained | youlove.us How To Create A Scrolling Background Effect (tags: jquery webdesign css javascript tutorials) [...]
[...] In: Design inspiration 6 Jul 2009 Go to Source [...]
Oh wow.. Just that simple. I figured it was a graphics effect – very neat. Well done too :) It’s amazing how we put in all of this work for one small effect – but generally it’s the small things that matter most.
[...] How it Works [...]
Great effect. Not seen before, and that’s a good thing.
Wow, thought that was a long backgroung animation for a second or maybe flash. That is awesome man, thanks for this. I will share this with my favorite community Moparscape now :).
Very nice effect, even if it is a bit of a CPU hog in Firefox.
I’m not sure I’d agree with Kit Allen’s remark about the ‘well-commented code’. I mean
// height of background image in pixels
var backgroundheight = 4000;
seems a little redundant. But still … that means the code is largely self-documenting. Well done.
Pegs my CPU on Firefox 3.5.
Not a very socially acceptable thing to do, that.
Pretty, though.
This is so simple and yet amazing effect. Great work!
[...] Flashy website with some interesting navigation… [...]
This effect make the website very laggy on my big screen resolution (on a macbookpro).
Please improve it or remove it.
[...] The youlove.us Scrolling Background Effect Explained [...]
[...] Flashy website with some interesting navigation… [...]
Super!!!
This is creative and inspirational work. Thanks a million for sharing it. You rock!
[...] set dimension. You can create really effective backgrounds without using Flash. See the examples at youlove.us scrolling background effect explained RSS 2.0 | Leave a Response | [...]
Pretty bealtyful, but too heavy! I’m using a very fast computer and unfortunaly this script is very slow. My browser(last firefox) is crashing because this script is very heavy
:(
[...] » The youlove.us scrolling background effect explained | youlove.us [...]
Hi All,
Thanks one again for all the feedback. A few of you mentioned that there was some excessive CPU usage on FireFox on the PC – after some testing and tweaking I’ve got the CPU usage on our test machine from 65% down to 30%.
@John C – I’d agree that comment in particular is probably a bit overkill, but someone new to JavaScript may not realise the height is specified in pixels and do something like
which would kill the calculations. I wouldn’t usually be that verbose unless I knew others would be reviewing/using the code.
didn’t work in IE
@nikkibryan – The effect doesn’t work in IE6, however it does work in IE7 and IE8. It won’t work in IE6 as IE6 doesn’t support PNG alpha transparency. There are workarounds for this but they have been very CPU intensive in our testing. I’ve just checked our usage stats in Google Analytics and only around 2% of our site traffic comes from visitors using IE6. We’re considering adding in a prompt for users running IE6 to upgrade their browser.
hello sir i am shivam sharma . can you please tell me that
how to make stop scrolling backround image , i mean i want that my web page will scroll but without backround image see my site and pls help me .
[...] The youlove.us scrolling background effect explainedThe 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
Nice effect :)
But why didn’t you save the background position in a cookie? Save the position every 1 or 2 seconds, so that when you change pages the effect continues where it stopped and does not start all over again.
@Pelle – Thanks, That’s a great idea, I’ll look into implementing it :)
very courteous of you to implement a less CPU intensive version….
the concepts been in the back of my mind for a bit, but this site is a major kick in the @$Z!
[...] The youlove.us scrolling background effect explainedThe 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
[...] When I first saw You Love Us I fell in love with the scrolling background. Using some clever transparent PNG techniques and a scrolling background they created something very impressive and unique. They explained how they did in this tutorial. [...]
Freakin’ great!
Sure thing my site will have this piece of gold.
Thank you all for your kindness.
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
yeah … all nice and stuff … but did you see you have a nasty problem with the width of your divs here man ?!?
try resizing the window and scroll max right . see what happends.
i suggest min-width . and for ie look for the min-width fix
cheers ;)
Just wanted to know how big the images are that are scrolling? Are the all the same size as the main header image?
Very slick!
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
[...] 35.The youlove.us scrolling background effect explained [...]
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
thank you so much. I have learned a ton from this explanation and from looking at the way your code is written and organized.
very cool! I will absolutely credit you in my files. thanks!
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
[...] The youlove.us scrolling background effect explainedThe 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
Nice effect, but causes too much of a performance hit to be worth using it. Flash would be better suited for this effect.
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
[...] The youlove.us scrolling background effect explained [...]
[...] The youlove.us scrolling background effect explainedThe 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
It is indeed a nice effect, however it does still eat a shed load of my processor and takes about a minute to load properly. I am using FF3.5.
[...] jQuery jQuery plugin – Easy Image or Content Slider Animate Image Filling Up Using jQuery The youlove.us scrolling background effect explained Fullsize A New IMG Tag Attribute Sliding Boxes and Captions with jQuery Smooth Div Scroll ColorBox [...]
[...] Ver demostración y tutorial [...]
[...] The youlove.us scrolling background effect explainedThe 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
just let love be
[...] La spiegazione di questo effetto potete leggerla qui http://youlove.us/ [...]
I love jquery effects and this is absolute great effect. Good work youlove.us team!
[...] 4. Scrolling Background Effect [...]
Thanks, really cool!!!
[...] 4. Scrolling Background Effect [...]
[...] Эффект движение фона. Создатели сайта youlove.us, придумали интересный эффект, [...]
I just wanted to let you know guys that this site still crashes in Firefox 3.5.4! CPU jumps to 74-87% and whole browser starts crashing and lagging. Thank you for sharing this clever and really awesome technich with us!
[...] The youlove.us scrolling background effect explained | youlove.us (tags: jquery webdesign javascript background animation effect tutorial) [...]
[...] Efectos de scroll para el fondo. Ejemplo. [...]
[...] 4. Scrolling Background Effect [...]
[...] 4. Scrolling Background Effect [...]
[...] 4. Scrolling Background Effect [...]
[...] you like to have something special on your webpage? YouLove.us explains how you can create nice eye catching scrolling background effect based on very tall gradient [...]
Awesome.
very nice thanks
[...] the actual code used to make this all happen, please go to: http://youlove.us/blog/the-youloveus-scrolling-background-effect-explained. posted under Diary, [...]
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
Very nice indeed. But how to vary the speed of scroll?
[...] Ver tutorial I y descargar código [...]
Awesome n Amazing concept .. :)
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
This effect gives a strong load on the processor
Dang, I love it, but it just brings my already JS intense site down to a crawl.
Why did you use setTimeout instead of setInterval? Doesn’t effect speed much, but it’s way cleaner.
This would be great as a jQuery “background scroll” plugin. Just make it autodetect the width of the background image of the element you call the function on. Then you could make the background image of any element scrolling by $(“elem”).scrollBackground();
i like it and will use it sowemtime
[...] Ver tutorial I y descargar código [...]
[...] The youlove.us Scrolling Background Effect Explained [...]
My CPU is at 100% on Firefox 3.6, and the animation is very jerky, it’s much better on Chrome btw. My PC is Windows 7, CPU is 2.6GHz intel Core 2 Duo, screen res 1024×1280 (it’s in portrait mode).
Just to add, this thing is more CPU intensive and more jerky the higher your screen res, so much so that my CPU fan starts to spin up and whirl like mad just from reading your website. Not acceptable.
Very nice concept. I like it !
It’s a good idea to animate discreetly the top page on this way.
Very much like the effect, although i have to admit my FF 3.5.2 doesn’t seem to cope very well, using about 50% of the CPU resources.
Besides that, it only seems to work on mouse movement (which it, looking at the code, isn’t meant to…).
Amazing!!! Thanks for this tutorial.
safari does struggle with it. running smoothly but uses 95% to 100% cpu.
love the effect though:D
same with chrome, both on a macbook pro.
Nice effect, but not all that new or original. I played with the same idea a couple of years ago (late 2006): moving backgrounds on GoedDesign.nl.
Very nicely done with the beautiful BG-pic though!
bugger, forgot to include http in my link: moving backgrounds on GoedDesign.nl.
Important to get the script working:
If you delete that, the script won’t work!
Does this effect degrade on browsers that don’t natively support a PNG alpha channel or is a work around used?
[...] Smooth scrolling background with CSS & JavaScript [...]
coool one.. :)
Damn, my browser nearly freezes when rendering this lol, wish I could see the cool effect everyone is talking about.
[...] The youlove.us scrolling background effect explained [...]
Very nice effect, but how did you do this great background image? Stars, dust, gradient – very nice composition. Are there some tutorials around?
It’s beautiful. But having this window open is painful! Using both Chromium (lastest stable version) and Firefox (3.6) on Ubuntu, with a decent computer.
Running Firefox 3.5.8 it takes up 50% CPU when on this page :(
[...] The youlove.us scrolling background effect explained [...]
(backgroundheight / 4) => (backgroundheight * .25)
[...] 4. Scrolling Background Effect [...]
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
umm, this almost kills firefox. but is a nice idea anyway.
Very nice.
Until it crashes Firefox.
I am using latest version of Firefox. I see choppy animation at best. Reaction of everything on this page is very slow. And my right click menu, and all drop down menus such as bookmarks, history, etc. are transparent – the only thing that shows is the edges so I could not even bookmark this page.
That being said, I would say this was a failure.
Nice effect.
But it runs FF cpu to 99.9%
(same as my jquery animation which is why I was checking).
You guys have any solutions for javascript animation CPU carnage?
Especially after all this hyper over the Flash Hog, the new sparkly alternative is coming off a bit rich.
It’s a very clever transitional effect. I like the touch of using the knocked out PNGs to make some of the text also cycle through the color transitions. Excellent work!
[...] http://youlove.us/blog/the-youloveus-scrolling-background-effect-explained [...]
thanks for that..
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
[...] The idea for doing this was inspired by the site at http://youlove.us. The technique I chose is, however, very different and I believe much simpler. Here’s their tutorial if you are interested: http://youlove.us/blog/the-youloveus-scrolling-background-effect-explained [...]
Very cool… but it’s very slow in firefox. 3.6
This is great. A really good way to think about this. Diiferent to what I’ve used in the past.
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
great effect i cant wait to try it out.
Great tutorial man,
I stopped looking at flash for animations and guys like you have helped paving a better way out for me
Thanks
Very nice effects,thanks for share…
Your code needs a “);” after the last “}”. BTW, this is amazing. Thanks for sharing!
Why do you need a big jQuery libary for this shitt?
THIS STATEMENT
$(‘body’).css(“background-position”, “50% ” + offset + “px”);
IS NORMALY DOM
document.body.style.backgroundPosition = “50% ” + offset + “px”;
I think this is here is the best
$(selector).animate({opacity: 0.25,’background-position’: ’100px 100px’}, 1500, “swing”, function() {});
but jQuery can only animate Y position in FF. It is a jQuery bug.
I want a new Update of jQuery and i don’t want Plugin shitts from Risings friends. Stop the capitalism!!
[...] 10. youlove.us scrolling background effect [...]
[...] and the results looked very cool. I remember how Youlove.us background-fx was done (with a explanation) and I thought that could match my needs. Spicing up with additional JQuery (hint: links), the [...]
I love it, thanks for sharing the information – that is awesome
Very nice – yeah noting Firefox still having issues (running latest edition as of August 2010) and yeah sucks up resources quite a bit. Checked out on IE and yeah very very nice. (though something that works in IE and not in Firefox is truly amazing in its own rights!
Too jerky in firefox, perfectly smooth in IE8, what’s going on!
[...] scrolling background effect [...]
[...] времени суток над Городом Ангелов. Увидел сие чудо на http://youlove.us/blog/ (пару дней “висит”). У себя они дали небольшое [...]
o, my god.. this is awesome. you did great work, keep it up ^_^
[...] The youlove.us scrolling background effect explained | youlove.us (tags: jquery javascript webdesign background css tutorial inspiration design animation effect) posted by Brian RSS filed under Semi-Daily Links Sep. 24, 2010 TrackBack URI [...]
nice trick. looks great in Chrome as well.
Sadly as others have pointed out it totally kills Firefox (dual core, Firefox 3.6). Perhaps on load you could do a test for performance and fail gracefully (disable the effect) if it’s running too slow. Or just flat out browser sniff (though that’s obviously not very smart for the all the usual reasons).
Looks great in Chrome :)
No words! No comments! simply brillant! Greatings from Argentina (South America)!
Sin palabras, sin comentarios! simplemente brillante! Saludos desde Argentina (America del Sur)
[...] The youlove.us scrolling background effect explained 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 (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs. [...]
Awesome stuff. Will recommend it to designers I know. Thank you.
espectacular, me parece de lo mejor que he visto en mucho rato.
Gracias
doesnt work on my iphone 4,
i am looking for a decent substitute of flash and as3
i dont know how to keep this javascript in my website so please can u give me brief introduction, how to use this stuff……….
Buggy script or buggy browser? Right click menu and main firefox menu is unusably slow (5-10 sec. delay), and this script is influencing the whole user experience in every tab and every other opened page. Very very bad behaviour. :( I use FF 3.6.12, and haha, even the Firefox About page appearing for 10 seconds.
Can this be applied to a div with a background image instead of the body?
[...] The youlove.us scrolling background effect explained [...]
Would anyone happen to have the raw stripped down version of this with just the needed files like the js, css and other pieces that are the only things required for it? I look at the source code of page and my eyes glaze over.
Any assistance would be greatly appreciated. Its a great script.
[...] scrolling background effect [...]
[...] 6. Scrolling background [...]
.. not working in internet explorer 8 xp, no warning messages. Background isn’t moving. But, what WORKS in IE… I think IE shall be boycotted once and forever. Great script you people. Thanks.
Awesome ! But there is a fault within this code :
// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset – (backgroundheight / 4);
hmm⋯ I think the code will be right with :
var offset = backgroundheight / 4 – offset;
Getting the right background-position :P
PS : sorry, I get the wrong way to send Comments before.
This is the type of information that should be shared around the net. Shame on the search engine for not positioning this post higher. I’ll visit again for another THE YOULOVE.US post!
[...] More Information on The youlove.us scrolling background effect explained [...]
[...] Scrolling Background [...]
It’s a neat subtle effect. With HTML5 and CSS3, is it now possible to do this without all the javascript?
What a great post! I’ve only taken up about one semester of web design at my college and really wanted to create a similar effect for my design finals. Unfortunately I could never figure out how I would do it. The day and night effect was especially nifty! Thanks!
[...] Background Effect using jQueryView DemoView TutorialThe youlove.us scrolling background effectView Demo and TutorialRainbows and SunshineView DemoView TutorialA simple AJAX website with jQueryView DemoView TutorialA [...]
Finally I see the downfall of flash headers. Great work!