Velocity.js scroll stuff

Developer
Tommie Hansen
Size
6,254 Kb
Views
44,528
  1. Velocity.js scroll stuff Previews
  2. Velocity.js scroll stuff HTML Codes
  3. Velocity.js scroll stuff CSS Codes
  4. Velocity.js scroll stuff JS Codes

How do I make an velocity.js scroll stuff?

Scroll to next element. Use mousewheel or touchpad to scroll to next/previous object(s).. What is a velocity.js scroll stuff? How do you make a velocity.js scroll stuff? This script and codes were developed by Tommie Hansen on 22 August 2022, Monday.

Velocity.js scroll stuff Previews
IQ Test

Velocity.js scroll stuff - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Velocity.js scroll stuff</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome.css */
/* defaults */
html,body { min-height:100%; overflow-y:hidden; }
body { font-family:"Open Sans", helvetica,arial,sans-serif; font-size:13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; }
*,*:before,*:after { box-sizing: border-box; } img { display:block; } i { font-style:normal; } em { font-style:italic; }
/* Refresh, add boxes etc */
#a { position:absolute; top:20px; right:20px; display: block; background: #eee; color:#aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size:11px; padding:8px 10px; border:1px dotted #ccc; transition:all .12s; margin-left:-1px; }
#a .fa { font-family: "FontAwesome", "Open Sans", sans-serif; } #a i:hover { color: #fff; background: hotpink; border:1px solid hotpink; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }
/* ----- end defaults ---- */
/* Main layout */
#boxes { padding-bottom:1000px; }
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
/* #boxes, .box { transform: translate3d(0,0,0); } */
/* Headers */
h1,h2 { font-size: 21px; line-height:100%; font-weight:300; }
h1 { font-size: 24px; font-weight: 700; border-bottom:1px solid #ccc; }
h1 i { font-weight: 300; }
pre { display:block; margin-top:-25px; text-transform: uppercase; color:#888; font-size:11px; letter-spacing:.5px; }
pre i { cursor:help; display:inline-block; margin: 0 0 0 3px; }
pre i:hover { color:#222; }
pre span { color:#aaa; display:block; letter-spacing:0; }
/* Paddings / Margins */
h1 { padding: 20px 0; }
h2 { margin: 0 0 12px; }
.box { margin: 50px 0 80px; } /* inline-block adds +4px margin */
.boxFoot { padding: 10px 20px; text-align: center; text-transform: uppercase; }
.box img.full { margin: 0; }
.box { opacity:.7; }
.box.current { opacity:1; }
/* Boxes */
.box { opacity:0; display:block; text-align:left; border: 10px solid #ddd; border-bottom: 1px solid #ccc; background: #ccc;
}
.boxFoot { display:block; background: #ddd; color: #999; font-size:11px;
}
.boxFoot em { font-family: georgia, serif; text-transform: lowercase; color: #aaa; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Velocity.js <i>scroll stuff</i></h1>
<pre>
Use mousewheel, touchpad, keyboard &uarr; &darr; &rarr; &larr; keys to scroll to next/previous
<span>v1.3 &ndash; Replaced jQuery add/removeClass with native js + RAW dom selectors for Velocity / see js source for more</span>
</pre>
<div id="a"><i onclick="window.location=window.location" class="fa">RELOAD PEN</i></div>
<div id="boxes"> <!-- load via JSONP -->
</div><!-- /#boxes --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Velocity.js scroll stuff - Script Codes CSS Codes

/* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome.css */
/* defaults */
html,body { min-height:100%; overflow-y:hidden; }
body { font-family:"Open Sans", helvetica,arial,sans-serif; font-size:13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; }
*,*:before,*:after { box-sizing: border-box; } img { display:block; } i { font-style:normal; } em { font-style:italic; }
/* Refresh, add boxes etc */
#a { position:absolute; top:20px; right:20px; display: block; background: #eee; color:#aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size:11px; padding:8px 10px; border:1px dotted #ccc; transition:all .12s; margin-left:-1px; }
#a .fa { font-family: "FontAwesome", "Open Sans", sans-serif; } #a i:hover { color: #fff; background: hotpink; border:1px solid hotpink; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }
/* ----- end defaults ---- */
/* Main layout */
#boxes { padding-bottom:1000px; }
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
/* #boxes, .box { transform: translate3d(0,0,0); } */
/* Headers */
h1,h2 { font-size: 21px; line-height:100%; font-weight:300; }
h1 { font-size: 24px; font-weight: 700; border-bottom:1px solid #ccc; }
h1 i { font-weight: 300; }
pre { display:block; margin-top:-25px; text-transform: uppercase; color:#888; font-size:11px; letter-spacing:.5px; }
pre i { cursor:help; display:inline-block; margin: 0 0 0 3px; }
pre i:hover { color:#222; }
pre span { color:#aaa; display:block; letter-spacing:0; }
/* Paddings / Margins */
h1 { padding: 20px 0; }
h2 { margin: 0 0 12px; }
.box { margin: 50px 0 80px; } /* inline-block adds +4px margin */
.boxFoot { padding: 10px 20px; text-align: center; text-transform: uppercase; }
.box img.full { margin: 0; }
.box { opacity:.7; }
.box.current { opacity:1; }
/* Boxes */
.box { opacity:0; display:block; text-align:left; border: 10px solid #ddd; border-bottom: 1px solid #ccc; background: #ccc;
}
.boxFoot { display:block; background: #ddd; color: #999; font-size:11px;
}
.boxFoot em { font-family: georgia, serif; text-transform: lowercase; color: #aaa; }

Velocity.js scroll stuff - Script Codes JS Codes

/* + jquery.js + velocity.js
*/
/* -----------------------------------------------------
CHANGELOG
Current:
- Still not yet quite there
- Need to improve performance further
1.3
- Replaced some DOM selectors with RAW alternatives (performance)
- Replace jquery addClass/removeClass with native alternatives (performance)
Note: classList requires ie10+ or that one include a shim like classList.js.
1.2
- Removed jquery plugin isInView.js since it caused too much lag. Using classes to just scroll to next/prev instead.
- Added keyboard navigation. The pens iframe needs to have focus in order for that to work.
- Added back effect to begin/end
- Added contents via ajax
----------------------------------------------------- */
// Define base div
var boxes = $('#boxes');
/* -----------------------------------------------------
GET SOME CONTENTS
100% Unrelated to scroll...
----------------------------------------------------- */
boxes.append('<div id="load">Loading data...</div>')
function getStuff(uri){ //$.ajaxSetup({ cache: false }); $.ajax({ url: uri, dataType: 'jsonp', success: function(data) { //c.prepend($(data.responseData.feed)[0].title+'<br><br>'); var html = ''; $(data.responseData.feed.entries).each(function(index, e) { e.link = e.link.replace('.jpg','_z.jpg'); html += '<div class="box"><a target="_blank" href="https://www.flickr.com/photos/tommiehansen/"><img class="full" width="640" height="auto" src="'+ e.link +'"></a>'; html += '<div class="boxFoot"><p>'+ e.title +' <em>by</em> Tommie Hansen / flickr</p></div></div>'; }); $('#load').remove(); boxes.html(html); init(); // RUN REST OF THE STUFF }, error: function () {} });
}
var source = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=';
//source += 'http%3A%2F%2Fwww.degraeve.com%2Fflickr-rss%2Frss.php%3Ftags%3Dtommiehansen%2Csunset%26tagmode%3Dall%26sort%3Dinterestingness-desc%26num%3D20';
source += 'http%3A%2F%2Fwww.degraeve.com%2Fflickr-rss%2Frss.php%3Ftags%3Dtommiehansen%26tagmode%3Dall%26sort%3Dinterestingness-desc%26num%3D20';
source += '&num=15';
getStuff(source);
/*
-----------------------------------------------------
BEGIN THE REAL STUFF
-----------------------------------------------------
*/
function init(){
// Base selections
//var box = $('.box');
var box = $('.box')
// Set defaults
var
aniDuration = 500, // animation duration
aniEase = 'easeOutQuad', // easing
scrollOffset = -70; // offset to the scrolled element in px (image in this demo)
// Start animation (unrelated to scroll stuff)
//box.css('opacity', 0); // set at CSS instead @ .box { opacity:0; }
var first = box.first(); $.Velocity(first[0], { opacity: [1,0], translateY: [0, 100], translateZ: 0 }, //translateZ = important { duration: aniDuration, complete: function(){ $.Velocity(box.get(), { opacity: 1, translateZ: 0 }, { duration: aniDuration/3 }); } }
);
// THE SCROLL STUFF
var
scrollTimer = 100, // throttling in ms, higher = more performance but less responsive ui
timerId,
html = $('html'),
htmlRAW = html[0];
// Evil window scroll function
// if(throttleScroll) { great = true; } else { great = false; destroyEarth = angryCatsFromSpace; }
//html.addClass('isTop');
//first.addClass('current');
first[0].classList.add('current'); // IE10+ (need classList shim for <IE10)
htmlRAW.classList.add('isTop'); // IE10+
var keyCode;
$(window).bind('DOMMouseScroll mousewheel keydown', function(event){ keyCode = event.which; //don't block all keys.... if(keyCode == 38 || keyCode == 37 || keyCode == 39 || keyCode == 40 || event.originalEvent.wheelDelta >= 0 || event.originalEvent.wheelDelta <= 0){ event.preventDefault(); } clearTimeout(timerId); timerId = setTimeout(function(){ var cur = $('.current'); var curRAW = cur[0]; keyCode = event.which; //jquery keycode (up = 38, down = 40, left = 37, right = 39) // UP-scroll if(event.originalEvent.wheelDelta >= 0 || keyCode == 38 || keyCode == 37) { var prev = cur.prev(box); var prevRAW = prev[0]; if(prev.length) { // only do stuff if next/previous element exist $.Velocity(prevRAW, "stop") $.Velocity(prevRAW, "scroll", { duration: aniDuration, easing: aniEase, offset: scrollOffset }) prevRAW.classList.add('current'); // ie10+ // remove/add classes //cur.removeClass('current'); //html.removeClass('isTop'); curRAW.classList.remove('current'); // IE10+ (need classList shim for <IE10) htmlRAW.classList.remove('isTop'); // IE10+ // } // 0 previous elements, scroll to window top else { //if( html.hasClass('isTop') ) { if( htmlRAW.classList.contains('isTop') ) { // IE10+ $.Velocity(htmlRAW, { translateY: [50,0], translateZ:0 }, { duration: aniDuration/3, easing: aniEase }) $.Velocity(htmlRAW, { translateY: 0, translateZ:0 }, { duration: aniDuration/3, easing: aniEase }); } else { htmlRAW.classList.add('isTop'); $.Velocity(htmlRAW, "stop"); $.Velocity(htmlRAW, "scroll", { duration: aniDuration, easing: aniEase, offset: 0 }); /*html .addClass('isTop') .velocity("stop") .velocity("scroll", { duration: aniDuration, easing: aniEase, offset: 0 }); */ } } } // DOWN-scroll else if(event.originalEvent.wheelDelta <= 0 || keyCode == 40 || keyCode == 39) { var next = cur.next(box); var nextRAW = next[0]; if(next.length) { $.Velocity(nextRAW, "stop") $.Velocity(nextRAW, "scroll", { duration: aniDuration, easing: aniEase, offset: scrollOffset }) nextRAW.classList.add('current'); // ie10+ // remove/add classes //cur.removeClass('current'); curRAW.classList.remove('current'); // ie10+ } // it's the end of object(s) (.box in this demo) else { // scroll to document top //box.removeClass('current'); //box.first().addClass('current'); //html.stop().velocity("scroll", { duration: aniDuration, easing: aniEase, offset: scrollOffset }); $.Velocity(curRAW, "stop") $.Velocity(curRAW, "scroll", { duration: aniDuration/3, easing: aniEase, offset: scrollOffset+50 }) $.Velocity(curRAW, "scroll", { duration: aniDuration/3, easing: aniEase, offset: scrollOffset }); } } }, scrollTimer); // end timerID
}); // end win.on func
}; //end init() function
Velocity.js scroll stuff - Script Codes
Velocity.js scroll stuff - Script Codes
Home Page Home
Developer Tommie Hansen
Username tommiehansen
Uploaded August 22, 2022
Rating 3.5
Size 6,254 Kb
Views 44,528
Do you need developer help for Velocity.js scroll stuff?

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!

Tommie Hansen (tommiehansen) Script Codes
Name
Table paginator
Velocity.js custom stagger
Optimized SVG URI replacer tool
Velocity.js reverse sequence
Button pusher
Tmp 5
A Pen by Tommie Hansen
Stagger animation helper
RangeCalendar
Cash animate, card sequencing
Create amazing web content 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!