animate-text-on-scroll

We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.

That demo is here:

See the Pen


Selfie Crawl
by Chris Coyier (@chriscoyier)


on CodePen.

@keyframers covered it much nicer than I did and made this video. (Seriously, it’s so clear and concise — it’s a great watch.)

I particularly like how quick’n’easy creating, exporting, optimizing, and integrating the actual SVG codes in their demonstration.

Their final demo:

See the Pen


SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers
by @keyframers (@keyframers)


on CodePen.

12-jquery-scroll-effects
Collection of free jQuery scroll effect examples.

Collection of free jQuery scroll effect code examples.

  1. CSS Scroll Effects
  2. jQuery Parallax


Author

  • Traf

Made with

  • HTML / CSS / JS

About a code

Scale Hero Section on Scroll

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Scroll Distortion

Tornis.js GSAP to update SVG filter values on scroll.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tornis.js, tweenmax.js

Author

  • Brian Haferkamp

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Unique Scrolling Presentation

This unique scrolling presentation uses CSS Grid and a little bit of JavaScript to change the fixed image as the user scrolls the page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Recreatorus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scrolling Articles Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, smooth-scrollbar.js, overscroll.js

Author

  • Jason D’Oyley

Made with

  • HTML / CSS / JS

About a code

Zoom Hero Image On Scroll

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Joshua Ward

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

One Page Scrolly Thing

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Muhammed Erdem

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Scroll List Animation

A smooth scroll animation example for listing. Made with smooth-scrollbar.js and overscroll plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, smooth-scrollbar.js, overscroll.js

Author

  • Jesus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Show Elements on Scroll

Using jQuery and SCSS to bring to the screen elements gradually.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS

About a code

Image Mask Reveal Animation

Scroll down effect in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Daniel Givens

Made with

  • HTML / CSS (SCSS) / JS

About a code

jQuery Scroll Effect for Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, tweenmax.js, smooth-scrollbar.js

Author

  • Nathan Taylor

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Momentum Scroll Fixed Element

Often fixed elements can feel a bit unnatural. I wanted to give a bit more weight to the floating object. I tried to capture the momentum feeling of natural browser scrolling. This also doesn’t interfere with the default page scroll so there is no ‘scroll jacking’ going on here.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Chris Coyier

Made with

  • HTML / CSS / JS

About a code

Smooth Page Scrolling in jQuery

You change the :focus style. But the fact that the blue box happens at all is very good for accessibility.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Nikolay Talanov

Made with

  • HTML / CSS (SCSS) / JS

About a code

Skewed One Page Scroll

Just scroll down.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

top-10-css-custom-scroll-bars

CSS Custom Scroll Bar

Latest Collection of hand-picked CSS Custom Scroll Bar code examples.

1. Hide scroll bar Cross-browser

CSS Custom Scroll Bar

demo and code

2. Custom Scroll Bar for Chrome

demo and code

3. AngularJS Directive: Scroll bar on top and bottom of div

Made with

  • HTML / CSS / JS

demo and code

4. Horizontal Scroll with out the scroll bar

Made with

  • HTML / CSS / JS

demo and code

5. Scroll Bar Fix

Made with

  • HTML / CSS(SCSS)

demo and code

6. Webkit scrollbars

CSS Custom Scroll Bar

demo and code

7. Scroll bar manipulation

Made with

  • HTML / CSS / JS

demo and code

8. Scroll Position Indicators

Made with

  • HTML / CSS / JS

demo and code

9. CSS Scroll Bars

demo and code

10. Fade in and out scroll bar on div hover

demo and code