Added ermine, alt text

This commit is contained in:
august kline 2024-08-26 17:45:03 -04:00
parent 99d6e12dae
commit feacf82cf9
2 changed files with 70 additions and 30 deletions

View File

@ -1,22 +1,23 @@
import sunsetfourteenth from "/14thstsunrise.gif";
import backwalkgeorge from "/backwalkgeorge.jpg";
import ducklings from "/ducklings.gif";
import ermine from "/ermine.gif";
import fieldnotes from "/fieldnotes.gif";
import flowers from "/flowers.jpg";
import georgerasp from "/georgerasp.gif";
import georgetoilet from "/georgetoilet.jpg";
import heron from "/heron.jpg";
import klinefloor from "/klinefloor.jpg";
import klinemirror from "/klinemirror.jpg";
import klineoutside from "/klineoutside.jpg";
import klinetrain from "/klinetrain.jpg";
import lamp from "/lamp.gif";
import mirror from "/mirror.jpg";
import ohio from "/ohio.jpg";
import sashaklineburrito from "/sashaklineburrito.jpg";
import sashaklinecar from "/sashaklinecar.jpg";
import sunsetkline from "/sunsetkline.jpg";
import georgerasp from "/georgerasp.gif";
import sunsetfourteenth from "/14thstsunrise.gif";
import solderkitty from "/solderkitty.jpg";
import ducklings from "/ducklings.gif";
import fieldnotes from "/fieldnotes.gif";
import lamp from "/lamp.gif";
import ohio from "/ohio.jpg";
import heron from "/heron.jpg";
import flowers from "/flowers.jpg";
import mirror from "/mirror.jpg";
import sunsetkline from "/sunsetkline.jpg";
let background = document.getElementById("background")!;
@ -26,49 +27,86 @@ let prefersReducedMotion = window.matchMedia(
let setImages = () => {
let images: string[] = [];
let alts: string[] = [];
if (prefersReducedMotion.matches) {
images = [
backwalkgeorge,
fieldnotes,
flowers,
georgetoilet,
heron,
klinefloor,
klinemirror,
klineoutside,
klinetrain,
mirror,
ohio,
sashaklineburrito,
sashaklinecar,
sunsetkline,
// georgerasp,
// sunsetfourteenth,
solderkitty,
// ducklings,
fieldnotes,
// lamp,
ohio,
heron,
flowers,
mirror,
sunsetkline,
];
alts = [
"A small child holding a stuffed monkey and a santa hat walking away from the camera",
"Animated gif of a notebook with a pretty landscape illustration cover",
"A field of violet flowers",
"A woman smiling next to a stuffed monkey",
"A heron standing in a pond",
"A woman in a green sweater and jeans sitting on the floor and smiling",
"A woman in bed taking a mirror selfie where her face is distorted",
"A selfie of a woman in a driveway next to a truck",
"A young girl smiling in front of a train",
"A shattered mirror",
"Two adjacent houses lit by an early morning sunrise",
"A selfie of two friends holding burritos, one of whom is wearing a cammo hat",
"A selfie of two friends in a car, one of whom is wearing a cammo hat",
"A pink porcelain kitty figurine supporting a soldering iron",
"A selfie of a woman indoors, behind her the sun is setting in the window",
];
} else {
images = [
sunsetfourteenth,
backwalkgeorge,
ducklings,
ermine,
fieldnotes,
flowers,
georgerasp,
georgetoilet,
heron,
klinefloor,
klinemirror,
klineoutside,
klinetrain,
lamp,
mirror,
ohio,
sashaklineburrito,
sashaklinecar,
sunsetkline,
georgerasp,
sunsetfourteenth,
solderkitty,
ducklings,
fieldnotes,
lamp,
ohio,
heron,
flowers,
mirror,
sunsetkline,
];
alts = [
"Animated gif of a sunrise on a city street",
"A small child holding a stuffed monkey and a santa hat walking away from the camera",
"Animated gif of a duck and ducklings swimming in a pond",
"Animated gif of an ermine peeking up out of a crack in concrete",
"Animated gif of a notebook with a pretty landscape illustration cover",
"A field of violet flowers",
"Animated gif of an amber CRT screen with flashing text and Raspberry Pi logo",
"A woman smiling next to a stuffed monkey",
"A heron standing in a pond",
"A woman in a green sweater and jeans sitting on the floor and smiling",
"A woman in bed taking a mirror selfie where her face is distorted",
"A selfie of a woman in a driveway next to a truck",
"A young girl smiling in front of a train",
"Animated gif of a lamp behind which cars drive past in the snow",
"A shattered mirror",
"Two adjacent houses lit by an early morning sunrise",
"A selfie of two friends holding burritos, one of whom is wearing a cammo hat",
"A selfie of two friends in a car, one of whom is wearing a cammo hat",
"A pink porcelain kitty figurine supporting a soldering iron",
"A selfie of a woman indoors, behind her the sun is setting in the window",
];
}
const randn_bm = (mean = 0, stdev = 0.4) => {
@ -105,6 +143,7 @@ let setImages = () => {
for (let index in images) {
let img = document.createElement("img");
img.setAttribute("src", images[index]);
img.setAttribute("alt", alts[index]);
// let left = randn_bm();
// let top = randn_bm();
let left = lefts[index];

View File

@ -69,6 +69,7 @@ a:hover {
img {
transform: translate(-50%, -50%) translateZ(var(--translate-z));
transition: transform 1s;
position: absolute;
inline-size: 10%;
z-index: -1;