Slide-In-On-Scroll

Background & Objectives

In this project, we build a slide in on scroll. When you slide down the images, they will slide themselves in from the left or from the right.

Screen.Recording.2021-12-02.at.01.25.26.mov

Features

• window events (scroll)
• window properties (window.scrollY, window.innerHeight)
• element.offsetTop property
• debouncing

Technologies

Project created with:

• HTML5
• CSS3
• JavaScript ES6

Specs

Cloning

Go to the Terminal, choose a directory where you wish to clone the repository and run:

git clone git@github.com:Francisco-Webdeveloper/Slide-In-On-Scroll.git

Local Server

Launch local webserver with the Terminal:

npm install -g parcel-bundler
parcel index.html
open http://localhost:1234 in the browser