perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mouses are now using transform instead of top to work on chrome

Browse Source
This commit is contained in:
asus
2024-05-27 14:00:55 +02:00
parent 86869399fb
commit 744c2aedcb
2 changed files with 26 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -115,7 +115,7 @@
</ul> </ul>
</details> </details>
<div class="mouse"><div class="mouse_1 pre"></div></div> <div class="mouse"><div class="frames mouse_1 pre"></div></div>
<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div> <div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -129,7 +129,7 @@
PROJECTS PROJECTS
--> -->
<section id="projects" class="section"> <section id="projects" class="section">
<div class="mouse"><div class="mouse_3 pre"></div></div> <div class="mouse"><div class="frames mouse_3 pre"></div></div>
<header> <header>
<h1 aria-label="projets"> <h1 aria-label="projets">
@@ -212,7 +212,7 @@
</article> </article>
--> -->
<div class="mouse"><div class="mouse_2 pre"></div></div> <div class="mouse"><div class="frames mouse_2 pre"></div></div>
<div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div> <div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -233,7 +233,7 @@
<p>hugogogo@protonmail.com</p> <p>hugogogo@protonmail.com</p>
</article> </article>
<div class="mouse"><div class="mouse_4 pre"></div></div> <div class="mouse"><div class="frames mouse_4 pre"></div></div>
</section> </section>

44
styles/elements/mouses.css
View File

@@ -8,42 +8,30 @@
width: fit-content; width: fit-content;
overflow: hidden; overflow: hidden;
> div { .frames {
position: relative; position: relative;
top: 0%; animation: mouse_move infinite 2s normal steps(4);
&::before {
/*
* for pseudo elements ::before and ::after
* for some reason it does not work when applied to them directly
* if they are not position absolute
white-space: pre;
line-height: 0.8;
font-size: 1.0rem;
font-size: min(2.1vw, 1.0rem);
*/
--tframes: 2s;
animation-name: mouse_move;
animation-iteration-count: infinite;
animation-duration: var(--tframes);
animation-direction: normal;
animation-timing-function: steps(1);
}
> div::before {
position: relative; position: relative;
top: 0px; top: 0px;
left: 0px; left: 0px;
} }
&::after {
> div::after {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0px; left: 0px;
} }
} }
@keyframes mouse_move {
0% {top: 0%;}
25% {top: -100%;}
50% {top: -200%;}
75% {top: -300%;}
} }
/*
* using 'transform' instead of 'top', because 'top' needs
* the parent to have an explicit height
* but in this case its height is according to the children
*
*/
@keyframes mouse_move {
0% {transform: translateY(0%);}
100% {transform: translateY(-400%);}
}