25+ Stunning CSS Scroll Effects

I decided to adapt the CSS Only Scroll Indicator technique (https://codepen.io/MadeByMike/pen/ZOrEmr), to make a background gradient that adapts to scroll position.

A Split screen gallery

Fixed element appears to change color when entering different sections. Uses duplicated elements for every section. Now with blend-mode magic for added effect. Inspired by Marco Fugaro's Pen Changing color when hover another section.

Original idea - my version uses a calc() value for margin-left, eliminating the need for a transform, which I don't really like using for initial positioning. By initial positioning I mean the position of an element before animating it. Animation is the main reason why I prefer not to u...

Read More

Test of overlapping section with position sticky

The scroll-behavior and scroll-snap-type CSS properties are amazing tools for creating landing pages without using js. Unfortunately, these properties are not yet supported in all browsers.😞 See through browser Firefox

Use the clip-path property to create fixed position hero sections

API that can be used to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport. The position is delivered asynchronously and is useful for understanding the visibility of elements and implementing pre-loading and deferred loadin...

Read More

Parallax-like scroll effect made with a fixed background that has low z-index, making the content scroll over. To see more stuff like this go check out pure's CSS framework at http://purecss.io

Shows how to achieve a scrolling parallax effect using CSS and HTML.

No Javascript required. Just plain CSS.

Following along a tutorial by codegrid

Perhaps not technically parallax, but still very cool! background-attachment: fixed; is the magic here. It makes the background of a given element fixed to the view port regardless of where the element is on the page. In a way, the element is acting as a window to view the background. Ins...

Read More

Page Scroll Effect Examples with (varients for animation styles and an option for enabling/disabling scroll jacking) (Forked Off from the demo on http://www.codyhouse.co)

Used this effect on a project and wanted to share it. Might be some improvements to make, ain't no javascript master yet. PS: Thx people in the comments, you helped me learn so much JS stuff :)

Forked from Nikolay Talanov's Pen Skewed One Page Scroll.

Trigger CSS animations on scroll. Detailed explanation can be found at http://www.bram.us/2013/11/20/scroll-animations/