DAMIANXD's profile picture

Published by

published

Category: SpaceHey

HOW TO MAKE YOUR PROFILE FLOAT!!!

HAVE U SEEN THOSE KEWL AND SICK LOOKING PROFILES THAT FLOAT? AND U HAVE WONDERED, "HUH.. HOW DO I MAKE MINE LIKE THAT??? I WANT MINE TO BE SOMTH LIKE THAT! :D"

WELL! HERES UR ANSWER >:3!!


FIRST UP!

WE WILL DO THE FOLLOWING FIRST PART OF THE CODE! LIKE ANY CODE, WE WILL NEED THE:

<style>

THIS STARTS UP THE CODE, AND SO IT CAN WORK.


NOW, LETS GET TO SRS BUSINESS (NOT SO SRS LOLZERS!)

WE WILL TYPE:

.col, main, footer, nav .links, nav .top, html::before {

WUT DOES THIS EVEN DO? IT ALSO MAKES THE CODE HAVE A BEGINING, ITS LIKE WRITTING A PARAGRAPH THE <style> IS THE INDENT AND THIS PART OF THE CODE MAKES IT SO THE CODE KNOWS WHAT PARTS WILL LOOK LIKE FLOATING! 


THIS PART IS NEXT, THE MOST IMPORTANT ONE!

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

ALR SOO!!! U WILL TYPE THIS NEXT, THIS PART LETS U DO THE ANIMATION AND FOR HOW LONG WILL IT FLOAT, U SEE DAT PART THAT SAYS "animation: float 3;" RIGHT? U CAN CHANGE AND EXPERIEMNT WITH THE SECONDS NUMBER, THIS WIL OBVI MAKE IT FLOAT FASTER OR SLOWER DEPPENDING ON THE NUMBER U TYPE THERE!!! :P


FOR LAST (NOT REALLY '.3.)

WE HAVE THIS!

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}


}

THIS ALSO ALLOWS THE CODE TO WORK, WITHOUT THIS, UR PROFILE WONT FLOAT! 


NOW FOR LAST! NOW BEING FRRRSS

REMEMBER THE <style>? WELL, WE WILL CLOSE UP THE CODE WITH SMTH QUITE.. SIMILAR! 

</style>

THIS COMMAND WILL CLOSE IT ALL UP!


IF U DONT REALLY UNDERSTAN THIS HERE'S THE COMPLETE CODE TO MAKE UR LIFE WAAAY EASIER:V

<style>


.col, main, footer, nav .links, nav .top, html::before {

animation: float 3s;

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>


(IF SMTH DOESNT WORK OR ITS UNCLEAR PLS COMMENT! ALSO IF THIS HELPED, IM GLAD ^U^

THIS ISNT THE BEST TUT DUE TO THE FACT WELL-

IM A SELF TAUGHT CODER, AND IM KIND OF GETTING THE HANG OF THIS!)


2 Kudos

Comments

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