sleepy's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Falling gif tutorial

posting a tutorial because i didnt have one when i first figured this out (literally 3 minutes ago)

So first you wanna open this in a new tab:
https://codepen.io/mycatisreallycute/pen/RwopQwE
all credits to the og creator but anyways ,as u can see theres already gifs in there because i used the same site for my falling gifs but anyways- to customize it with your own gifs you want to go to this site in a new tab;
https://tenor.com/search/kawaii-pixel-stickers
and search whatever gif you want to use, make sure to do this with sticker gifs only.
Then after you find the sticker gif you want to use simply right click the image and click the Copy image address button, after that go back to the CSS falling snowflake page and replace the links already there with your own.

Now its time to add it to your profile, first you add both the html and the CSS into your about me section of your profile, then in the Your Interest section, the general box- just put the html code. 
After that click save and add and it should work! Please comment if there are any errors or if you need help, i will try my best to help the best i can.


22 Kudos

Comments

Displaying 6 of 6 comments ( View all | Add Comment )

sleepy

sleepy's profile picture
Pinned

You can also change the size of the gifs, 35 is preferred but it is automatically set to 50.


Report Comment

matthew T

matthew T's profile picture

my gifs are only showing in the boxes and arent doing the animation of it falling ;-;


Report Comment

Divine₊˚⊹♡₊⦮⑅⦯

Divine₊˚⊹♡₊⦮⑅⦯'s profile picture

TYSMM!!


Report Comment

Shil0h

Shil0h's profile picture

This is literally so helpful omg
the only other post i saw on this was just the code and I was so confused LOL


Report Comment

princess sparkles

princess sparkles's profile picture

cant figure out the CSS part :,)


Report Comment

uw4ntg1g1✮

uw4ntg1g1✮'s profile picture

obsessed w ur background layout ;c


Report Comment



tysm!!!!!!!!!

by sleepy; ; Report