Use your mousewheel
How do I make an use your mousewheel?
A new take on mousewheel interaction. Pretty jerky in Firefox ... sorry Foxies.Icons by http://icomoon.io/. What is a use your mousewheel? How do you make a use your mousewheel? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.
Use your mousewheel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>use your mousewheel</title> <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! */ @font-face { font-family: 'icomoon'; src:url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.eot'); src:url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.eot?#iefix') format('embedded-opentype'), url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.woff') format('woff'), url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.ttf') format('truetype'), url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal;
}
* { margin: 0; padding: 0;
}
html,
body { height: 100%;
}
body { background: rgba(0,0,0,0.1); overflow: hidden;
}
.cloud { position: absolute; left: 50%; top: 200px; margin-left: -120px; width: 240px; perspective: 500px;
}
.wrap { position: absolute; width: 240px; height: 240px; transition: 2s ease-out; transform-style: preserve-3d;
}
.wrap:nth-child(1) { left: -280px; top: -140px;
}
.wrap:nth-child(2) { left: -280px; top: 140px;
}
.wrap:nth-child(3) { left: 280px; top: -140px;
}
.wrap:nth-child(4) { left: 280px; top: 140px;
}
.article { cursor: pointer; position: absolute; width: 240px; height: 240px; background: rgba(255,255,255,1); box-shadow: 0 0 80px rgba(0,0,0,0.15); font-family: 'icomoon'; text-align: center; line-height: 240px; font-size: 96px; color: #222; text-shadow: 0 0 20px rgba(0,0,0,0.5); border-radius: 2px; transition: 0.4s; transform-origin: 50% 50%; opacity: 0;
}
.article.active { opacity: 1; z-index: 100;
}
.article:hover { transform: scale(1.1);
}
.article.prev { transform: scale(1) rotateX(-80deg) translateZ(0px);
}
.article.next { transform: scale(1) rotateX(80deg) translateZ(0px);
}
.mouse { font-family: 'icomoon'; text-align: center; line-height: 240px; font-size: 256px; color: #ccc; position: absolute; width: 240px; height: 240px; left: 50%; margin-left: -120px; top: 200px; text-align: center;
}
.mouse span { position: absolute; color: #666; left: 0; bottom: -50px; width: 100%; font-family: Consolas, sans-serif; font-size: 20px; line-height: 20px;
}
.mouse .wheel { opacity: 0.2; left: 119px; top: 54px; width: 10px; height: 35px; position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2NkwAIYgWL/0cUZ/wMBhiAu7RjiAEJxBQFuig8vAAAAAElFTkSuQmCC); animation: wheel 0.5s linear infinite alternate;
}
@keyframes wheel { from { background-position: 0 0; } to { background-position: 0 3px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="cloud"> <div class="wrap"> <div class="article active"></div> <div class="article"></div> <div class="article"></div> <div class="article"></div> <div class="article"></div> </div> <div class="wrap"> <div class="article active"></div> <div class="article"></div> <div class="article"></div> <div class="article"></div> <div class="article"></div> </div> <div class="wrap"> <div class="article active"></div> <div class="article"></div> <div class="article"></div> <div class="article"></div> <div class="article"></div> </div> <div class="wrap"> <div class="article active"></div> <div class="article"></div> <div class="article"></div> <div class="article"></div> <div class="article"></div> </div> </div> <div class="mouse"><span>use your mousewheel</span><span class="wheel"></span></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://trashnet.de/js/jquery.mousewheel.js'></script> <script src="js/index.js"></script>
</body>
</html>
Use your mousewheel - Script Codes CSS Codes
@font-face { font-family: 'icomoon'; src:url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.eot'); src:url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.eot?#iefix') format('embedded-opentype'), url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.woff') format('woff'), url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.ttf') format('truetype'), url('https://trashnet.de/tech/nw_cloud_5/assets/font/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal;
}
* { margin: 0; padding: 0;
}
html,
body { height: 100%;
}
body { background: rgba(0,0,0,0.1); overflow: hidden;
}
.cloud { position: absolute; left: 50%; top: 200px; margin-left: -120px; width: 240px; perspective: 500px;
}
.wrap { position: absolute; width: 240px; height: 240px; transition: 2s ease-out; transform-style: preserve-3d;
}
.wrap:nth-child(1) { left: -280px; top: -140px;
}
.wrap:nth-child(2) { left: -280px; top: 140px;
}
.wrap:nth-child(3) { left: 280px; top: -140px;
}
.wrap:nth-child(4) { left: 280px; top: 140px;
}
.article { cursor: pointer; position: absolute; width: 240px; height: 240px; background: rgba(255,255,255,1); box-shadow: 0 0 80px rgba(0,0,0,0.15); font-family: 'icomoon'; text-align: center; line-height: 240px; font-size: 96px; color: #222; text-shadow: 0 0 20px rgba(0,0,0,0.5); border-radius: 2px; transition: 0.4s; transform-origin: 50% 50%; opacity: 0;
}
.article.active { opacity: 1; z-index: 100;
}
.article:hover { transform: scale(1.1);
}
.article.prev { transform: scale(1) rotateX(-80deg) translateZ(0px);
}
.article.next { transform: scale(1) rotateX(80deg) translateZ(0px);
}
.mouse { font-family: 'icomoon'; text-align: center; line-height: 240px; font-size: 256px; color: #ccc; position: absolute; width: 240px; height: 240px; left: 50%; margin-left: -120px; top: 200px; text-align: center;
}
.mouse span { position: absolute; color: #666; left: 0; bottom: -50px; width: 100%; font-family: Consolas, sans-serif; font-size: 20px; line-height: 20px;
}
.mouse .wheel { opacity: 0.2; left: 119px; top: 54px; width: 10px; height: 35px; position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2NkwAIYgWL/0cUZ/wMBhiAu7RjiAEJxBQFuig8vAAAAAElFTkSuQmCC); animation: wheel 0.5s linear infinite alternate;
}
@keyframes wheel { from { background-position: 0 0; } to { background-position: 0 3px; }
}
Use your mousewheel - Script Codes JS Codes
var lastUpdate = new Date(), deg = (360/$('.article').length);
$('.wrap').each(function(i) { var $wrap = $(this), $active = $wrap.find('.active').first(), $prev = $active.prev(), $next = $active.next(); if( !$prev.length ) $prev = $wrap.find('.article').last(); if( !$next.length ) $next = $wrap.find('.article').first(); $prev.addClass('prev'); $next.addClass('next');
});
$('.article').each(function(i) { $(this).css('background', 'hsla(' + (i*deg) + ',60%,60%,1)');
});
$('body').on('mousewheel', function(event, delta, deltaX, deltaY) { event.preventDefault(); var thisUpdate = new Date(); if( thisUpdate - lastUpdate < 500 ) return; lastUpdate = thisUpdate; $('.wrap').each(function() { var $wrap = $(this), $active = $wrap.find('.active'), $prev = $wrap.find('.prev'), $next = $wrap.find('.next'), $tmp; //go back if( deltaY === 1) { $active .removeClass('active') .addClass('next') .siblings() .removeClass('next'); $tmp = $prev .removeClass('prev') .addClass('active') .prev(); if( !$tmp.length ) $tmp = $wrap.find('.article').last(); $tmp .removeClass('next') .addClass('prev') .siblings() .removeClass('prev'); } else { $active .removeClass('active') .addClass('prev') .siblings() .removeClass('prev'); $tmp = $next .removeClass('next') .addClass('active') .next(); if( !$tmp.length ) $tmp = $wrap.find('.article').first(); $tmp .removeClass('prev') .addClass('next') .siblings() .removeClass('next'); } });
});
Developer | Timo Hausmann |
Username | timohausmann |
Uploaded | October 16, 2022 |
Rating | 4.5 |
Size | 4,109 Kb |
Views | 14,168 |
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!
Name | Size |
Particle Button | 3,807 Kb |
IPad Page Flip | 4,054 Kb |
Simple CSS 3D Cubes | 2,894 Kb |
Simple 3d cube | 2,963 Kb |
The final countup | 3,054 Kb |
Depth First Search Maze | 2,693 Kb |
Color Wheel. Literally. | 6,392 Kb |
Depth First Search Hexagon Maze | 3,061 Kb |
Valentines Day | 3,118 Kb |
Single Element Spinner | 2,540 Kb |
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!
Name | Username | Size |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
Responsive slide | Thorien | 2,400 Kb |
FCC Portfolio | Cmwebby | 4,304 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Twitch TV | Natester13 | 4,488 Kb |
SVG Animation | Thepheer | 4,793 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Shopping List | Markmurray | 6,015 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!