Floating Profile Animation

Tags: float, floating, animation, floating animation

Description:

i nearly drove myself crazy trying to figure out how to make things float so i figured i'd help other people out by posting it here (and if here isn't the right place for it, sorry!)

you'll take whats posted in the layout code section and put it at the very bottom of your style code, right above the last /style is, and anywhere you want something to float you'll toss in "animation: floating 3s ease-in-out infinite"

if you want the whole profile to float you'll put it where the main section is, so for example from my profile code it would look like this!:

main {
background-color: #F79BB7;
color: white;
animation: floating 3s ease-in-out infinite
}

play around with where you put it to see what you can make float, and have fun! [EDIT] i didn't realize until now it deleted part of my tutorial, im so sorry! i've just fixed it and, since im here, i'll plug this link here https://nein-mc.neocities.org/csstest/ for coding your profile in real time, it helps with playing around!

Code:

<!-- (c) Layout created by remy (https://layouts.spacehey.com/layout?id=27197) -->

.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

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

⛧𝕽𝕺𝖃𝕴𝕰_𝕽𝕬𝕮𝕮𝕺𝕺𝕹⛧	1708913834 Do you think you can add it in my code? I really don't know where I should put it lol Report Comment
✦	1705729310 everytime i put it- it just show into the abt me section and it doesnt like- work lol.. can u help me¿ comment on my profile so i dont forget to give u my layout :3 Report Comment
Alakay🎸⋆⭒˚｡⋆	1705595846 using. Report Comment
QQ	1704660955 hellooo im sorry to disturb you but i got lost where to put it, i tried putting it around but sadly nothing seem to work ? thank you so much for your time in advance Report Comment
★boy kisser★	1701605800 hey! im not sure if its meant to do it but the code makes all the gifs outside the box go inside of it and its a little annoying, can i change this somehow? Report Comment
jadeskullz	1699660337 hi!! can u please help me w mine? ill share u my code x_x Report Comment what code do u use to do the floating animation? by isita; 1704753939; Report
MindlightXD	1699660092 can u help me please? Report Comment
Xx_marlowe_xX	1697428570 can u help with mine pls Report Comment
wynter ☆	1696737832 hi ! sorry i'm rlly confused on how the 'main' in the code works and how to make my whole profile float . could u help me ? T.T Report Comment sure! if you send me the code you're using over pastebin i could probably get it working for you :O by remy; 1696904460; Report ermm wut is pastebin o.0 SORRY ! T,T by wynter ☆; 1697073768; Report pastebin is a website where you can post plain text and then upload it kind of like a link, its helpful for sharing a lot of text (like code for example!) without making the scrollbar really long by remy; 1697267391; Report oh ok ! i made an account , should i copy and paste my layout into pastebin and then create a link ? by wynter ☆; 1697307655; Report Hiii!!, can you help me plzzz? TT by zentellitaa; 1705519357; Report
'•.¸♡ SaraKa ♡¸.•'	1693000564 Hi ! Sorry, could u help me ? ( ; ω ; ) Im having a hard time making it work Report Comment hi sure! if you send me your code through a pastebin or something i'll see whats up :O by remy; 1696125965; Report
xavier (editing layout)	1689181273 The code only worked once and after exiting out of my profile, it no longer floated. How can I fix this? Report Comment im not sure? it should still work when you exit the screen... if you could pop over your code in a pastebin or something i could see whats up with it :O by remy; 1696126011; Report
mooniesoph	1687932296 thank youuu!!! totally usinggg Report Comment
Rayvv	1686894739 omg tysm!! I was so confused on how ppl did this! Report Comment
‼ GUMNUM💚👾	1682985604 this seems very cool , but i'm having some trouble applying it to my profile ! i added the code to my about me and it wasn't doing anything . DD: Report Comment oh no! if you'd like i could look at the code for you to see if somethings out of wack :O by remy; 1682996044; Report
plush	1682441929 Im trying to figure out where to put it in my main section but nothing is working, is it okay if i just send you my code and ou can try to figure it out? im new to coding :3 Report Comment hey! sorry for the late reply, totally feel free to toss the code to me in a pastebin & i'll check it out :D by remy; 1682928209; Report
spacestarryy🍉	1680335892 Will try to use it Report Comment
four/dash	1680115747 off topic but how do you get the little screen thingy on your profile? and how do you get music to play? Report Comment i put the code for the screen thingy here! https://pastebin.com/3xwSCGTu as for the music player, i'd suggest searching the music tag in layouts to find one that works for you :O by remy; 1680120770; Report
ʚ lawliet ! ɞ	1679190330 how do you do this?? sorta confused Report Comment all good! i'll try to explain it better. so you take what i put in the layout code (minus the credit part) and drop it all the way down at the bottom of your main layout code, where the last is. next, whatever you want to have the bobbing animation needs the line "animation: floating 3s ease-in-out infinite" added to it, this part takes some trial in error in finding out what lines up to what. if you want your profile to move but not the rest of the page you would put it in the container labeled main, if your layout code doesn't have something that says "main" you can add it there on your own (presumably) without breaking things! i'd highly suggest playing around with this website https://nein-mc.neocities.org/csstest/ to test things out live so you can troubleshoot right away! by remy; 1679191300; Report where last /style thing is, it cut it out in my message fsr 6_9 by remy; 1679191343; Report oh i see, thank you so much! by ʚ lawliet ! ɞ; 1679191543; Report anytime, hope it works out! by remy; 1679191665; Report um, so sorry im still so confused :( sorry if im bothering im just new and still trying to figure out how to even put a bg lmao by ʚ lawliet ! ɞ; 1679192099; Report oh no not a bother at all! im happy to help, honestly if you want you could throw your layout code into a pastebin and i could see if i could make it work :O? by remy; 1679194283; Report which layout code? i have a few,, and whats a pastebin? by ʚ lawliet ! ɞ; 1679194370; Report pastebin is a website where you can paste and share large chunks of text easier, i'd say send whatever code is the majority of your page? or all of it if thats easier for you. i'll see what i can do! by remy; 1679194867; Report ohh alright! how will you be able to see it? do i send the link to you in IM? by ʚ lawliet ! ɞ; 1679195347; Report yeah you can im me! just send me the pastebin by scrolling down and clicking the "publish paste" button, you can make it an unlisted paste if you'd like, and then IM me the link to it :O by remy**; 1679195578; Report
witch	1679138937 it dosen't work for me whyy Report Comment oh no!! could it maybe be the placement? coding can be kinda fussy about where it is. if you'd like you could i could maybe take a look at it with your page's code? by remy; 1679175397; Report
David	1679017605 Thanks so much for this! Fits in great with my layout :)) Report Comment