ScrollDir Example

Developer
Jeff Wainwright
Size
4,194 Kb
Views
10,120
  1. ScrollDir Example Previews
  2. ScrollDir Example HTML Codes
  3. ScrollDir Example CSS Codes
  4. ScrollDir Example JS Codes

How do I make an scrolldir example?

This pen is a quick example of ScrollDir. ScrollDir is a minimal JavaScript Plugin to manage scroll direction without the jitter or issues with accidental scrolling.. What is a scrolldir example? How do you make a scrolldir example? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

ScrollDir Example Previews
IQ Test

ScrollDir Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ScrollDir Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2 id="scroll-down" class="scrolling scrolling--down">Down</h2>
<h2 id="scroll-up" class="scrolling scrolling--up">Up</h2>
<div class="wrapper"> <h1>This is an example of <a href="https://github.com/dollarshaveclub/scrolldir">ScrollDir, a JS Plugin</a></h1> <blockquote> <a href="https://github.com/dollarshaveclub/scrolldir"> ScrollDir</a> is a micro Javascript library that makes it easy Leverage Vertical Scroll Direction with CSS. From there, do what want.&nbsp;

ScrollDir Example - Script Codes CSS Codes

body,
html { margin: 0; padding: 0;
}
body { height: 5000px;
}
blockquote { background-color: #f5f5f5; font-size: 1.5rem; line-height: 1.5; margin: 2rem 0; padding: 1.5rem;
}
.wrapper { margin: 0 auto; max-width: calc(100% - 2rem); padding: 112px 0;
}
@media (min-width: 620px) { .wrapper { max-width: 600px; }
}
.special { font-size: 1.25rem;
}
.scrolling { color: white; left: 0; margin: 0; padding: 2rem 0; position: fixed; text-align: center; width: 100%;
}
.scrolling--down { background-color: green; -webkit-transition: top .5s ease; transition: top .5s ease; top: -91px;
}
[data-scrolldir=down] .scrolling--down { top: 0;
}
.scrolling--up { background-color: red; bottom: -91px; -webkit-transition: bottom .5s ease; transition: bottom .5s ease;
}
[data-scrolldir=up] .scrolling--up { bottom: 0;
}

ScrollDir Example - Script Codes JS Codes

/** * scrolldir - Track user scroll direction without jitter * @version v0.0.1 * @link https://github.com/dollarshaveclub/scrolldir.git * @author Patrick Fisher <[email protected]> * @license MIT
**/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.scrollDir=e()}(this,function(){"use strict";function t(t){var e={el:document.documentElement,attribute:"data-scrolldir"},n=t&&t.el||e.el,o=t&&t.attribute||e.attribute;if(t&&t.off===!0)return n.setAttribute(o,"off");var i=document.body,r=32,d=512,u=64,f=Array(r),a="down",w=void 0,s=void 0,c=0,l=function(){var t=window.scrollY,e=w.timeStamp,l="down"===a?Math.max:Math.min,m=i.offsetHeight-window.innerHeight;if(t=Math.max(0,t),t=Math.min(m,t),f.unshift({y:t,t:e}),f.pop(),t===l(s,t))return c=e,void(s=t);var p=e-d;if(p>c){s=t;for(var v=0;v<r&&(f[v]&&!(f[v].t<p));v+=1)s=l(s,f[v].y)}Math.abs(t-s)>u&&(s=t,c=e,a="down"===a?"up":"down",n.setAttribute(o,a))},m=function(t){w=t,window.requestAnimationFrame(l)};return s=window.scrollY,n.setAttribute(o,a),window.addEventListener("scroll",m)}var e=window.$||window.jQuery||window.Zepto;return e&&e.fn.extend({scrollDir:function(e){return t(e)}}),t});
scrollDir();
ScrollDir Example - Script Codes
ScrollDir Example - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3.5
Size 4,194 Kb
Views 10,120
Do you need developer help for ScrollDir Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Wainwright (yowainwright) Script Codes
Name
Noframe.js Example
Multiple Swiper Demo
Stickybits Multiple Instances Demo
Shave, a javascript plugin for truncating text
Reframe.js Example
Stickybits Demo
A Pen by Jeff Wainwright
Reframe.js Demo
Stickybits with a custom vertical position
Meeting Schedule Widget with Angular
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!