<div class="box parabolic1"><i></i></div>
<div class="box sinusoidal1"><i></i></div>
<button> Run the animations </button>
<div class="panel" >
<div>cubic-bezier(<span class="P1">0</span>,V,<span class="P2">1</span>,V):
<input type="range" min="0" max="1" step="0.1" value="0" name="P1">
<input type="range" min="0" max="1" step="0.1" value="1" name="P2">
</div>
<div>
cubic-bezier(<span class="S1">0.5</span>,V,<span class="S2">0.5</span>,-V):
<input type="range" min="0" max="1" step="0.1" value="0.5" name="S1">
<input type="range" min="0" max="1" step="0.1" value="0.5" name="S2">
</div>
</div>
<div class="debug"></div>
.box {
display:inline-block;
width:150px;
height:200px;
position:relative;
border:1px solid;
background:
linear-gradient(blue 0 0) center/100% 1px no-repeat,
linear-gradient(blue 0 0) center/1px 100% no-repeat;
}
.box i{
content:"";
position:absolute;
width:30px;
height:30px;
border-radius:50%;
background:radial-gradient(at 30% 30%,#0000,#000a) red;
left:0;
top:50%;
transform:translateY(-50%);
}
.start .parabolic1 i {
animation:
x 1s linear infinite alternate,
y1 1s infinite cubic-bezier(var(--p1,0),667,var(--p2,1),667) alternate;
}
.start .sinusoidal1 i {
animation:
x 1s linear infinite alternate,
y1 1s infinite cubic-bezier(var(--s1,0.5),1725,var(--s2,0.5),-1725) alternate;
}
@keyframes x { to {left:calc(100% - 30px)}}
@keyframes y1 {to {top:49.9%}}
/**/
d {position:fixed;height:4px;width:4px;background:#222;border-radius:50%}
button {border:none;border-radius:10px;padding:10px 20px;cursor:pointer;position:fixed;bottom:20px;right:20px;font-family:sans-serif;font-size:30px;background:#c82629;color:#fff;}
.panel {position: fixed;top: 20px;right: 20px;padding: 10px;border: 1px solid;border-radius: 10px;background: #0001;font-family: sans-serif;}
.panel div:first-child {border-bottom: 1px solid;padding-bottom: 10px;margin-bottom: 10px;}
let elem = document.querySelectorAll('i');
let start;
function debug(timestamp) {
if (start === undefined)
start = timestamp;
const elapsed = timestamp - start;
for(var i=0;i<2;i++) {
let rect = elem[i].getBoundingClientRect();
document.querySelector('.debug').insertAdjacentHTML("afterbegin",'<d style="top:'+(rect.y + rect.height/2)+'px;left:'+(rect.x + rect.width/2)+'px;"></d>')
}
if (elapsed < 2000) {
window.requestAnimationFrame(debug);
}
}
function clear() {
document.querySelector('.debug').innerHTML=" ";
start=undefined;
window.requestAnimationFrame(debug);
}
document.querySelector('[name=P1]').addEventListener('change', function() {
document.body.style.setProperty("--p1", this.value);
document.querySelector('.P1').innerHTML=this.value;
clear()
});
document.querySelector('[name=P2]').addEventListener('change', function() {
document.body.style.setProperty("--p2", this.value);
document.querySelector('.P2').innerHTML=this.value;
clear()
});
document.querySelector('[name=S1]').addEventListener('change', function() {
document.body.style.setProperty("--s1", this.value);
document.querySelector('.S1').innerHTML=this.value;
clear()
});
document.querySelector('[name=S2]').addEventListener('change', function() {
document.body.style.setProperty("--s2", this.value);
document.querySelector('.S2').innerHTML=this.value;
clear()
});
document.querySelector("button").addEventListener("click",function() {
document.body.classList.add("start");
window.requestAnimationFrame(debug);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.