WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effetto carta
1524
ledoc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
16 March 2024
11 September 2025
Gioco Brick Breaker HTML Canvas JavaScript
18 December 2024
Serie S24
HTML
Copy
Card Hover Effect
CSS
Copy
*, *::after, *::before { padding: 0; margin: 0; box-sizing: border-box; } body { overflow: hidden; height: 100vh; background: #061727; } img { max-width: 100%; } main { display: grid; place-items: center; height: 100%; } #wand { width: 100px; aspect-ratio: 1 / 10; background: linear-gradient( to right, rgb(26 44 28) 10%, rgb(42 40 44) 45% 55%, rgb(26 24 28) 90% ); overflow: hidden; border-radius: 3vmin; box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%); position: absolute; left: 50%; top: 5%; translate: -50%; z-index: 100; } .cap { height: 20%; background: linear-gradient( to right, rgb(212 221 236) 10%, rgb(255 255 255) 45% 55%, rgb(212 221 236) 90% ); } .gallery { display: flex; justify-content: center; align-items: center; gap: 1rem; } .tile { aspect-ratio: 1; height: 400px; width: 400px; background: #1b2734; border-radius: 15%; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset; -webkit-box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset; -moz-box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset; } .tile-image { position: absolute; z-index: 2; aspect-ratio: 1; object-fit: cover; object-position: center; } .tile > .tile-image { opacity: var(--opacity); filter: blur(calc(var(--blur) * 10px)); }
JS
Copy
const wand = document.getElementById("wand"); window.onmousemove = (e) => { const mouseX = e.clientX; const mouseY = e.clientY; const wandX = window.innerWidth * -0.15 + mouseX * 1.3; const wandY = window.innerHeight * 0.1 + mouseY * 0.4; const mouseXAsDecimal = mouseX / window.innerWidth; wand.animate( { left: `${wandX}px`, top: `${wandY}px`, rotate: `${-10 + 20 * mouseXAsDecimal}deg`, }, { duration: 400, fill: "forwards", } ); const tiles = document.getElementsByClassName("tile"); for (const tile of tiles) { const dimensions = tile.getBoundingClientRect(); const relativeWandX = wandX - dimensions.left, relativeWandXAsDecimal = relativeWandX / dimensions.width; const opacity = relativeWandXAsDecimal, blur = 1 - relativeWandXAsDecimal; tile.style.setProperty("--opacity", opacity); tile.style.setProperty("--blur", blur); } };