HTML5 assignment

In this assignment it is going to be used HTML5 with of its characteristics in order to make a web page

Here you can find a video with a dynamic ambient light.

You can modify the opacity of the video:

Opacity

You can activate or deactivate the ambient light here:

In this section you can play and try to solve some kitten puzzles.

You can change the picture selecting another one at the bottom.

A parallax scrolling effect

A parallax scrolling effect is caused when the the background content is moved at a different speed than the foreground content while scrolling

In this case, the background content is an image set as a div's background-image url, this means that there are two div elements, one inside the other. The "container" div has the background image, and the second div has the content, that scrolls normally.

In other to achieve this effect, I used the Stellar.js file.

In this section you can see some SVG images

Here there are two SVG stars!

As you can see, the second star is going crazy. This effect was achieved by aplying a @keyframe parameter in de CSS and then adding some rotation transforms:

Here you can see another svg image.

This one is more complex than the previous one: