Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Click and Show
ID	5821312290209792
Created	4 years ago, 1618956247827
Updated	4 years ago, 1619036707931
Code	<!DOCTYPE html> <html> <!-- I am shamelessly making a webpage based off of Khan Academy's new avatar additions! Hey! At least I tried to do something creative! I didn't just show the avatars and leave it at that, I made it so you can click on them and they'll expand until it takes up your whole screen. Almost like you're "focusing" onto a particular avatar. I also made it have an actual transition instead of just popping in and out. All of which is surprisingly complicated... CHANGES: - Tried adding some browser prefixes to make the page look better on iOS Safari. - Even more CSS later... But it should work much better on Safari now. --> <head> <meta charset="UTF-8"> <title>Click and Show</title> <style> :root { -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Segoe UI", Verdana, sans-serif; } , :before, :after { -webkit-box-sizing: inherit; box-sizing: inherit; } body { background: #263238; margin: 5vw; overflow-x: hidden; } body:after { background: transparent; content: ""; display: block; height: 100vh; left: 0; pointer-events: none; position: fixed; top: 0; -webkit-transition: background 1s ease; transition: background 1s ease; width: 100vw; z-index: 10; } body.has-spotlight { overflow: hidden; } body.has-spotlight:after { background: #37474f; pointer-events: auto; } .heading { color: #fafafa; font-size: calc(max(1.5rem, 5vw)); margin: 2rem 0 1rem 0; text-align: center; } .avatar-container { display: -webkit-box; display: flex; gap: 0.5rem; } .avatar { background: #546e7a; border: 0.1em solid #263238; border-radius: 100%; -webkit-box-shadow: 0 0 0.5em #212121aa; box-shadow: 0 0 0.5em #212121aa; cursor: pointer; -webkit-box-flex: 1; flex: 1; -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; -webkit-user-select: none; user-select: none; width: 0; height: 100%; / iOS Safari needs this... / } .avatar:hover { -webkit-transform: scale(1.25); transform: scale(1.25); } .spotlight { height: var(--height); left: var(--left); opacity: 0; pointer-events: none; position: absolute; top: var(--top); -webkit-transform: none; transform: none; width: var(--width); z-index: 20; } .spotlight.animate-fill-screen { height: 100vh; left: 0; opacity: 1; top: var(--viewport-top); width: 100vw; } .spotlight.enable-transitions { / WebKit prefixed versions. */ -webkit-transition-duration: 1s; -webkit-transition-property: opacity, top, left, width, height; -webkit-transition-timing-function: ease; transition-duration: 1s; transition-property: opacity, top, left, width, height; transition-timing-function: ease; } .close-button { color: transparent; cursor: pointer; font-size: 3rem; height: 3rem; line-height: 3rem; pointer-events: none; position: fixed; right: 1rem; text-align: center; top: 1rem; -webkit-transition: color 1s ease; transition: color 1s ease; -webkit-user-select: none; user-select: none; width: 3rem; z-index: 30; } .close-button.visible { color: #fafafa; pointer-events: auto; } </style> </head> <body> <div class="close-button">×</div> <script type="module"> const imageUrlPrefix = "https://cdn.kastatic.org/images/avatars/svg/"; const avatars = [ { name: "Area 52", colors: ["yellow", "blue", "green", "purple"] }, { name: "Eggleston", colors: ["yellow", "blue", "green", "orange"] }, { name: "Blobby", colors: ["yellow", "blue", "green", "purple"] }, { name: "Scuttlebug", colors: ["yellow", "blue", "green", "purple"] }, { name: "Boggle", colors: ["yellow", "blue", "green", "purple"] }, { name: "Sneak Peak", colors: ["yellow", "blue", "green", "purple"] }, { name: "Stelly", colors: ["yellow", "blue", "green", "orange"] }, { name: "Cacteye", colors: ["yellow", "blue", "green", "purple"] }, ]; for (const { name, colors } of avatars) { const headingEl = document.createElement("h2"); headingEl.classList.add("heading"); headingEl.textContent = name; document.body.append(headingEl); const avatarContainerEl = document.createElement("div"); avatarContainerEl.classList.add("avatar-container"); const internalName = name.toLowerCase().replace(/ /g, "-"); for (const color of colors) { const imageEl = document.createElement("img"); imageEl.classList.add("avatar"); imageEl.src = `${imageUrlPrefix}${internalName}-${color}.svg`; imageEl.addEventListener("click", focusOnAvatar); avatarContainerEl.append(imageEl); } document.body.append(avatarContainerEl); } function forceReflow(element) { element.offsetLeft; // Forces browser to calculate CSS and reflow document. } const spotlightEl = document.createElement("img"); spotlightEl.classList.add("spotlight"); document.body.append(spotlightEl); const closeButton = document.querySelector(".close-button"); function focusOnAvatar(event) { spotlightEl.classList.remove("enable-transitions"); // Calculate absolute position of avatar image on the page. const rect = this.getBoundingClientRect(); const left = rect.left + document.documentElement.scrollLeft; const scrollTop = document.documentElement.scrollTop; const top = rect.top + scrollTop; spotlightEl.style.setProperty("--left", left + "px"); spotlightEl.style.setProperty("--top", top + "px"); spotlightEl.style.setProperty("--width", rect.width + "px"); spotlightEl.style.setProperty("--height", rect.height + "px"); // Also store the coordinates of the top of the viewport. spotlightEl.style.setProperty("--viewport-top", scrollTop + "px"); spotlightEl.src = this.src; // Force the browser to recalculate the CSS up to this point, // including the modifications to the spotlight's position // that we just made. This is necessary for transitions to // work correctly. forceReflow(spotlightEl); spotlightEl.classList.add("enable-transitions"); spotlightEl.classList.add("animate-fill-screen"); document.body.classList.add("has-spotlight"); closeButton.classList.add("visible"); } closeButton.addEventListener("click", function(event) { this.classList.remove("visible"); spotlightEl.classList.remove("animate-fill-screen"); document.body.classList.remove("has-spotlight"); }); </script> <script></script> </body> </html>
Folds	26,159,164,247
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL2Zvs6rCgw
Votes	212
Spin-Offs	3
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Daniel (dkareh) 🌈
Author Name	dkareh
Author ID	kaid_352818218647372486664457
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739449547952
Updated	10 months ago, 1739449558802
Source Deleted	unknown