This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then flop them out for our own.
Links from Video:
Sehr gut! Danke! :D
Hello Chris, Thanks for this, Can you please do another video on wordpress theme once again? advance theme??
Chris this was sweet! Could you explain how they made the the Zombie/Robot image seamless on the repeat?
I’d thought you smashed your camera ;)
Kind regards
Rata
Thanks ! Really Cool!
This was really cool Chris! I wondered where you got the negative value for the robots image offset off the bottom. Was that the height of the image? I just don’t understand why that works on monitors of different resolutions.
So, where did that number come from?
Totally totally cool. Thanks for laying it out. And for the download files!
Semantic or not, I don’t care, it was quite clever of them to do that! Good explanation, I’ll have to play with it some time.
Thanks!
Great stuff Chris.
I noticed you have the HTML Ipsum icon in your menu bar, where can I get that program from, I’ve been searching for ages and I can’t find it :(
Thanks,
Jack
Use fluid.app and make a menu bar app from this URL http://html-ipsum.com/fluid/
Thanks Chris! That worked perfectly :D
Youre such a cool dude, thanks a lot fella!
This was a cool technique. I was on the site the other day and didn’t even notice it until you Twittered it out. Very cool!
I also like how you make the Email / name / website bars fade when you leave a comment.
This is a great explanation and the technique is really facinating. Thanks for the video!
fun! thank you!
Thanks Chris.. this is very cool.. its a “why didn’t I think of that” idea. Also I loved the “no one cares about IE6 anymore” comment, lol.
I too, liked your comment about IE6, but unfortunately some people do care…
http://news.bbc.co.uk/2/hi/technology/8196242.stm
I’m sure you all know I was just kind of joking. For IE 6, the solution is as always to create and IE 6 specific stylesheet and just set the backgrounds that use the alpha transparency to none.
I can’t think of a more suitable punishment for IE 6 than for them not to get to see cool zombies and robots.
Can’t agree more.
Awesome effect. Thanks for explaining that to us Chris!
Oh I missed out on this post.. good thing am following you on twitter lol… Awesome trick! I love the way you have innovated using backgrounds… am gonna try it on my own first and if I fail :( then am gonna watch your screen cast… ooo this is gonna be fun :D thanks… wish me luck ;)
oops my bad, this is a new post :P
Awesome. I hadn’t seen the Think Geek site until I read this post, but it’s a very cool effect. ;D
(By the way, I love your comment form.)
Would it not work the same using the page-wrap div styling on the html element thus eliminating the need for the page-wrap div? Just curious if that would work. . .
Yeah that would probably work. I usually stay way from styling the HTML element, but it’s kind of irrational, I think it’s fine in general.
Are there any reasons for that? I don’t think there are any compatability issues with styling the html element. IMHO, it makes perfect sense to put the background on the html and then have the body be a content container.
You should try it. {wink wink}
That is a super cool CSS trick. I really need to find a way to put that kinda idea in my next design! THANKS CHRIS!
That’s really cool. Thanks for the explanation! Your screencasts are always really helpful. =)
Really cool man, thanks for taking the time!
Hey Chris,
Awesome screencast and great trick! I also get a kick out of what you said at about 16:52. Sorry, very childish but hey… thats why I keep coming back!
Kudos!
-John
Maybe they drew inspiration from your downloads area: https://css-tricks.com/examples/SecretMessage/
Sweet!
I would do this using z-index with absolute positioning. Would this work?
Thank you!
Very neat trick!
This idea is wicked cool, thanks for sharing the idea & how to do it!
I think I might use jQuery to hide some of the extra markup (which you showed how to in an older screen cast), and add this sweet fluff with some other stuff to my design enhancements of my new portfolio which is in the works.
# 68.. next is…6*
This is a great screencast. Cool little trick, explained really well.
Love your stuff Chris, and even though I see you scrapped the PSD to WP theme, I hope you get back to it. You explain stuff very clearly.
Awesome stuff, Chris.
That’s really clever. I think I’ll see how it works with color images.
And dude “Open Image in New Tab” right under “Copy Image Location” is your friend. :)
That was pretty sweet, I will give it a try
In my comment above I mentioned to use the images without divs whit absolute positioning and z-index. I think this would me more simple and semantic (or not).
Thanks Chris!, nice video explanation and thechnique.
I just voted for you in both categories on the 2009 .net Magazine Awards. Thanks for all of the great tips and tricks!!!
You can apply the first background to the html element, the second the the body element and avoid 1 of those wrappers.
Ooops! Someone said it already… sorry.
I scanned through to make sure someone hadn’t… but didn’t scan through well enough.
i like the new comments form…… idk how new it is but any ways i noticed on twitter u said u made another wordpress screen cast and wasnt sure u where gonna post it. I would like to see another wp screen cast maybe a little more advanced
Awesome tutorial, and fairly simple. My developer friends and I had noticed the update to ThinkGeek’s background last week too and were dissecting the design to figure it out, when I got a tweet about your post. Thanks for taking the time to put this together!
Thanks for posting this…very cool effect! I’m just getting started in web design and stuff like this really helps a lot!
Rock On.
wow…great tut!! Easily explained and humorous =D
Exporting transparent PNGs from Photoshop gives me problems trying to get the same colour as my actual body bg (in order to hide the elements until scrolled to the bottom) – any ideas? Transparent gifs export fine, but PNG 24 is not the same colour.
Hey mate –
I had a bit of trouble at first, and then I decided to go real simple. I used standard web colors (#000 fade to #666) and then it was much easier to get it to match up on the export. Don’t really know if that’s exactly the problem you were having, but it’s how I fixed mine…
Hey Chris –
Mad props for this one. I hadn’t ever seen that effect before until you pointed it out, and it really is phenomenally simple! I’m in the process of putting on my design site, a simple night to day bit with suns and crescent moons and it’s getting to look quite nice.
Thanks again mate!
Thanks for the great info! Much appreciated. Question, however. What if you want the image fade/change to happen quicker? i.e., Instead of the user scrolling all the way down the page, having the complete switch occur only a third of the way scrolled down the page. My main WordPress site page is very long and I do not expect users scroll down to the bottom much. Individual post pages have a different problem in that they are shorter and users don’t need to scroll all the way to the bottom so once again the complete image fade/change probably won’t be seen.
Once again, thanks for the tutorial!
The negative value in the background position is actually horizontal offset (not vertical, which is bottom); probably used to better locate the ‘BRAAAAINS’.
Love the site Chris, especially the new snippets
Thanks loved your screencast, this is where my imagination took me this morning
Couldn’t you do this using pseudo elements on the body?
Probably. It’s been a while since I’ve looked at this tutorial but in general, the <body> element is a perfectly valid element to use the :before and :after pseudo elements on which could be the extra ‘canvases’ you need to get this effect done.
Hello!
Once I saw somewhere awesome background technique and couldn’t find it now :(
There was black background with line which moved across the page while scrolling.
Can anyone help me to find it?
I really like your content, Chris. This is a very helpful site and community you’ve created here. But one suggestion: take some GasX or something before you start making videos. Every single one is filled with you burping under your breath and it’s kind of gross. I feel like I can smell a meatball sub emanating from my speakers.