ivan / renato
twsa
minor, fictionkin
beep boop wip
sorry if it's laggy
“ To me, you are my black sorrow. ”
FREE PALESTINE!! https://arab.org/click-to-help/palestine/
remember, being 'neutral' or ignoring their calls for help, is just as bad as being pro isreal.
⠀ ⠀⠀‿︵ Hello Everyone! ☁️ ‿ I’m here to spread this yet again, as I have done on my other socials… Please spread this as much as you can! Please do not forget about it! 🤍🇵🇸 https://rentry.co/yabujin
#profile questions
How did you do that loading animation. Also the pet thing I can only see his head
The only being able to see his head thing is on purpose, he pops up when you tap or hover over him so he doesn’t obstruct view too much
For the loading gif I imported it in my bio using the <img/>
tag and gave it an id
And for the css code
#gif-id-name { position: absolute; bottom: 0rem; left: 0rem; z-index: 2; width: 100%; height: 100%; opacity: 100%; display: inline; animation: fade 5s forwards; pointer-events: none; } @keyframes fade { 100% { opacity: 0%; display: none; } }
Do keep in mind that width
and height
will stretch or squish the gif to fit the screen, it’s intentional as I thought it looked funny if he were to be very squished on mobile and very stretched on pc and/or iPad
OMG your profile is so DOPE!! How’d you get it to be animated like that? It’s so cool :D
Thank you! For the animations I suggest reading up on the css animation
property, it's how I animated everything on my profile
An example code I have is below
.profile_avatar {
animation: float 3s infinite;
}
@keyframes float {
0% { transform: translateY(-0.5rem); }
50% { transform: translateY(0rem); }
100% { transform: translateY(-0.5rem); }
}
.profile_avatar
selects only the avatar in your profile card, and animation
specifies the name, duration, and timing function of the animation, @keyframes [animation name]
specifies which animation you'd like to specify the keyframes of, and the 0%
, 50%
, and 100%
inside are the keyframes which made my profile avatar float
Of course more information about other animation properties are talked about in the w3schools link above so I highly recommend reading it
HOW DID YOU GET THE TRANSPARENT HEADER AND IMAGE BACKGROUND OMG
image background is just like how you would in css, url(imagelink)
and the header is a transparent linear gradient, do note that the gradient will be on other elements with the primary colour, it's not that bothersome on my theme because of how dark everything else is but on lighter themes it'll probably be more noticeable linear-gradient(colour, transparent)
you could also just make the header transparent with rgba(0, 0, 0, 0)
⠀
i hope that by answering this question you will be able to come up with some cool themes _