Mousewheel indicator animation
How do I make an mousewheel indicator animation?
HTML/CSS3 friendly mousewheel indicator for enhanced website navigation. What is a mousewheel indicator animation? How do you make a mousewheel indicator animation? This script and codes were developed by Sylvain Reucherand on 01 November 2022, Tuesday.
Mousewheel indicator animation Previews
Mousewheel indicator animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mousewheel indicator animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class='mouse-indicator no-animation'> <span class='mouse'> <span class='wheel'></span> </span>
</span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Mousewheel indicator animation - Script Codes CSS Codes
body { background-color: #494949;
}
* { box-sizing: border-box;
}
/* Mouse indicator */
.mouse-indicator { -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.mouse-indicator .mouse { position: absolute; top: 50px; left: 50%; display: block; width: 16px; height: 30px; background-color: #ffffff; border-radius: 8px; opacity: 1; -webkit-animation: bounce 2.5s linear infinite 1s; -moz-animation: bounce 2.5s linear infinite 1s; animation: bounce 2.5s linear infinite 1s;
}
.mouse-indicator .mouse .wheel { display: block; width: 4px; height: 20px; margin: 5px auto auto; overflow: hidden; border-radius: 2px; -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTIsMjBMMiwyMGMtMS4xLDAtMi0wLjktMi0yVjJjMC0xLjEsMC45LTIsMi0yaDBjMS4xLDAsMiwwLjksMiwydjE2QzQsMTkuMSwzLjEsMjAsMiwyMHoiLz4NCjwvc3ZnPg0K); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);
}
.mouse-indicator .mouse .wheel:before { content: ''; display: block; width: inherit; height: inherit; background-color: #494949; border-radius: 2px; -webkit-transform: translateY(-60%); -moz-transform: translateY(-60%); -ms-transform: translateY(-60%); -o-transform: translateY(-60%); transform: translateY(-60%); -webkit-animation: wheel 2.5s linear infinite 1s; -moz-animation: wheel 2.5s linear infinite 1s; animation: wheel 2.5s linear infinite 1s;
}
/* Initial state */
.mouse-indicator.no-animation { opacity: 0; -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); -o-transform: translateY(25px); transform: translateY(25px);
}
.mouse-indicator.no-animation .mouse,
.mouse-indicator.no-animation .mouse .wheel:before { -webkit-animation: none; -moz-animation: none; animation: none;
}
/* Keyframes definition */
@-webkit-keyframes wheel { 0% { -webkit-transform: translateY(-60%); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 20% { -webkit-transform: translateY(60%); } 22% { -webkit-transform: translateY(60%); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 42% { -webkit-transform: translateY(-60%); } 100% { -webkit-transform: translateY(-60%); }
}
@-moz-keyframes wheel { 0% { -moz-transform: translateY(-60%); -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 20% { -moz-transform: translateY(60%); } 22% { -moz-transform: translateY(60%); -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 42% { -moz-transform: translateY(-60%); } 100% { -moz-transform: translateY(-60%); }
}
@keyframes wheel { 0% { -webkit-transform: translateY(-60%); -moz-transform: translateY(-60%); -ms-transform: translateY(-60%); -o-transform: translateY(-60%); transform: translateY(-60%); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 20% { -webkit-transform: translateY(60%); -moz-transform: translateY(60%); -ms-transform: translateY(60%); -o-transform: translateY(60%); transform: translateY(60%); } 22% { -webkit-transform: translateY(60%); -moz-transform: translateY(60%); -ms-transform: translateY(60%); -o-transform: translateY(60%); transform: translateY(60%); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 42% { -webkit-transform: translateY(-60%); -moz-transform: translateY(-60%); -ms-transform: translateY(-60%); -o-transform: translateY(-60%); transform: translateY(-60%); } 100% { -webkit-transform: translateY(-60%); -moz-transform: translateY(-60%); -ms-transform: translateY(-60%); -o-transform: translateY(-60%); transform: translateY(-60%); }
}
@-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 20% { -webkit-transform: translateY(6px); } 22% { -webkit-transform: translateY(6px); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 42% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes bounce { 0% { -moz-transform: translateY(0); -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 20% { -moz-transform: translateY(6px); } 22% { -moz-transform: translateY(6px); -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 42% { -moz-transform: translateY(0); } 100% { -moz-transform: translateY(0); }
}
@keyframes bounce { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 20% { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } 22% { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 42% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
}
Mousewheel indicator animation - Script Codes JS Codes
(function() { setTimeout((function() { return $('.mouse-indicator').removeClass('no-animation'); }), 1000);
}).call(this);
| Developer | Sylvain Reucherand |
| Username | sreucherand |
| Uploaded | November 01, 2022 |
| Rating | 4.5 |
| Size | 4,740 Kb |
| Views | 12,144 |
Do you need developer help for Mousewheel indicator animation?
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!
Sylvain Reucherand (sreucherand) Script Codes
| Name | Size |
| Flower expansion | 3,425 Kb |
| Closest point of a polygon to another point | 3,203 Kb |
| Blurred text | 3,500 Kb |
| A Pen by Sylvain Reucherand | 3,847 Kb |
| Spinner | 4,080 Kb |
| UI Buttons animation | 6,420 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Using Flickr API | MoyArt | 6,761 Kb |
| Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
| 3d css cube | Semenchenko | 4,578 Kb |
| Tumblr API | Juanv911 | 2,436 Kb |
| CSS Grid Overlay | Cliffpyles | 3,090 Kb |
| Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
| Bootstrap example | Ssaakkaa | 2,716 Kb |
| TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
| Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
| A Pen by Jess | Jessamyne | 5,100 Kb |
Do you want hide your ip address?
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!