Happy 25th Birthday Game Boy

happy-25th-birthday-game-boy/

I’ve received a lot of questions regarding this scrolling website and I hope that this deconstruction answers some of them.

Quick Overview

This one page scrolling website was created using SuperScrollorama by John Polacek.

All that’s behind this site is 25 images and a creative use of GreenSock.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

Preloading Assets

The site uses multiple images, so to keep everything running smoothly I’ve decide to preload all the images upfront.

I’ve used ImagesLoaded.js and here is the code used for rotating the S shaped brick.

It is an infinite TimelineMax animation with a 0.7 delay between repeates.

The brick itself is rotated by 90deg each time over the duration of 0.1 seconds.

The transformOrigin defines a point around which the brick is rotating.

Here’s a more visual indication of what is happening.

This needed to be adjusted from the default centre point to achieve a more natural rotating Tetris.

Keep Scrolling

To remind users to scroll down the page I am adding a class .remindScrolling to the body.

If the user doesn’t scroll for 2 seconds we are adding a class and removing it when the user starts scrolling.

This only happens at the top of the page, before we hit 7700 pixels top offset.

Moving Bricks Down

I’ve included all 7 shapes of the bricks.

To keep the rotating easy I’ve exported them at the same size – 72x72px.

All bricks are invisible by default and SuperScrollorama controls when each brick starts to fall down.

Each move down is an animation of the top offset by 18px.

The first bricks falls down over the duration of 8000 pixels of scrolling.

This duration is gradually decreased for the next bricks as the game progresses.

Rotating Of The Bricks

Some bricks are also rotating and moving left and right.

We still move the brick down, but we also add rotation: 90 or left: +=18px.

Once I had worked out the right offset and moves of the first brick, building the rest of the game wasn’t that hard.

I was playing with the left offset and rotation for the following bricks until game over.

Game Over

What do you think about this one page scrolling website and what was your score at the end of the game?

Something tells me that you didn’t beat my 801 record. ;)

Let me know in the comments below.

Until next time, happy deconstructing.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

5 Comments

  1. Andrew
    Reply

    Thank you – I am loving the code snippets and learning more about the inner magic of websites!

    PS – You owe me a new scroll wheel !!

    • Petr Tichy
      Reply

      Thanks Andrew, shipping you a new wheel tomorrow:)

  2. Julian
    Reply

    Awesome post but where’s the link to see it in action? Thankx

    • Petr Tichy
      Reply

      Thanks Julian. The link is right under the main post title.

  3. Manfred
    Reply

    Damn, that’s an amazing website!

    Could I ask how you managed you managed to zoom onto the gameboy’s screen and have the screen stay as the background scrolls? I wish to use it for my website project :D

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">