Report Blog Entry
This sort of took me forever because I know little to nothing about coding, I brute forced this thing to work so if anyone smarter has any improvements/suggestions, feel free to comment them. I don't know how to make it adjust to smaller screens because I'm dumb, but I'm sure someone can figure it out. There has to be a tutorial somewhere.
Paste this into your "Who I'd like to meet," It used to work in the "About me" too, but it broke idk you can try it tho. Get the image links by right-clicking and clicking: "Copy Image Address." Sometimes the image won't work depending on where it's linked from, you may have to use a website like THIS and upload your image and then copy it into the code. Don't leave the "[]" In the code BTW.
<!--THE LENGTH AND HEIGHT OF THE BOX THE IMAGES WILL BE IN. IF YOU EXPAND OR SHRINK THIS, YOU'LL HAVE TO CHANGE THE SCROLLING ANIMATION'S 50% KEYFRAME TO SOMETHING ELSE.-->
<div style="width: 400px; height: 130px; background-color: black; border: 3px solid #FFFFFF80; overflow: hidden; position: relative;">
<!--TBH I DON'T KNOW WHAT ANYTHING HERE DOES EXCEPT THE 20s (How long the animation takes to complete), THE "INFINITE" KEEPS IT GOING... INFINITELY, AND bounceScroll MAKES IT MOVE.-->
<div style="display: flex; width: max-content; animation: bounceScroll 20s ease-in-out infinite;">
<!--ADD YOUR IMAGE LINKS BELOW.-->
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<img src="[IMAGE LINK HERE]" width="130" height="130" alt="Natural"/>
<!--THE SCROLLING ANIMATION... funny number 69 only works with the 400px width. The -69% means how far it scrolls to the right. If you change the percentage, you'll have to change the width. translateX means side-to-side, translateY would mean up and down.-->
<style>
@keyframes bounceScroll {
0% { transform: translateX(0); }
50% { transform: translateX(-69%); }
100% { transform: translateX(0); }
}
</style>
Here's an example of it:
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
ashton
THIS IS SO COOL!!! 100% GONNA USE THIS WHEN IVE GOT THE MOTIVATUION TO EDIT MY PROFILE LOL
YAUY THATS SO AWESOME!! TELL ME WHEN U DO
by Grimal_kai; ; Report