title
A prototype
steps
.container{ border:1px solid tomato; width:800px; height:800px; position:relative; } .img{ position:absolute; transition:all 1s ease-out; } [data-step="1"] .img1{ left:20%; top:10%; transform:rotate(30deg); } [data-step="1"] .img2{ left:20%; top:90%; } [data-step="1"] .img3{ left:40%; top:0%; } [data-step="2"] .img1{ left:40%; top:70%; } [data-step="2"] .img2{ left:0%; top:40%; } [data-step="2"] .img3{ left:20%; top:40%; }
let button = document.querySelector('#button') let counter = 0 button.onclick = function(){ counter++ document.body.setAttribute('data-step', counter) button.innerHTML = counter }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code