B. K. Trucking Enterpise

$<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pulsating Image on Scroll</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; height: 200vh; /* Just to allow scrolling */ background: #f4f4f4; } a img { display: block; max-width: 300px; margin: 150px auto; /* Center and push down */ transition: transform 0.3s ease; } /* Pulse animation */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Class added when in view */ .pulse { animation: pulse 1s ease-in-out infinite; } </style> </head> <body>  <a href="https://example.com" target="_blank"> <img src="https://via.placeholder.com/300" alt="Pulsating Image"> </a> <script> document.addEventListener("DOMContentLoaded", function () { const img = document.querySelector("a img"); // Intersection Observer to detect when image is in viewport const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { img.classList.add("pulse"); } else { img.classList.remove("pulse"); } }); }, { threshold: 0.5 }); // Trigger when 50% visible observer.observe(img); }); </script> </body> </html>$

Click Here

Page updated

Google Sites

Report abuse