animation mouse in css is working
This commit is contained in:
asus
@@ -29,4 +29,3 @@
|
||||
|
||||
<!-- Other SVG elements and attributes -->
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
@@ -32,4 +32,3 @@
|
||||
|
||||
<!-- Other SVG elements and attributes -->
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
@@ -35,4 +35,3 @@
|
||||
|
||||
<!-- Other SVG elements and attributes -->
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
44
docs/mouses/mouse_1/mouse_1_1.svg
Normal file
44
docs/mouses/mouse_1/mouse_1_1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.9 KiB |
306
index.html
306
index.html
@@ -35,7 +35,6 @@
|
||||
<body id="body">
|
||||
<main id="top">
|
||||
|
||||
|
||||
<nav>
|
||||
<a href="#top">accueil</a>
|
||||
<a href="#projects">projets</a>
|
||||
@@ -44,6 +43,8 @@
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
HERO SECTION
|
||||
-->
|
||||
@@ -67,97 +68,18 @@
|
||||
</h1>
|
||||
<h1 aria-label="programmeur informatique" id="title" class="title">
|
||||
<span aria-hidden="true" class="pre">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
<span aria-hidden="true" class="pre">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art">
|
||||
<pre class="frame f1" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f2" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f3" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f4" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="mouse"><div class="mouse_1"></div></div>
|
||||
<div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -202,80 +124,7 @@
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<div class="frames_container mouse" id="mouse_2" role="img" aria-label="mouse animated in ASCII art">
|
||||
<pre class="frame f1" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f2" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f3" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f4" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="mouse"><div class="mouse_2"></div></div>
|
||||
<div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||
|
||||
</section>
|
||||
@@ -305,7 +154,7 @@
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<h2 id="cv_download"><a href="downloads/hugo_lamy_2023_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">version pdf</a></h2>
|
||||
<h2 id="cv_download"><a href="docs/hugo_lamy_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">version pdf</a></h2>
|
||||
<details>
|
||||
<summary>
|
||||
<h3>Outils informatiques</h3>
|
||||
@@ -366,71 +215,7 @@
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<div class="frames_container mouse" id="mouse_3" role="img" aria-label="mouse animated in ASCII art">
|
||||
<pre class="frame f1" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f2" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f3" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f4" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="mouse"><div class="mouse_3"></div></div>
|
||||
<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||
|
||||
</section>
|
||||
@@ -451,72 +236,7 @@
|
||||
<p>hugogogo@protonmail.com</p>
|
||||
</article>
|
||||
|
||||
<div class="frames_container mouse" id="mouse_4" role="img" aria-label="mouse animated in ASCII art">
|
||||
<pre class="frame f1" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f2" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f3" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre class="frame f4" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="mouse"><div class="mouse_4"></div></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
--banner_height: var(--base_banner_height); /*default*/
|
||||
height: min(26vw, var(--banner_height));
|
||||
|
||||
background-image: url(../img/banner_1.svg); /*default*/
|
||||
background-image: url(../../docs/banners/banner_1.svg); /*default*/
|
||||
background-size: contain;
|
||||
background-repeat: repeat;
|
||||
background-position-x: 0%;
|
||||
@@ -55,22 +55,22 @@
|
||||
*
|
||||
*/
|
||||
.banner_size_1 {
|
||||
background-image: url(../img/banner_1.svg);
|
||||
background-image: url(../../docs/banners/banner_1.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 1);
|
||||
}
|
||||
.banner_size_2 {
|
||||
background-image: url(../img/banner_2.svg);
|
||||
background-image: url(../../docs/banners/banner_2.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 2);
|
||||
}
|
||||
.banner_size_3 {
|
||||
background-image: url(../img/banner_3.svg);
|
||||
background-image: url(../../docs/banners/banner_3.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 3);
|
||||
}
|
||||
.banner_size_4 {
|
||||
background-image: url(../img/banner_4.svg);
|
||||
background-image: url(../../docs/banners/banner_4.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 4);
|
||||
}
|
||||
.banner_size_5 {
|
||||
background-image: url(../img/banner_5.svg);
|
||||
background-image: url(../../docs/banners/banner_5.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 5);
|
||||
}
|
||||
|
||||
@@ -1,53 +1,48 @@
|
||||
@import "./mouses/mouse_1.css";
|
||||
@import "./mouses/mouse_2.css";
|
||||
@import "./mouses/mouse_3.css";
|
||||
@import "./mouses/mouse_4.css";
|
||||
|
||||
.mouse {
|
||||
position: relative;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
.frames_container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
pre.frame.hide {
|
||||
display: none;
|
||||
}
|
||||
pre.frame {
|
||||
position: relative;
|
||||
justify-items: start;
|
||||
align-items: end;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0;
|
||||
--tframes: 2s;
|
||||
animation-name: ascii_frame;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: var(--tframes);
|
||||
animation-timing-function: steps(3);
|
||||
animation-direction: normal;
|
||||
}
|
||||
> div {
|
||||
position: relative;
|
||||
top: 0%;
|
||||
|
||||
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
|
||||
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
|
||||
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
||||
/*
|
||||
* 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;
|
||||
|
||||
@keyframes ascii_frame {
|
||||
0% {opacity: 1;}
|
||||
25% {opacity: 1;}
|
||||
25.1% {opacity: 0;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
--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;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#mouse_1 {
|
||||
place-self: center;
|
||||
> div::after {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
#mouse_2 {
|
||||
left: 10%;
|
||||
@keyframes mouse_move {
|
||||
0% {top: 0%;}
|
||||
25% {top: -100%;}
|
||||
50% {top: -200%;}
|
||||
75% {top: -300%;}
|
||||
}
|
||||
#mouse_3 {
|
||||
left: 60%;
|
||||
}
|
||||
#mouse_4 {
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
|
||||
72
styles/elements/mouses/mouse_1.css
Normal file
72
styles/elements/mouses/mouse_1.css
Normal file
@@ -0,0 +1,72 @@
|
||||
.mouse_1::before {
|
||||
content:'\
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
';
|
||||
}
|
||||
.mouse_1::after {
|
||||
content:'\
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
';
|
||||
}
|
||||
72
styles/elements/mouses/mouse_2.css
Normal file
72
styles/elements/mouses/mouse_2.css
Normal file
@@ -0,0 +1,72 @@
|
||||
.mouse_2::before {
|
||||
content:'\
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
';
|
||||
}
|
||||
.mouse_2::after {
|
||||
content:'\
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
';
|
||||
}
|
||||
64
styles/elements/mouses/mouse_3.css
Normal file
64
styles/elements/mouses/mouse_3.css
Normal file
@@ -0,0 +1,64 @@
|
||||
.mouse_3::before {
|
||||
content:'\
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
';
|
||||
}
|
||||
.mouse_3::after {
|
||||
content:'\
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
';
|
||||
}
|
||||
64
styles/elements/mouses/mouse_4.css
Normal file
64
styles/elements/mouses/mouse_4.css
Normal file
@@ -0,0 +1,64 @@
|
||||
.mouse_4::before {
|
||||
content:'\
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
';
|
||||
}
|
||||
.mouse_4::after {
|
||||
content:'\
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
\a
|
||||
';
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
:root {
|
||||
--base_font_size: 62.5%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user