What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help How can I make an image spin? How can I lay an image over a background box?

JayceeJellies

Eternal Jellyfish
I have 2 questions with examplese. First, I want to make a star image spin. I know how to do it in CSS, but it doesn't seem to work here. I also would like to lay the stars that spin over my text bg box. Image:

Image url:


asdfghjkl;'​


 

VALEN T.

𝘧𝘢𝘭𝘭𝘦𝘯 𝘱𝘳𝘪𝘥𝘦
we used to have this thing "bbscript" that could be used for animations and such but unfortunately, that isn't a part of the site features anymore. you can still incorporate a spin by using fa icons instead:

Code:
[fa]fa-star fa-spin fa-2x[/fa] [fa]fal fa-star fa-spin fa-2x[/fa]

you can add it in the corner of the purple background by doing something like this:

Code:
[border=0; padding: 0; border-radius: 10px; background: #CCCCFF; height: 130px; width: calc(100% - 15px); margin-left: 15px; position: relative;][border=
0; box-sizing: border-box; padding: 0; position: absolute; top: -35px; left: -15px; color: #FFE59E; font-size: 50px;][fa]fa-star fa-spin[/fa][/border][/border]

and of course, you can always add more fa spin-y stars as well :>

hope this helps !
 

JayceeJellies

Eternal Jellyfish
we used to have this thing "bbscript" that could be used for animations and such but unfortunately, that isn't a part of the site features anymore. you can still incorporate a spin by using fa icons instead:

Code:
[fa]fa-star fa-spin fa-2x[/fa] [fa]fal fa-star fa-spin fa-2x[/fa]

you can add it in the corner of the purple background by doing something like this:

Code:
[border=0; padding: 0; border-radius: 10px; background: #CCCCFF; height: 130px; width: calc(100% - 15px); margin-left: 15px; position: relative;][border=
0; box-sizing: border-box; padding: 0; position: absolute; top: -35px; left: -15px; color: #FFE59E; font-size: 50px;][fa]fa-star fa-spin[/fa][/border][/border]

and of course, you can always add more fa spin-y stars as well :>

hope this helps !
Thanks so much! I appreciate it. Do you know if it's possible to make it rock back and forth instead of spin? Can I do it with an image instead of the fa spin code?
 

VALEN T.

𝘧𝘢𝘭𝘭𝘦𝘯 𝘱𝘳𝘪𝘥𝘦
Thanks so much! I appreciate it. Do you know if it's possible to make it rock back and forth instead of spin? Can I do it with an image instead of the fa spin code?
no, i'm sorry i don't really know how to do that :( but i'm sure there's many other people here who do, and they'll definitely help you out !
 

Alteras

The Sleepy One
Moderator
Supporter
So... this is gonna be pretty jank. Since we no longer have custom animations, we have to rely on built in animations that our CSS can call. And the only place where this site gets any CSS animation from is Font Awesome. So we have the whole library of animations that FA offers (which is really just one).

So, we simply just use the name of the animation, fa-spin as the value of animation-name in the CSS injection.

Now, we can't change preexisting animations, and we can't make our own. But, we can abuse the limits of HTML and CSS to achieve any motion that can be defined by the rotation of any number of tangent circles. The idea is to make a big spinner, and at the edge make another spinner, and make another one on the edge of that, and so on and so forth. Unfortunately, we don't have fa-pendulum, so we can't go too crazy.
 
Last edited:

JayceeJellies

Eternal Jellyfish
So... this is gonna be pretty jank. Since we no longer have custom animations, we have to rely on built in animations that our CSS can call. And the only place where this site gets any CSS animation from is Font Awesome. So we have the whole library of animations that FA offers (which is really just two).

So, we simply just use the name of the animation, fa-spin and fa-pulse as the value of animation-name in the CSS injection.

Now, we can't change preexisting animations, and we can't make our own. But, we can abuse the limits of HTML and CSS to achieve any motion that can be defined by the rotation of any number of tangent circles. The idea is to make a big spinner, and at the edge make another spinner, and make another one on the edge of that, and so on and so forth. Unfortunately, we don't have fa-pendulum, so we can't go too crazy.
aw :( okay, thanks for the info <3
 

weldherwings

𝘣𝘶𝘳𝘯
just gonna pop in here to say that 'animation: fa-spin 3s linear infinite;' also works
you can change the seconds on it to make it however fast or slow you want it

for example - this is 3s:




Code:
[border=0; padding: 0; border-radius: 10px; background: #CCCCFF; height: 130px; width: calc(100% - 15px); margin-left: 15px; position: relative;][border=
0; width:50px; height:50px; background:url(https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fi.imgur.com%2FN9wyTnU.png&hash=1c09a4aff396cf4d5913a0cbadf9af0a); background-size:cover;box-sizing: border-box; padding: 0; position: absolute; top: -35px; left: -5px; color: #FFE59E; animation: fa-spin 3s linear infinite][/border][/border]
this is 1s:





Code:
[border=0; padding: 0; border-radius: 10px; background: #CCCCFF; height: 130px; width: calc(100% - 15px); margin-left: 15px; position: relative;][border=
0; width:50px; height:50px; background:url(https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fi.imgur.com%2FN9wyTnU.png&hash=1c09a4aff396cf4d5913a0cbadf9af0a); background-size:cover;box-sizing: border-box; padding: 0; position: absolute; top: -35px; left: -5px; color: #FFE59E; animation: fa-spin 1s linear infinite][/border][/border]
and this is 10s:





Code:
[border=0; padding: 0; border-radius: 10px; background: #CCCCFF; height: 130px; width: calc(100% - 15px); margin-left: 15px; position: relative;][border=
0; width:50px; height:50px; background:url(https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fi.imgur.com%2FN9wyTnU.png&hash=1c09a4aff396cf4d5913a0cbadf9af0a); background-size:cover;box-sizing: border-box; padding: 0; position: absolute; top: -35px; left: -5px; color: #FFE59E; animation: fa-spin 10s linear infinite][/border][/border]
 

Alteras

The Sleepy One
Moderator
Supporter
ahh, right! I forgot. Although we are limited to fa-spin for our animation name, we can use the timing function to alter how it works. So we can achieve a bit more radical things using the stepper function or the alternate function. Maybe even use the cubic-bezier function.
 

weldherwings

𝘣𝘶𝘳𝘯

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top