WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <p>Click each layer to stop.<br> Double-click to reset. </p> <div id="box"> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> </div> <script src="./script.js"></script> </body> </html>
html { min-height: 100vh; display: grid; place-items: center; background: #222; } * { box-sizing: border-box; } p { font-family: system-ui; text-align: center; color: orange; } #box { width: 250px; height: 750px; border-radius: 125px; overflow: hidden; transform: scale(0.6); box-shadow: 0px 0px 50px orange; } .layer { width: 1000px; height: 250px; float: left; outline: 1px solid #222; --speed: 1s; } .layer:nth-child(odd) { animation: spin var(--speed) linear infinite; } .layer:nth-child(even) { animation: spin var(--speed) linear reverse infinite; } .piece { width: 250px; aspect-ratio: 1/1; float: left; background: url("https://img.freepik.com/free-vector/happy-halloween-character-collection_23-2148636622.jpg?size=626&ext=jpg&ga=GA1.1.2008272138.1721779200&semt=ais_user"); background-size: 1000px 800px; } @keyframes spin { 100% { transform: translateX(-750px); } } .piece:nth-child(1), .piece:last-child { /* background: red; */ } .piece:nth-child(2) { /* background: green; */ } .piece:nth-child(3) { /* background: blue; */ } .lastpiece { /* background: red; */ } .layer:nth-child(1) .piece:nth-child(1), .layer:nth-child(1) .piece:nth-child(4) { background-position: -10px -50px; } .layer:nth-child(2) .piece:nth-child(1), .layer:nth-child(2) .piece:nth-child(4) { background-position: -10px -300px; } .layer:nth-child(3) .piece:nth-child(1), .layer:nth-child(3) .piece:nth-child(4) { background-position: -10px -550px; } .layer:nth-child(1) .piece:nth-child(2) { background-position: -250px -50px; } .layer:nth-child(2) .piece:nth-child(2) { background-position: -250px -300px; } .layer:nth-child(3) .piece:nth-child(2) { background-position: -250px -550px; } .layer:nth-child(1) .piece:nth-child(3) { background-position: -500px -50px; } .layer:nth-child(2) .piece:nth-child(3) { background-position: -500px -300px; } .layer:nth-child(3) .piece:nth-child(3) { background-position: -500px -550px; }
let layers = document.querySelectorAll(".layer"); layers.forEach(function (elm) { elm.addEventListener("click", function (e) { let p = document.elementFromPoint(e.clientX, e.clientY); elm.style.animation = "none"; if (p.classList.contains("one") || p.classList.contains("four")) { elm.style.transform = "translateX(0px)"; } if (p.classList.contains("two")) { elm.style.transform = "translateX(-250px)"; } if (p.classList.contains("three")) { elm.style.transform = "translateX(-500px)"; } }); elm.addEventListener("dblclick", function (e) { let p = document.elementFromPoint(e.clientX, e.clientY); elm.style.animation = ""; elm.style.transform = ""; }); });
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <p>Click each layer to stop.<br> Double-click to reset. </p> <div id="box"> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> </div> <script src="./script.js"></script> </body> </html>
html { min-height: 100vh; display: grid; place-items: center; background: #222; } * { box-sizing: border-box; } p { font-family: system-ui; text-align: center; color: orange; } #box { width: 250px; height: 750px; border-radius: 125px; overflow: hidden; transform: scale(0.6); box-shadow: 0px 0px 50px orange; } .layer { width: 1000px; height: 250px; float: left; outline: 1px solid #222; --speed: 1s; } .layer:nth-child(odd) { animation: spin var(--speed) linear infinite; } .layer:nth-child(even) { animation: spin var(--speed) linear reverse infinite; } .piece { width: 250px; aspect-ratio: 1/1; float: left; background: url("https://img.freepik.com/free-vector/happy-halloween-character-collection_23-2148636622.jpg?size=626&ext=jpg&ga=GA1.1.2008272138.1721779200&semt=ais_user"); background-size: 1000px 800px; } @keyframes spin { 100% { transform: translateX(-750px); } } .piece:nth-child(1), .piece:last-child { /* background: red; */ } .piece:nth-child(2) { /* background: green; */ } .piece:nth-child(3) { /* background: blue; */ } .lastpiece { /* background: red; */ } .layer:nth-child(1) .piece:nth-child(1), .layer:nth-child(1) .piece:nth-child(4) { background-position: -10px -50px; } .layer:nth-child(2) .piece:nth-child(1), .layer:nth-child(2) .piece:nth-child(4) { background-position: -10px -300px; } .layer:nth-child(3) .piece:nth-child(1), .layer:nth-child(3) .piece:nth-child(4) { background-position: -10px -550px; } .layer:nth-child(1) .piece:nth-child(2) { background-position: -250px -50px; } .layer:nth-child(2) .piece:nth-child(2) { background-position: -250px -300px; } .layer:nth-child(3) .piece:nth-child(2) { background-position: -250px -550px; } .layer:nth-child(1) .piece:nth-child(3) { background-position: -500px -50px; } .layer:nth-child(2) .piece:nth-child(3) { background-position: -500px -300px; } .layer:nth-child(3) .piece:nth-child(3) { background-position: -500px -550px; }
let layers = document.querySelectorAll(".layer"); layers.forEach(function (elm) { elm.addEventListener("click", function (e) { let p = document.elementFromPoint(e.clientX, e.clientY); elm.style.animation = "none"; if (p.classList.contains("one") || p.classList.contains("four")) { elm.style.transform = "translateX(0px)"; } if (p.classList.contains("two")) { elm.style.transform = "translateX(-250px)"; } if (p.classList.contains("three")) { elm.style.transform = "translateX(-500px)"; } }); elm.addEventListener("dblclick", function (e) { let p = document.elementFromPoint(e.clientX, e.clientY); elm.style.animation = ""; elm.style.transform = ""; }); });