august
/
augustkline.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prettier image loading

This commit is contained in:
august kline 2024-08-26 19:36:05 -04:00
parent feacf82cf9
commit 9d0995d4e9
3 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -10,6 +10,7 @@
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<div id="app">
<div class="text">
<h1>hi! i'm august. or kline. </h1>
@ -29,7 +30,6 @@
<div id="background">
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

4
src/main.ts
View File

@ -170,6 +170,10 @@ const onMove = (ev: MouseEvent) => {
root.style.setProperty("--rotate-y", rotateY);
};
window.addEventListener("load", () => {
background.setAttribute("loaded", "");
console.log(background);
});
document.addEventListener("mousemove", onMove);
setImages();

7
style.css
View File

@ -69,7 +69,8 @@ a:hover {
img {
transform: translate(-50%, -50%) translateZ(var(--translate-z));
transition: transform 1s;
transition: opacity 0.3s;
opacity: 0;
position: absolute;
inline-size: 10%;
z-index: -1;
@ -90,6 +91,10 @@ img {
block-size: 100%;
z-index: -1;
position: absolute;
&[loaded] img {
opacity: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {