hello guyz , I've been fightinf with the layout and an html css code to make falling items on my profil but it won't work , can some1 give me a valid code or help me understand why it won't work? thx !!
hello guyz , I've been fightinf with the layout and an html css code to make falling items on my profil but it won't work , can some1 give me a valid code or help me understand why it won't work? thx !!
Comments
Displaying 8 of 8 comments ( View all | Add Comment )
β πππππ½πππ ππππΆπ β
Try either HTML one or CSS one but not both.
CSS:Β Β .falling-container {
Β position: absolute;
Β top: 0;
Β left: 0;
Β width: 100%;
Β height: 100%;Β
Β overflow: hidden;
Β z-index: 99; /* Keeps items on top of profile content. Lower this if it blocks menus. */
Β pointer-events: none; /* Allows users to click through the items */
}
.falling-item {
Β position: absolute;
Β top: -50px;Β
Β width: 32px;Β /* Set to the width of your image */
Β height: 32px; /* Set to the height of your image */
Β Β
Β /* PLACE YOUR IMAGE LINK HERE */
Β background-image: url("YOUR_IMAGE_URL_HERE");Β
Β background-size: contain;
Β background-repeat: no-repeat;
Β Β
Β user-select: none;
Β animation: fall linear infinite;
}
/* Horizontal positioning and speed variations */
.item1 { left: 15%; animation-duration: 6s; animation-delay: 0s; }
.item2 { left: 35%; animation-duration: 9s; animation-delay: 1.5s; }
.item3 { left: 55%; animation-duration: 7s; animation-delay: 4s; }
.item4 { left: 75%; animation-duration: 10s; animation-delay: 0.8s; }
.item5 { left: 90%; animation-duration: 8s; animation-delay: 2.5s; }
@keyframes fall {
Β 0% {
Β Β top: -50px;
Β Β transform: translateX(0) rotate(0deg);
Β Β opacity: 1;
Β }
Β 50% {
Β Β transform: translateX(15px) rotate(180deg);
Β }
Β 100% {
Β Β top: 105%;Β
Β Β transform: translateX(-15px) rotate(360deg);
Β Β opacity: 0.4;
Β }
}
HTML:Β
Β
Β
Β
Β
Β
Geeze louise this thing is getting on my nerves . The HTML won't paste so Imma put it between () hopefully that will work
(....
Β
Β
Β
Β
Β
Β
Β
Β
Β
Β
)
by β πππππ½πππ ππππΆπ β; (edited); Report
Lmfao I give up just try the cssΒ
by β πππππ½πππ ππππΆπ β; ; Report
bahah thanks a lot , I'll try this , can I add more than one item ? as different ones
by ALEXANDRE!!; ; Report
I believe soΒ
by β πππππ½πππ ππππΆπ β; ; Report
ykw I am giving up , it won't work too , I think I am doing something wrong but I can't see what
by ALEXANDRE!!; ; Report
I'm out of town right now, and I won't be back for three weeks so I don't access to my PC ATM, if I did it would be easier for me to help you. Sorry I couldn't be more helpΒ
by β πππππ½πππ ππππΆπ β; ; Report
DW REALLY , it's nothing much , I will do it .. one day maybe x))) thanks a lot for your time and enjoy your time out of town !!
by ALEXANDRE!!; ; Report