Comments on: The youlove.us scrolling background effect explained

By: njmehta

njmehta — Thu, 02 Sep 2010 14:53:59 +0000

Too jerky in firefox, perfectly smooth in IE8, what’s going on!

By: Calgary Web Design

Calgary Web Design — Sat, 28 Aug 2010 02:49:22 +0000

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!

By: Maurice

Maurice — Sat, 28 Aug 2010 01:01:39 +0000

I love it, thanks for sharing the information – that is awesome

By: » Whoa I made homepages - Mikko/Vart.io

» Whoa I made homepages - Mikko/Vart.io — Wed, 25 Aug 2010 02:28:41 +0000

[...] 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 [...]

By: TOP 10 Skryptów jQuery | Blog Mintdesign

TOP 10 Skryptów jQuery | Blog Mintdesign — Tue, 24 Aug 2010 09:22:11 +0000

[...] 10. youlove.us scrolling background effect [...]

By: F.U.T.Z.

F.U.T.Z. — Sun, 22 Aug 2010 08:18:44 +0000

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!!

By: Matt C.

Matt C. — Sat, 14 Aug 2010 07:03:33 +0000

Your code needs a “);” after the last “}”. BTW, this is amazing. Thanks for sharing!

By: keshav sharma

keshav sharma — Fri, 06 Aug 2010 07:49:49 +0000

Very nice effects,thanks for share…

By: Abayomi

Abayomi — Thu, 01 Jul 2010 15:44:57 +0000

Great tutorial man,
I stopped looking at flash for animations and guys like you have helped paving a better way out for me

Thanks

By: mike

mike — Tue, 29 Jun 2010 03:11:51 +0000

great effect i cant wait to try it out.

By: Geek is a Lift-Style. » 50 Useful New jQuery Techniques and Tutorials

Geek is a Lift-Style. » 50 Useful New jQuery Techniques and Tutorials — Fri, 18 Jun 2010 09:19:54 +0000

[...] 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. [...]

By: web design calgary

web design calgary — Thu, 17 Jun 2010 22:31:59 +0000

This is great. A really good way to think about this. Diiferent to what I’ve used in the past.

By: Slawek Latka

Slawek Latka — Thu, 17 Jun 2010 13:22:16 +0000

Very cool… but it’s very slow in firefox. 3.6

By: What a Wonderful World » CSS 3 Transition property for Chrome, Safari, and Webkit based browsers

Thu, 17 Jun 2010 04:30:15 +0000

[...] 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 [...]

By: 50 Useful New jQuery Techniques and Tutorials | Xiaoqi He ( Harry He ) – Official Blog – 贺孝琦官方博客

Mon, 14 Jun 2010 09:26:44 +0000

By: Hakan

Hakan — Sat, 12 Jun 2010 23:18:06 +0000

thanks for that..

By: ‘You Love Us’ scrolling header BG effect « Ninja Notes

‘You Love Us’ scrolling header BG effect « Ninja Notes — Wed, 09 Jun 2010 18:32:32 +0000

[...] http://youlove.us/blog/the-youloveus-scrolling-background-effect-explained [...]

By: Loren Helgeson

Loren Helgeson — Thu, 20 May 2010 19:01:18 +0000

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!

By: Ben

Ben — Tue, 18 May 2010 01:33:02 +0000

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.

By: Lunatic GT

Lunatic GT — Mon, 10 May 2010 17:00:18 +0000

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.

By: iain

iain — Sun, 02 May 2010 11:24:56 +0000

Very nice.

Until it crashes Firefox.

By: wickedpixel

wickedpixel — Mon, 26 Apr 2010 13:17:23 +0000

umm, this almost kills firefox. but is a nice idea anyway.

By: 50 Useful New jQuery Techniques and Tutorials | Top Web Hosts Review Best Web Hosting 2010

Thu, 25 Mar 2010 22:42:37 +0000

By: 10 Awesome Techniques and Examples of Animation with jQuery « HUE Designer

10 Awesome Techniques and Examples of Animation with jQuery « HUE Designer — Wed, 17 Mar 2010 12:46:56 +0000

[...] 4. Scrolling Background Effect [...]

By: o

Sun, 14 Mar 2010 17:59:05 +0000

(backgroundheight / 4) => (backgroundheight * .25)

By: How jQuery is Killing Flash + jQuery Tutorials & Plugins to Beat Up Flash Animations | Web Development News

Fri, 12 Mar 2010 15:54:06 +0000

[...] The youlove.us scrolling background effect explained [...]

By: C.D.A.

C.D.A. — Thu, 04 Mar 2010 15:32:47 +0000

Running Firefox 3.5.8 it takes up 50% CPU when on this page :(

By: Zim

Zim — Tue, 02 Mar 2010 19:08:33 +0000

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.

By: Rene

Rene — Tue, 02 Mar 2010 07:20:49 +0000

Very nice effect, but how did you do this great background image? Stars, dust, gradient – very nice composition. Are there some tutorials around?

By: How jQuery is Killing Flash + jQuery Tutorials & Plugins to Beat Up Flash Animations | AEXT.NET

Mon, 01 Mar 2010 06:27:14 +0000

[...] The youlove.us scrolling background effect explained [...]