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

4
src/main.ts
View File

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

7
style.css
View File

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