public marks

PUBLIC MARKS from decembre with tags css & scroll

2018

JAVASCRIPT / CSS - DEMO - Scrolling Letters Animation | Codrops

A switching title effect where a fixed text element changes with an animation depending on the scroll position.The animations are powered by anime anime.js. We also use imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.

2017

CSS - CODE EXAMPLE - "Progress bar horizontal" qui varie suivant le scroll

In AlsaCreation : CODE EXAMPLE -" Progress bar horizonta"l qui varie suivant le scroll body { -moz-box-direction: normal; -moz-box-orient: vertical; background: #f3f3f3 none repeat scroll 0 0; color: #000; display: flex; flex-direction: column; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size: 1.6rem; min-height: 100vh; }

2015

CSS3 - SCROLL - NEW - Native CSS Scroll Snap Points | CSS-Tricks

The newly-introduced CSS “snap points” properties could make it a whole lot easier to create CSS-only scroll effects (once browser support catches up). This post from Sergey Gospodarets' blog includes demos of snappy scrolling for image galleries and full-page vertical scrolling.

2013

CSS - TRICKS - Vitesse de réaction : Retirer du body la classe hover LORS du défilement - 60fps scrolling using pointer-events: none | The CSS Ninja - All things CSS, JavaScript & HTML

by 1 other
L'essentiel de la technique est de retirer la classe hover du body LORS du défilement et tous vos . hover sélecteurs ne correspond pas jusqu'à ce que l'utilisateur cesse de faire défiler la page , la classe étant alors ajoutée a body. About avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class.