Smoothwheel

Developer
Jay
Size
2,660 Kb
Views
6,072
  1. Smoothwheel Previews
  2. Smoothwheel HTML Codes
  3. Smoothwheel CSS Codes
  4. Smoothwheel JS Codes

How do I make an smoothwheel?

Just a simple smoothwheel demo, to remind me to use on all of my projects.Smoothwheel is available here:. What is a smoothwheel? How do you make a smoothwheel? This script and codes were developed by Jay on 14 January 2023, Saturday.

Smoothwheel Previews
IQ Test

Smoothwheel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smoothwheel</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bg"> <div class="box box1"></div> <div class="box box2"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Smoothwheel - Script Codes CSS Codes

.bg { height: 2000px; width: 1000px; background: #00CCCC;
}
.box { width: 100px; height: 100px; position: relative;
}
.box.box1 { background: #FF0000; top: 100px; left: 50px;
}
.box.box2 { background: #880000; top: 29px; left: 499px;
}

Smoothwheel - Script Codes JS Codes

/** * jquery.simplr.smoothscroll * version 1.0 * copyright (c) 2012 https://github.com/simov/simplr-smoothscroll * licensed under MIT * requires jquery.mousewheel - https://github.com/brandonaaron/jquery-mousewheel/ */
;(function($) { 'use strict'; $.srSmoothscroll = function(options) { var self = $.extend({ step: 55, speed: 400, ease: "swing" }, options || {}); // private fields & init var win = $(window), doc = $(document), top = 0, step = self.step, speed = self.speed, viewport = win.height(), body = (navigator.userAgent.indexOf('AppleWebKit') !== -1) ? $('body') : $('html'), wheel = false; // events $('body').mousewheel(function(event, delta) { wheel = true; if (delta < 0) // down top = (top+viewport) >= doc.height() ? top : top+=step; else // up top = top <= 0 ? 0 : top-=step; body.stop().animate({scrollTop: top}, speed, self.ease, function () { wheel = false; }); return false; }); win .on('resize', function (e) { viewport = win.height(); }) .on('scroll', function (e) { if (!wheel) top = win.scrollTop(); }); };
})(jQuery);
$(function () { $(document).ready(function() { $.srSmoothscroll(); });
});
Smoothwheel - Script Codes
Smoothwheel - Script Codes
Home Page Home
Developer Jay
Username jaycode
Uploaded January 14, 2023
Rating 3
Size 2,660 Kb
Views 6,072
Do you need developer help for Smoothwheel?

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!

Jay (jaycode) Script Codes
Name
Wait until all interchange images loaded
Hover with css triangle as transparent arrow
Is Mobile
Bare Necessity Horizontal Accordion
A Pen by Jay
Create amazing art & images 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!