Layout floating animation

Tags: animation, profile animation, floating, filter, layouts, cute

Description:

This animation has a floating effect. Literally that's all. It also has a tv filter on it, but you can mess around with the code to remove it if you don't like the filter! (Some layouts manually remove the filter on the animation though, just a quick disclaimer)
If you use it please comment! ty!
Also if you wanna see how the animation looks, just click on this layout, it'll always be here. This animation works on most layouts!!

Preview:

click on the image for a larger preview

Code:

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

<style>

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

</style>

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 290 comments ( View all | Add Comment )

Petti	1785244414 USING TYSMMM Report Comment
niel	1782730821 using!! Report Comment
𝐋𝐎𝐄	1782304647 usingg Report Comment
˗ˏˋ 𝗿𝙖𝙮 ˎˊ˗	1779370638 hi guys! this takes off any floating things you have on your profile, like something hanging on the corner. just thought i'd let y'all know! Report Comment do you know how to stop that? because everything i have tried so far wont work by vivica azucar; 1785467616; Report
loai@copland	1778122248 Using :) Report Comment
♦Adam♢Cuphead♦	1776386318 Using Report Comment
Desum.Eev	1773755862 using! Report Comment
finn ⸝ nico	1773711576 using Report Comment
ery!!	1772842792 usando! Report Comment
𝒵 υr𝐲	1771666339 Using Report Comment
Ethan (#1 TFB fan)	1770942927 whenever i put it on my profile it makes my floating gif things glitch and my vhs effect glitch :( is there any way to fix that? Report Comment
jeremyyy	1770900613 using Report Comment
𐬾 {ᔕᑭ𖤐𝖱T𝟧Yy} 𐬾	1770563313 Using :] Report Comment
hi im elliot yes	1770422186 Using !! Report Comment
ANGELIQUE ！ー♪🦈ྀི༘~・	1769647968 Usinggg ! Report Comment
ナンバー1ファン!!☆	1769285859 Using! Thank you so much! Report Comment
seal	1769228947 usinggg Report Comment
Anartistsmelody	1768851238 using Report Comment
jeremyyy	1768482717 using Report Comment
4b3y_t@lk5	1768044484 usingg !! Report Comment