Last Updated:

Random scrolling effects for the site on JS

Recently, one-page sites have become very popular, but a simple single page can not surprise the visitor much, so designers go to the highest degree of skill and decorate sites with various transitions from material to material. Such effects are so diverse that it is difficult to guess what can be invented this time. In this tutorial, we'll look at how to create one page, but with different effects. We will make scrolling even more exciting for a visitor to your resource.
 

We decided to combine all the techniques we knew earlier to get one page with different effects. Such a page will clearly interest the visitor. And so, let's get started.

Step 1. HTML

The markup will be a bit confusing at first glance, but if you look in more detail, then each class is responsible for a certain action, which we specify in styles and functions:

 

 

We just need to specify in the correct order what we want to see on the page, and edit it if necessary.

Step 2. CSS

With styles, everything is more interesting, we need to specify not only the general parameters of the container, but also determine the order of transformation in space, and manipulation of text:

 

 

We also connected an image, for the container of which we will set a center cut when scrolling and the appearance of text.

Step 3. JS

 

All the main work will be performed by the functions of js, we need to activate all the elements, and set the operability when scrolling, do not forget that we will manipulate the planes along the coordinate axis when scrolling and rotating the test by 360 degrees, this will allow us to implement JS:

 

 

It is worth noting that this is an experimental option, so it may not work correctly in some outdated browsers.