Logo animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.parentDiv{
height:600px;
position:relative;
}
.heroBg {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
background: black;
display: flex;
flex-wrap: wrap;
}
@media (max-height:768px){
.heroBg {
position: relative;
height: 560px;
}
}
#heroOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), black);
}
.tile {
position: relative;
width: 100px; /* Adjust size as needed */
height: 100px; /* Adjust size as needed */
background: black;
}
.tile img {
width: 100px;
height: 100px;
opacity: 0;
transform: scale(0);
transition: opacity 2s, transform 2s;
}
.tile:hover img {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s, transform 0.5s; /* Fast fade-in and grow */
}
.trail {
position: absolute;
width: 50px; /* Adjust size as needed */
height: 50px; /* Adjust size as needed */
pointer-events: none; /* Ensure the trail elements don't interfere with mouse events */
}
.trail img {
width: 50px;
height: 50px;
opacity: 1;
transform: scale(1);
transition: opacity 2s, transform 2s;
}
.trail.fade-out img {
opacity: 0;
transform: scale(0);
}
</style>
<div class="parentDiv">
<div class="heroBg" id="heroBg"></div>
<div class="" id="heroOverlay">Hello World</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const heroBg = document.getElementById('heroBg');
const imagePaths = [
'https://isarvait.com/wp-content/uploads/2022/02/cropped-favicon-192x192.png',
'https://isarvait.com/wp-content/uploads/2022/02/cropped-favicon-192x192.png',
'https://isarvait.com/wp-content/uploads/2022/02/cropped-favicon-192x192.png',
'https://isarvait.com/wp-content/uploads/2022/02/cropped-favicon-192x192.png'
];
const tileSize = 100; // Adjust this to the size of your logo "b"
const trailSize = 50; // Adjust this to the size of your logo "b" for the trail
let lastTrailTime = 0;
const trailInterval = 100; // Time in milliseconds between trail elements
function createTile(imagePath) {
const tile = document.createElement('div');
tile.className = 'tile';
const img = document.createElement('img');
img.src = imagePath;
tile.appendChild(img);
tile.addEventListener('mouseenter', function() {
img.style.opacity = 1;
img.style.transform = 'scale(1)';
img.style.transition = 'opacity 0.5s, transform 0.5s';
});
tile.addEventListener('mouseleave', function() {
img.style.opacity = 0;
img.style.transform = 'scale(0)';
img.style.transition = 'opacity 2s, transform 2s';
});
return tile;
}
function populateTiles() {
const rows = Math.ceil(heroBg.offsetHeight / tileSize);
const cols = Math.ceil(heroBg.offsetWidth / tileSize);
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const imagePath = imagePaths[Math.floor(Math.random() * imagePaths.length)];
const tile = createTile(imagePath);
heroBg.appendChild(tile);
}
}
}
function createTrailImage(imagePath, x, y) {
const trail = document.createElement('div');
trail.className = 'trail';
trail.style.left = `${x - trailSize / 2}px`; // Center the image on the cursor
trail.style.top = `${y - trailSize / 2}px`; // Center the image on the cursor
const img = document.createElement('img');
img.src = imagePath;
trail.appendChild(img);
heroBg.appendChild(trail);
// Trigger fade-out and shrink after a short delay
setTimeout(() => {
trail.classList.add('fade-out');
// Remove the element after the transition ends
img.addEventListener('transitionend', () => {
trail.remove();
});
}, 100);
return trail;
}
function handleMouseMove(event) {
const now = Date.now();
if (now - lastTrailTime > trailInterval) {
const x = event.clientX;
const y = event.clientY;
const imagePath = imagePaths[Math.floor(Math.random() * imagePaths.length)];
createTrailImage(imagePath, x, y);
lastTrailTime = now;
}
}
populateTiles();
window.addEventListener('resize', function() {
heroBg.innerHTML = ''; // Clear existing tiles
populateTiles();
});
heroBg.addEventListener('mousemove', handleMouseMove);
});
</script>
</body>
</html>