nikczemnydev / SlideInInfScroll

HTML, CSS, JavaScript - Slide In Scroll - web app product ready to deploy anywhere, it's an implementation of an engaging scrolling effect showing content elegantly sliding in and out of view from left and right alternately as the user scrolls up and down.

Latest Addition: You can now view it online at https://codepen.io/nikczemnydev/pen/vYPWxzL

HTML, CSS, JavaScript - Slide In Scroll - This product demonstrates an engaging scrolling effect for webpage content. As users scroll down, content containers elegantly slide into view from both the left and right sides. Conversely, when scrolling up, these containers smoothly slide out of view. The effect adds dynamism and visual appeal to your webpages.

Key Features:

Smooth Animation: Content slides in and out seamlessly as users scroll.

Responsive Design: Works well across different devices and screen sizes.

Minimal Dependencies: Built using HTML, CSS, and JavaScript.

Feel free to explore the code and integrate this scroll animation into your own projects! 🚀

What it looks like(it's choppy because it's recorded as GIF, download and run natively for the optimal effect):

INSTRUCTIONS

1. Download index.html, style.css and script.js files.
2. Put all 3 of them in the same folder (I know it's good practice to use subfolders - I kept it this way for ease of use, which is also why I linked photos online as opposed to local pics.)
3. Click index.html, it should open in your browser, if it doesn't (maybe because your default .html program is a text/code editor) then drag the index.html file and drop it in your browser window.