style: add cool spinning headshot for no other reason than I can
This commit is contained in:
parent
521d202824
commit
02db44bf2f
@ -9,7 +9,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div id="landing-page-headshot" class="col-sm-12 col-md-6 justify-content-right">
|
||||
<img src="~/img/headshot_512x512_2023.jpg" class="rounded-circle" style="width: 50%; max-width: 512px;" alt="Headshot">
|
||||
<img id="index-headshot" src="~/img/headshot_512x512_2023.jpg" class="rounded-circle" style="width: 50%; max-width: 512px;" alt="Headshot">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
BIN
src/img/avatar_512x512.jpg
Normal file
BIN
src/img/avatar_512x512.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 106 KiB |
@ -421,13 +421,13 @@ td.trim-p p:last-child {
|
||||
|
||||
#landing-page-intro {
|
||||
text-align: left;
|
||||
|
||||
|
||||
h1.display-4 {
|
||||
font-family: "Titillium Web", sans-serif;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
p.lead {
|
||||
font-family: "Titillium Web", sans-serif;
|
||||
font-weight: 400;
|
||||
@ -455,4 +455,53 @@ td.trim-p p:last-child {
|
||||
#landing-page-headshot {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#index-headshot {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.headshot-spin {
|
||||
animation-delay: 0s;
|
||||
animation-iteration-count: 1;
|
||||
animation-direction: normal;
|
||||
animation-fill-mode: none;
|
||||
|
||||
&.headshot-spin-start {
|
||||
animation-duration: .4s;
|
||||
animation-timing-function: ease-in;
|
||||
animation-name: headshot-spin-start;
|
||||
}
|
||||
|
||||
&.headshot-spin-end {
|
||||
animation-duration: .8s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-name: headshot-spin-end;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes headshot-spin-start {
|
||||
0% {
|
||||
transform: rotateY(0) scale(1.0);
|
||||
box-shadow: none;
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(90deg) scale(1.2);
|
||||
box-shadow: 0 5px 5px rgba(#000, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes headshot-spin-end {
|
||||
0% {
|
||||
transform: rotateY(90deg) scale(1.2);
|
||||
box-shadow: 0 5px 5px rgba(#000, 15%);
|
||||
}
|
||||
80% {
|
||||
transform: rotateY(360deg) scale(1.5);
|
||||
box-shadow: 0 5px 6.25px rgba(#000, 15%);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
@ -104,4 +104,34 @@ declare const Prism: any;
|
||||
UI.updateUsaCountdown(usaCountdown);
|
||||
setInterval(() => UI.updateUsaCountdown(usaCountdown), 1000);
|
||||
}
|
||||
|
||||
let avatarType = 0;
|
||||
const headshot = document.getElementById("index-headshot") as HTMLImageElement;
|
||||
headshot.addEventListener("click", (ev: MouseEvent) => {
|
||||
if (avatarType === 0) {
|
||||
headshot.classList.add("headshot-spin", "headshot-spin-start");
|
||||
setTimeout(() => {
|
||||
headshot.classList.remove("headshot-spin-start");
|
||||
headshot.src = "/img/avatar_512x512.jpg"
|
||||
headshot.classList.add("headshot-spin", "headshot-spin-end");
|
||||
|
||||
setTimeout(() => {
|
||||
headshot.classList.remove("headshot-spin", "headshot-spin-end");
|
||||
avatarType = 1;
|
||||
}, 800);
|
||||
}, 400);
|
||||
} else if (avatarType === 1) {
|
||||
headshot.classList.add("headshot-spin", "headshot-spin-start");
|
||||
setTimeout(() => {
|
||||
headshot.classList.remove("headshot-spin-start");
|
||||
headshot.src = "/img/headshot_512x512_2023.jpg"
|
||||
headshot.classList.add("headshot-spin", "headshot-spin-end");
|
||||
|
||||
setTimeout(() => {
|
||||
headshot.classList.remove("headshot-spin", "headshot-spin-end");
|
||||
avatarType = 0;
|
||||
}, 800);
|
||||
}, 400);
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
Loading…
Reference in New Issue
Block a user