4 ms·
In case anyone's not familiar with Javascript/HTML/CSS and is curious how this works, it's actually pretty simple and elegant. Ben is just an image positioned
by sgentle 16y ago
In case anyone's not familiar with Javascript/HTML/CSS and is curious how this works, it's actually pretty simple and elegant.
Ben is just an image positioned in the centre of the screen using a CSS property called "position: fixed", which means he doesn't move even when the content scrolls.
The walking animations are created using a technique called CSS sprites, where instead of having multiple images, you just create one and move it within the frame so that only one image is visible at a time - sort of like a film strip. The CSS property to do that is called "background-position" - and you can see an original image here: http://benthebodyguard.com/images/bensprite.png http://benthebodyguard.com/images/bensprite.png
The whole thing is driven by a function called "scrollEventHandler", which is registered with the javascript "onscroll" event, so it's triggered every time you scroll. It updates the animations for Ben, the thief, train, textboxes etc based on how far you've scrolled in the document. Source here: http://benthebodyguard.com/js/speechBubbles.js http://benthebodyguard.com/js/speechBubbles.js
The other animations (flickering lights and such) are all animated gifs, and the background is just a really long image: http://benthebodyguard.com/images/city-background.jpg http://benthebodyguard.com/images/city-background.jpg
- mortenjorck 16y agoJavascript's onscroll event is a wonderful tool. It's one of the best ways to leverage an extremely common and expected interaction pattern (scrolling down a web page) to do interesting and unexpected things. I used it to create a sort of paginated-persistent-bookmark navigation for my new portfolio site earlier this year (in profile, if you're curious).
- GavinB 16y agoClickable: http://rclayton.net http://rclayton.net I think it's very elegantly done. Kudos.
- etcet 16y agois beautiful in firefox but it looks like this in my default chromium: http://imgur.com/NVP1i.png http://imgur.com/NVP1i.png D:
- mortenjorck 16y agoWow, I thought I had tested it in Chrome. Thanks!
- gcb 16y agoVery unusable in mobiles too
- msquared 16y agoYeah, Chrome doesn't like this site. Which is a shame - when I opened it in Firefox I was impressed, but if I had not been prompted to check it out by the comments on this thread I would have moved on...
- deleted 16y ago[deleted]
- maushu 16y agoRendering problems in Chrome, first time I've seen this.
- retroryan 16y agoThis website http://www.hellokeepa.com http://www.hellokeepa.com is also doing some interesting things with what looks to be the onscroll event, the page continuously wraps around. Also notice how you can drag the page left and right.