Pikachu Video html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading Screen with Custom Mouse</title>
<!-- CSS -->
<style>
* {
cursor: none;
}
body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* Loading screen */
.loading {
position: fixed;
top: 0;
left: 0;
background-color: #ffffff;
}
/* Loading image */
.loading img {
display: block;
min-width: 200px;
min-height: 209px;
}
/* Custom mouse */
.mouse {
height: 25px;
width: 25px;
border-radius: 100%;
background-color: #fff782;
position: absolute;
animation: mouseAnimation .5s infinite ease-in-out alternate;
left: 0;
top: 0;
}
@keyframes mouseAnimation {
from {
width: 25px;
height: 25px;
}
to {
width: 15px;
height: 15px;
}
}
</style>
</head>
<body>
<!-- HTML -->
<div class="loading">
<img src="http://a.top4top.net/p_1990j031.gif" alt="Loading">
</div>
<div class="mouse original"></div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- JavaScript -->
<script>
$(function () {
function centerLoader() {
$(".loading").height($(window).height());
$(".loading").width($(window).width());
$(".loading img").css({
paddingTop: ($(".loading").height() - $(".loading img").height()) / 2,
paddingLeft: ($(".loading").width() - $(".loading img").width()) / 2
});
}
// Initial setup
centerLoader();
// Resize handling
$(window).resize(function () {
centerLoader();
});
// Mouse move
$(window).mousemove(function (e) {
$(".original").css({
left: e.pageX - 16,
top: e.pageY - 16
});
});
// Click clone effect
$("body").on("click", function (e) {
$(".original")
.clone(true)
.appendTo("body")
.css({
left: e.pageX - 16,
top: e.pageY - 16
})
.removeClass("original");
});
});
</script>
</body>
</html>
Comments
Post a Comment