Interaction

Animation Demo

Try clicking a bubble or pressing spacebar

Click to Pop Bubbles

Here’s a function to pop a bubble:

function popBubble() {
  var bubble = $(this);
  bubble.remove();
}

And how to look for a click on any bubble:

var allBubbles = $('.bubble');
allBubbles.click(popBubble);

Your bubbles should now disappear when clicked.

Hover to Change Bubble Colour

Here’s a function to change a bubble red:

function makeBubbleRed() {
var bubble = $(this);
bubble.css('background-color', 'red');
}

And a function to change a bubble back to white:

function makeBubbleWhite() {
var bubble = $(this);
bubble.css('background-color', 'white');
}

And finally a hover watcher for all bubbles:

var allBubbles = $('.bubble');
allBubbles.hover( makeBubbleRed, makeBubbleWhite );

Bubble colour should change when your mouse goes over.

Spacebar to Create Bubbles

Here’s a keyboard event watcher:

$(window).keyup( handleKeyUp );

And a function which creates a bubble if the key was spacebar:

function handleKeyUp(event) {
  if(event.keyCode == 32){
    createBubble();
  }
}

You can find other key codes here

A new bubble should appear when you press spacebar.

Timer Events

Challenge: Interesting Interactions

Use at least two interactions to make your animations

a bit weird or kinda funny.

Interaction: Complete

Good work! I bet you could make a game out of this…

Take me to the next chapter!