After getting the request, we are going to show you how to create a “slide-in on scroll” jQuery effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.
The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. We’ll be alternating the sides to create a random look.