The code below might suffice in light of how SpaceHey does not allow java script.
You may need to make adjustments with CSS but it's a good start.
The benefit of CSS over a browser plugin is that CSS can be used anywhere.
<style>
@keyframes personify1 { /*character alternately tilts to the left and right*/
0% { transform: matrix(1, 0, -0.1, 1, 0, 0); }
50% { transform: matrix(1, 0, 0, 1, 0, 0); }
100% { transform: matrix(1, 0, 0.1, 1, 0, 0); }
}
@keyframes personify2 { /*character moves back and forwards*/
from {transform: translateX(3px);}
to {transform: translateX(-3px);}
}
@keyframes moveout1 { /*character moves out from idle corner (assumed top left)*/
from {transform: translate(0px, 0px);}
to {transform: translate(200px, 100px);}
}
.characterflow { /* action and cycle time for idle state */
-webkit-animation: personify1 1.5s alternate infinite;
animation: personify1 1.5s alternate infinite;
}
.characterflow:hover { /* when mouse hovers over character do this instead */
filter: blur(3px);
filter: hue-rotate(120deg);
-webkit-animation: personify2 1s alternate infinite;
animation: personify2 1s alternate infinite;
}
.activator:hover ~ img.characterflow { /*character responds to mouse hover elsewhere*/
-webkit-animation: moveout1 0.5s alternate infinite;
animation: moveout1 0.5s alternate infinite;
}
</style>
<div style="position: fixed; top: 0; left: 0; width: 10%;">
<div class="activator" style="width:50px; height:30px; background-color: rgba(220,190,250,0.9);">
run!
</div>
<img class="characterflow" src="https://i.imgur.com/6byEjc5.png" alt="companion"/>
</div>
Forum:
Report Topic
Permalink