Report Blog Entry
Yea
And it's MOBILE FRIENDLY!! WOW :0 PEOPLE WHO MAKE LAYOUTS SHOULD CONSIDER MOBILE USERS MORE AS BOTH A PC AND MOBILE SPACEHEY USER!!!
You can also click through them on certain browsers so they don't cover anything underneath
Inspired by the DDLC chibis :) Yeah they do the bouncy thing when you hover / click them
If there are any issues, let me know, the code for the animation and the images were separated so I might've forgotten to paste something
<!-- (c) Layout created by Aoyagi Touya (https://blog.spacehey.com/entry?id=1959143) -->
<style>
.vbs-wrapper {
position: fixed;
bottom: 0px;
right: 20px;
display: flex;
gap: 0px;
z-index: 2;
pointer-events: none;
}
.vbs-wrapper img {
width: 146px;
height: 200px;
transition: transform 0.2s;
pointer-events: auto;
}
.vbs-wrapper img:hover {
animation: doki-doki 0.3s both 2;
}
.kohane {
content: url("https://i.ibb.co/1fYvwkzG/Kohane-Idle.gif");
}
.kohane:hover {
content: url("https://i.ibb.co/Z6KRNW6F/Kohane-Hover.png");
}
.an {
content: url("https://i.ibb.co/cSLj5GhB/An-Idle.gif");
}
.an:hover {
content: url("https://i.ibb.co/NnxqTWQY/An-Hover.png");
}
.akito {
content: url("https://i.ibb.co/G3xYzrGh/Akito-Idle.gif");
}
.akito:hover {
content: url("https://i.ibb.co/kgpRTCGS/Akito-Hover.png");
}
.touya {
content: url("https://i.ibb.co/Mx7QvZQZ/Touya-Idle.gif");
}
.touya:hover {
content: url("https://i.ibb.co/d0N5qbHZ/Touya-Hover.png");
}
@media (max-width: 768px) {
.vbs-wrapper img {
width: 75px;
height: 103px;
}
}
@keyframes doki-doki {
0%, 100% { transform: translateY(0); animation-timing-function: ease-out; }
50% { transform: translateY(-20px); animation-timing-function: ease-in; }
}
</style>
<div class="vbs-wrapper">
<img class="kohane" alt="Azusawa Kohane"/>
<img class="an" alt="Shiraishi An"/>
<img class="akito" alt="Shinonome Akito"/>
<img class="touya" alt="Aoyagi Touya"/>
</div>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
MOCHACUP
Good job making sure they aren't in the way of anything, fun module.