<!DOCTYPE html>
<html>
<head>
<title>Animated Stars</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: black;
overflow: hidden;
}
.star {
position: absolute;
width: 3px;
height: 3px;
background-color: white;
border-radius: 50%;
animation-name: fly;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes fly {
from {
transform: translate(0, 0);
}
to {
transform: translate(calc(50vw - 1.5px), calc(50vh - 1.5px));
}
}
#logo {
position: absolute;
top: calc(50vh - 50px);
left: calc(50vw - 50px);
width: 100px;
height: 100px;
fill: white;
opacity: 0;
animation-name: gather;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes gather {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="logo">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M50,0 L72,30 L97,35 L80,63 L85,88 L50,75 L15,88 L20,63 L3,35 L28,30 L50,0 Z"/>
</svg>
</div>
<script>
$(document).ready(function() {
// create stars
for (var i = 0; i < 100; i++) {
var x = Math.floor(Math.random() * window.innerWidth);
var y = Math.floor(Math.random() * window.innerHeight);
var star = $('<div class="star"></div>').css({top: y, left: x});
$('body').append(star);
}
// animate stars to logo
$('.star').each(function() {
$(this).animate({
top: $('#logo').offset().top,
left: $('#logo').offset().left
}, Math.floor(Math.random() * 5000) + 1000, function() {
$(this).remove();
});
});
// reveal logo
$('#logo').animate({
opacity: 1
}, 2000);
});
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.