Pure CSS animation with ParallaxJS

Pure CSS animation with ParallaxJS

I created a CSS animation on Codepen, you can click here to see the full thing.

I wanted to post some pictures of my process. Before I started this I wanted to apply the composition first, with big bright colours! This helps me map what elements will go where.  I will be using Pug and SCSS(compass), Pug will be very useful for creating multiple elements (background stars). I have also implemented ParallaxJS, which can give a different perspective when the user moves the cursor.

CSS Composition

Very basic, helped me map out where things will be. There is a process called “Blocking In”, this is a technique certain artists use in order to map out basic elements in a composition. The details come later.

Those tiny details

This is where it starts to get a bit technical, by applying tiny details like the railings.

I start to get even more detail orientated. Using Compass will help with Cross Browser functionality.

Ocean

Will animate this later once everything else is in order. The animation will come last.

Lighting

Pretty straight forward CSS3 animations, by using rotate and scale we can create lighting effects.

Stars

We want some twinkling stars! Thanks to Pug we can create a for loop and create multiple elements.

    .stars.layer(data-depth=0.3)

        for (var i = 1; i <= 80; i++)

            .star

I did try out thousands of stars, but that really does slow down the browser. So no more than 80.

ParallaxJS

Three elements we want to distort:

  • Lighthouse,
  • Lighthouse light
  • Stars

var scene = document.getElementById('scene');
    var parallax = new Parallax(scene, {
        selector: '.layer'
    });

By giving certain elements a class of ‘layer’, ParallaxJS picks this up and applies the distortion. We can also give elements a data-depth attribute, the higher the data-depth, the bigger the distortion.

Conclusion

I have thoroughly found this an interesting project, there was

References