The final countup

Developer
Timo Hausmann
Size
3,054 Kb
Views
18,216
  1. The final countup Previews
  2. The final countup HTML Codes
  3. The final countup CSS Codes
  4. The final countup JS Codes

How do I make an the final countup?

Dede-deee-de --- dede-de-de-de!. What is a the final countup? How do you make a the final countup? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.

The final countup Previews
IQ Test

The final countup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>the final countup</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! */ body { background: #333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=); text-align: center;
}
#counter { display: inline-block; font-family: 'Courier New', monospace; font-weight: bold; font-size: 80px; letter-spacing: 5px; line-height: 1; color: transparent; position: relative; margin-top: 75px; padding: 10px 20px; background: #111; border: 10px solid #222; border-color: #222 #222 #444 #222;
}
#counter:after { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVQIW2NkQAOMQL4xshhIAAVgCAAACksAOIK2gpkAAAAASUVORK5CYII=);
}
#counter span { position: absolute; right: 0; top: 0; padding: 10px 20px; color: rgba(255,255,255,0.25); text-shadow: 0 0 7px #0cf; opacity: 0; animation: fadeIn 1s;
}
#counter span.last { opacity: 1;
}
@keyframes fadeIn { from { transform: scale(0.5); opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <span id="counter">18752</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>

The final countup - Script Codes CSS Codes

body { background: #333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=); text-align: center;
}
#counter { display: inline-block; font-family: 'Courier New', monospace; font-weight: bold; font-size: 80px; letter-spacing: 5px; line-height: 1; color: transparent; position: relative; margin-top: 75px; padding: 10px 20px; background: #111; border: 10px solid #222; border-color: #222 #222 #444 #222;
}
#counter:after { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVQIW2NkQAOMQL4xshhIAAVgCAAACksAOIK2gpkAAAAASUVORK5CYII=);
}
#counter span { position: absolute; right: 0; top: 0; padding: 10px 20px; color: rgba(255,255,255,0.25); text-shadow: 0 0 7px #0cf; opacity: 0; animation: fadeIn 1s;
}
#counter span.last { opacity: 1;
}
@keyframes fadeIn { from { transform: scale(0.5); opacity: 1;
}

The final countup - Script Codes JS Codes

var $counter = $('#counter'), data, t;
init();
function init() { var val = parseInt( $counter.html() ); data = { val: parseInt( val/2 ), end: val, step: parseInt( val/100 ) }; clearTimeout(t); $counter.find('span').remove(); appendNumbers();
}
function appendNumbers() {	var delta = (1 - (data.val / data.end)) * 100,	$output;	data.val += data.step;	if( data.val > data.end ) data.val = data.end; $output = $('<span>' + data.val + '<span>'); $counter.append( $output ); if( data.val < data.end ) { t = setTimeout( appendNumbers, 1000/delta); } else { $output.addClass('last'); $counter.find('span').not('.last').remove(); }
}
$('body').on('click', init);
The final countup - Script Codes
The final countup - Script Codes
Home Page Home
Developer Timo Hausmann
Username timohausmann
Uploaded October 16, 2022
Rating 3.5
Size 3,054 Kb
Views 18,216
Do you need developer help for The final countup?

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!

Timo Hausmann (timohausmann) Script Codes
Name
Triangle Split Plane
Simple CSS 3D Cubes
Valentines Day
Spring Physics
Stream of Cables
Another Particle Demo
Depth First Search Hexagon Maze
Use your mousewheel
Simple 3d cube
Vector Based Movement
Create amazing SEO content 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!