12 JQuery Scroll Effects

freefrontend.com freefrontend.com3 years ago in #Dev Love543

November 27, 2019 Collection of free jQuery scroll effect code examples. CSS Scroll EffectsjQuery ParallaxAbout a codeScale Hero Section on Scroll Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: jquery.js Made withHTML (Haml) / CSS (SCSS) / JSAbout a codeScroll 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 AuthorBrian HaferkampJuly 29, 2019Made withHTML (Pug) / CSS (Sass) / JSAbout a codeUnique 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 AuthorRecreatorusNovember 17, 2018About a codeScrolling Articles Card Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: jquery.js, smooth-scrollbar.js, overscroll.js AuthorJason D’OyleyNovember 13, 2018About a codeZoom Hero Image On Scroll Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: jquery.js AuthorJoshua WardNovember 11, 2018Made withHTML (Pug) / CSS (SCSS) / JSAbout a codeOne Page Scrolly Thing Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: jquery.js AuthorMuhammed ErdemNovember 6, 2018Made withHTML (Pug) / CSS (SCSS) / JSAbout a codeScroll 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 About a codeShow 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 AuthorFabio OttavianiJune 18, 2018About a codeImage Mask Reveal Animation Scroll down effect in jQuery. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: jquery.js AuthorDaniel GivensSeptember 4, 2017About a codejQuery Scroll Effect for Text Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: jquery.js, tweenmax.js, smooth-scrollbar.js AuthorNathan TaylorAugust 29, 2017Made withHTML / CSS (SCSS) / JS (Babel)About a codeMomentum 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 AuthorChris CoyierOctober 29, 2016About a codeSmooth 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 AuthorNikolay TalanovNovember 4, 2015About a codeSkewed One Page Scroll Just scroll down. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: jquery.js URL Out – https://freefrontend.com/jquery-scroll-effects/Author – freefrontend.comDate – 2019-12-26 23:40:10

Like to keep reading?

This article first appeared on freefrontend.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply