Force Counter

Developer
Ken Lauguico
Size
2,732 Kb
Views
8,096
  1. Force Counter Previews
  2. Force Counter HTML Codes
  3. Force Counter CSS Codes
  4. Force Counter JS Codes

How do I make an force counter?

What is a force counter? How do you make a force counter? This script and codes were developed by Ken Lauguico on 22 December 2022, Thursday.

Force Counter Previews
IQ Test

Force Counter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Force Counter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <audio preload="auto"> <source src="https://www.google.com/images/egg/beyond/byns0.mp3" type="audio/mpeg" />
</audio>
<span>
<div class="pretext">FORCE HAS BEEN SAID</div>
<div id="shot-count">0</div>
<div class="subtext">TIMES</div>
</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>

Force Counter - Script Codes CSS Codes

body { background: #000 url(//cssanimation.rocks/demo/starwars/images/bg.jpg); overflow:hidden;
}
#shot-count { color: white; margin: auto; text-align: center; font-size: 35vw;
}
span { display:block; transform: perspective(500px) rotateX(50deg); height:66.5vw;width:100%; position:absolute; margin:auto; left:0;right:0;bottom:0;top:0;
}
.pretext, .subtext { color: yellow; font-size: 5vw; text-align: center; font-family:sans-serif;
}
.subtext { margin-top:-4.5vw;
}
/* Animations */
.fade-in { -webkit-animation: fade-in 5s 3s backwards; -moz-animation: fade-in 5s 3s backwards; animation: fade-in 5s 3s backwards;
}
@-moz-keyframes fade-in { from { -moz-transform: translateY(30px); opacity: 0; } to { -moz-transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes fade-in { from { -webkit-transform: translateY(30px); opacity: 0; } to { -webkit-transform: translateY(0); opacity: 1; }
}
@keyframes fade-in { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; }
}
.grow-fade-in { -webkit-animation: grow-fade-in 4s backwards ease-out; -moz-animation: grow-fade-in 4s backwards ease-out; animation: grow-fade-in 4s backwards ease-out;
}
@-moz-keyframes grow-fade-in { from { -moz-transform: scale(0.7); opacity: 0; } to { -moz-transform: scale(1); opacity: 1; }
}
@-webkit-keyframes grow-fade-in { from { -webkit-transform: scale(0.7); opacity: 0; } to { -webkit-transform: scale(1); opacity: 1; }
}
@keyframes grow-fade-in { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; }
}

Force Counter - Script Codes JS Codes

// Created this tool for a Star Wars Marathon where every time Force has been said, the entire party has to take a drink/shot!
var shotCount = (localStorage.getItem("forceCount")) ? localStorage.getItem("forceCount") : 0;
$("#shot-count").text(shotCount);
var timeout;
$(document).keydown(function(event) { if (event.keyCode == 32) { resetAnimations(); turnOnSiren(); playSoundBite(); setTimeout(function() { increaseShotCount(); animate(); }, 1); } if (event.keyCode == 38) increaseShotCount(); if (event.keyCode == 40) decreaseShotCount();
});
function increaseShotCount() { shotCount++; checkSingular(); $("#shot-count").text(shotCount); saveCount();
}
function decreaseShotCount() { if (!shotCount) return; shotCount--; checkSingular(); $("#shot-count").text(shotCount); saveCount();
}
function saveCount() { localStorage.setItem("forceCount", shotCount);
}
function checkSingular() { if (shotCount == 1) $(".subtext").text("TIME"); else $(".subtext").text("TIMES");
}
function playSoundBite() { var audio = $(document).find("audio").get(0); audio.volume = 1; audio.currentTime = 0; audio.play(); clearTimeout(timeout); timeout = setTimeout(function() { $("audio").animate({volume: 0}, 1000, function () { audio.pause(); resetAnimations(); }); }, 15500);
}
function turnOnSiren() { $.post("");
}
function animate() { $('.pretext, .subtext').addClass("fade-in"); $('#shot-count').addClass("grow-fade-in");
}
function resetAnimations() { $('.pretext, .subtext').removeClass("fade-in"); $('#shot-count').removeClass("grow-fade-in");
}
Force Counter - Script Codes
Force Counter - Script Codes
Home Page Home
Developer Ken Lauguico
Username kenlauguico
Uploaded December 22, 2022
Rating 3
Size 2,732 Kb
Views 8,096
Do you need developer help for Force Counter?

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!

Ken Lauguico (kenlauguico) Script Codes
Name
Just an animated underline
Fourground Logo
Simple Dot Loader
A Pen by Ken Lauguico
A Responsive Menu
Pure CSS Image Slider
Animated Captions via data- Attribute
Protoshow.js Demo
Typing Simulator
Flat Email Form
Create amazing sales emails 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!