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

[JayceeJellies]

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;'​

 

[JayceeJellies]

 

[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:

[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:

[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]

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:

[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:

[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]

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.

 

[JayceeJellies]

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

 

[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:

[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:

[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:

[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]

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]

JayceeJellies i don't know if it's much help now, but i've created a tutorial about animations!

Tutorial - -- 𝙠𝙚𝙧𝙤𝙗𝙚𝙧𝙤𝙨' 𝙜𝙪𝙞𝙙𝙖𝙣𝙘𝙚

Ola amigos! A while back, I asked if there was anyone who would like to have some tutorials to how I make my codes. Well, here it is! I'll be coming up with different types of series such as "Come Code With Me" and "Back to Basics". Please keep in mind I am not a pro-coder like some of the...

www.rpnation.com