Svelte-less Javascript

[oncena]

Would you be willing to release a vanilla javascript to make things easier to implement on a HTML/CSS/JS bundle without the need to compile JS?

[simeydotme]

Hi @oncena , thanks for the interest!
I don't think I would but I would remind that the generated code on my demo website can be copied. It's just HTML and CSS!
You can get the cards rendering with no interaction just by taking the HTML layout and the css classes. Then everything is animated with CSS Variables.

So if you are more comfortable just writing vanilla JS, you could copy the css/html and write your own JS to animate and interact! :)

[oncena]

Hi @simeydotme, thank you for your awesome work. I already have written a standalone JS for that exact purpose. No fancy easing like yours, but it'll get the job done.

let revs = 1;
let maxi = 25;
$(".card").mousemove(function(event){
let cordx = (event.pageX - $(this).offset().left) / $(this).outerWidth();
let cordy = (event.pageY - $(this).offset().top) / $(this).outerHeight();
cordx = Math.min(Math.max(cordx, 0), 1);
cordy = Math.min(Math.max(cordy, 0), 1);
let centx = Math.abs(50 - cordx * 100) * 2 / 100;
let centy = Math.abs(50 - cordy * 100) * 2 / 100;
let tiltx = (revs * (maxi - cordx * maxi * 2)).toFixed(2);
let tilty = (revs * (cordy * maxi * 2 - maxi)).toFixed(2);
let centr = Math.sqrt(Math.pow(centx,2) + Math.pow(centy,2));
$(this).css("--pointer-x",cordx * 100 + "%");
$(this).css("--pointer-y",cordy * 100 + "%");
$(this).css("--pointer-from-center",centr);
$(this).css("--pointer-from-top",cordx);
$(this).css("--pointer-from-left",cordy);
$(this).css("--card-opacity",1);
$(this).css("--card-scale",1);
$(this).css("--rotate-x",tiltx + "deg");
$(this).css("--rotate-y",tilty + "deg");
$(this).css("--background-x",(cordx * 100 - 30) + "%");
$(this).css("--background-y",(cordy * 100 - 30) + "%");
});
$(".card").mouseleave(function(){
$(this).css("--pointer-x","50%");
$(this).css("--pointer-y","50%");
$(this).css("--pointer-from-center",0);
$(this).css("--pointer-from-top",50);
$(this).css("--pointer-from-left",50);
$(this).css("--card-opacity",0);
$(this).css("--card-scale",1);
$(this).css("--rotate-x","0deg");
$(this).css("--rotate-y","0deg");
$(this).css("--background-x","50%");
$(this).css("--background-y","50%");
});