Pet profile help
Replies
Someone has helpfully pointed out that, making the bold assumption that Peanut actually won the pet spotlight 😅 there'd be nowhere for the trophy to go. I'd really appreciate some ideas on how to sort that? I've seen some profiles where the trophy was hidden away in a little sliding tab, but my coding knowledge means that looks like actual witchcraft to me.
🌂
So if you want a sliding tab I have three ways based on positioning it also additional way to have to go without interaction:
Sorry for the length just wanted to give options 😓
not many changes between them but i thought it'd be helpful to see
mostly code, some notes at bottom on some properties
Slide in from top left corner
.pet_spotlight {
position: absolute;
top: -460px;
left: -960px;
height: 120px;
width: 120px;
background-color: ;
border-bottom-right-radius: 20px;
transition: top 1s linear, left 1s linear;
-webkit-transition: top 1s linear, left 1s linear;
-moz-transition: top 1s linear, left 1s linear;
-o-transition: top 1s linear, left 1s linear;
}
.pet_spotlight:hover { top: -360px; left: -860px; }
Slide in from top:
.pet_spotlight {
position: absolute;
top: -460px;
left: -760px;
height: 120px;
width: 120px;
background-color: ;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
transition: top 1s linear;
-webkit-transition: top 1s linear;
-moz-transition: top 1s linear;
-o-transition: top 1s linear;
}
.pet_spotlight:hover { top: -360px; }
Slide in from left:
.pet_spotlight {
position: absolute;
top: -260px;
left: -960px;
height: 120px;
width: 120px;
background-color: ;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
transition: left 1s linear;
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
}
.pet_spotlight:hover { left: -860px; }
Slide in from left side based on time no interaction needed (this causes it to stay on the profile and not slide back)
.pet_spotlight {
top: -260px;
left: -960px;
position: absolute;
height: 120px;
width: 120px;
background-color:;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
animation: example 4s 2s forwards;
webkit-animation: example 4s 2s forwards;
-moz-animation: example 4s 2s forwards;
-o-animation: example 4s 2s forwards;
-ms-transition: example 4s 2s forwards;
}
example{ from { left:-960px; } to{ left:-860px; } }
transition makes the movement smooth can control speed, can delay it as well (property | duration | speed function | delay. also with "," can make list of properties for transition ) I find speed-function "linear" nicer than others
left: -860px; gets the pet spotlight to the left edge, top: -360px gets to top edge of window these are based on your column 2 positioning so the lower it is the more it'd be off edge be sure that some part of the box is still showing otherwise there isn't anything to hover over
animation is similar to transition (animation name | duration | delay | fill mode: "forwards will make last value be kept/used after animation is done")
name the animation (keyframes) anything you want or leave it like i left it just as example since this shouldn't be a problem for you just helps for reading purposes
should probably adjust backgound-color to fit the profile better, could have an image instead/as well "background-image", add "color" property to change text color
[br/] Could do something else could have it fade in after so much time (this also causes it to stay on the profile, won't disappear)
code
.pet_spotlight {
top: -260px;
left: -760px;
position: absolute;
height: 120px;
width: 120px;
background-color:;
opacity: 0;
animation: example 4s 2s forwards;
webkit-animation: example 4s 2s forwards;
-moz-animation: example 4s 2s forwards;
-o-animation: example 4s 2s forwards;
-ms-transition: example 4s 2s forwards;
}
example{ from { opacity: 0; } to{ opacity: 1; } }
[br/]
If you want more help or explanation cause I didn't explain myself or have any issue please ping me I don't mind at all, or maybe you have a different idea I can help see if it's possible to do
Can also ping if you have found this useful!
you are an absolute genius, thank you for the really comprehensive reply. That's super helpful; just what I wanted!
🌂
you're welcome and i'm really glad to hear that my response is comprehensive 😌 also thank you for the gift ❤️