This interactive HTML code is designed to measure and display how quickly you can scroll using your mouse wheel. The main functionality revolves around capturing your scrolling speed, updating it in real-time, and showcasing your best performance.
As you scroll, the code records the distance scrolled per second and updates a dynamic background color, font size, and a real-time display of your scrolling speed in pixels per second.
Moreover, this code allows you to create a scrolling speed test that measures how quickly users can scroll using their mouse wheel. The integration is straightforward and can be easily added to your existing project.
How to Create “How Fast Can You Scroll Game in HTML”
1. First, create the HTML structure for the scrolling game as follows:
<div class="headline">Scroll as fast as you can!</div> <div class="container"> <div class="pixels"></div> </div>
2. Add the following CSS styles to design the basic interface of the game.
html{
min-height: 100%;
min-width: 100%;
}
body{
font-family: sans-serif;
background-color: #2ecc71;
}
.container{
font-size: 42px;
text-align: center;
color: white;
font-weight: bold;
padding: auto;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
border-radius: 3px;
}
@keyframes pulse {
from {font-size: 32px;}
to {font-size: 40px;}
}
.headline{
text-align: center;
font-size: 42px;
color: #ecf0f1;
font-weight: bold;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
}
.best{
margin-top: 20px;
}
3. Now, load the jQuery and RainbowVis JS by adding the following CDN links just before closing the <body> tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdn.rawgit.com/anomal/RainbowVis-JS/28d34555/rainbowvis.js'></script>
4. Finally, add the following JavaScript code to your project to initialize the scrolling game.
var rainbow = new Rainbow();
var best = 0;
rainbow.setSpectrum("#2ecc71","#ff9a42","#e74c3c");
rainbow.setNumberRange(0, 25000);
window.addEventListener('wheel', mouseWheelEvent);
var lastSecond = [];
function mouseWheelEvent(e) {
lastSecond.push({delta:Math.floor(Math.abs(e.deltaY)), timestamp: new Date().getTime()});
}
setInterval(function(){
var pixelsPerSecond = displayLastSecond();
if(pixelsPerSecond > best){
best = pixelsPerSecond;
}
$(".pixels").text(numberWithCommas(pixelsPerSecond) + " pixels per second");
console.log(makeGradient(pixelsPerSecond));
$("body").css("background", "#" + rainbow.colourAt(pixelsPerSecond));
$(".pixels").css("font-size",fontSize(pixelsPerSecond) + "px");
if(pixelsPerSecond > 0){
$(".headline").css("display", "none");
$(".container").css("display", "block");
}else{
var headline = "Scroll as fast as you can!";
if(best > 0){
headline += "<div class='best'>Your best is "+ numberWithCommas(best)+" pixels per second</div>";
$(".headline").css("height", "100px");
}
$(".headline").html(headline);
$(".headline").css("display", "block");
$(".container").css("display", "none");
}
}, 50);
function displayLastSecond(){
var now = new Date().getTime();
var total = 0;
var timestamps = 0;
for(var x = 0; x < lastSecond.length; x++){
if(now - lastSecond[x].timestamp <= 1000){
total += lastSecond[x].delta;
timestamps++;
}else{
lastSecond.splice(x, 1);
x--;
}
}
if(timestamps == 0){
return 0;
}
return Math.round(total);
}
function fontSize(pps){
return 32 + 20 * pps/25000;
}
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function makeGradient(pps){
var color1 = rainbow.colourAt(pps);
var color2 = rainbow.colourAt(pps+5000);
return "radial-gradient(40% 40% at center, #" + color2 + ", #" + color1 + ")";
}
That’s it! hopefully, you have successfully integrated this “How Fast Can You Scroll Game in HTML” to your project. If you have any questions or suggestions, feel free to comment below.
