A collection of fun frontend animations, mouseover effects, and more.
This is a fun effect I saw on youtube that I recreated. It uses ::before and ::after effects paired with a radial gradient to acheive a border glow. See the original on Codepen
It took a bit of work to get this one right. For a while when you hovered in the wrong spot it would vibrate back and forth. I fixed that by just checking the original position of the card instead of the hitbox of the rotated card.
This is a collection of different reveals using a blur effect. Under the hood, they all are just the original image below a blur with a mask applied to it. I used mask-image for the mask and updated css variables on mouse move to get the effect.
This effect is very fun to look at. I have a list of images that scroll in different directions. It's all generated by JS, even the images.
I have so many different variables for each snowflake. I have a speed that's porportional to the size to create a parallax effect, a variable to control the horizontal movement, one to control animation length, to name a few. P.S. If you want some fun, try changing the loop to create the snowflakes to a higher number and seeing what your browser does.
This one was a pain. Especially making them respond to swiping.
Note: It's hard to tell which way the cards should go when you press the left or right button. Half the people I talk to say one way, half say the other. I personally think it looks good if the whole stack moves right when you press the right button but I was told it was reversed.
Rearrange the order of the cards! Selected area highlight included.