@@ -25,10 +25,12 @@

diff --git a/scripts/dom.js b/scripts/dom.js index 59ffbe4..cea7a4d 100644 --- a/scripts/dom.js +++ b/scripts/dom.js @@ -1,10 +1,12 @@ var DOM = (dom => { + dom.logo; // main photo container dom.photo_layer; dom.photo_frame; dom.photo_left; dom.photo_right; - // thumbnail container + // thumbnail containers + dom.thumb_layer; dom.thumb_grid; //// dom creation //// @@ -20,6 +22,8 @@ var DOM = (dom => { event.stopPropagation(); dom.loadPhoto(p); }); + e.classList.add("thumb"); + return e; } @@ -36,10 +40,14 @@ var DOM = (dom => { } dom.loadPhoto = (p) => { - UTIL.removeAll(dom.photo_frame); + CLASS.hide(dom.photo_frame); UTIL.disableScroll(); - dom.photo_frame.appendChild(p.img()); - CLASS.un_hidden(dom.photo_layer); + setTimeout(() => { + CLASS.show(dom.photo_frame); + UTIL.removeAll(dom.photo_frame); + dom.photo_frame.appendChild(p.img()); + }, 500); + CLASS.show(dom.photo_layer); } dom.addThumbnail = (t) => { @@ -51,7 +59,7 @@ var DOM = (dom => { { let e = document.createElement("div"); e.classList.add("section"); - document.body.appendChild(e); + dom.thumb_layer.appendChild(e); let t = document.createElement("div"); t.innerText = n; @@ -60,15 +68,26 @@ var DOM = (dom => { let g = document.createElement("div"); g.classList.add("grid"); - document.body.appendChild(g); + dom.thumb_layer.appendChild(g); dom.thumb_grid = g; } + + dom.revealGrid = () => { + setTimeout(() => { + CLASS.show(dom.logo); + setTimeout(() => { + CLASS.show(dom.thumb_layer); + }, 300); + }, 500); + } dom.init = () => { + dom.logo = document.getElementById("logo"); + dom.thumb_layer = document.getElementById("thumb-layer"); dom.photo_layer = document.getElementById("photo-layer"); dom.photo_frame = document.getElementById("photo-frame"); - dom.photo_left = document.getElementById("photo-left"); + dom.photo_left = document.getElementById("photo-left"); dom.photo_right = document.getElementById("photo-right"); dom.photo_layer.addEventListener("click", () => { diff --git a/scripts/main.js b/scripts/main.js index a4cb309..bbf0a35 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -32,9 +32,9 @@ if (e.keyCode === 27 || e.keyCode === 32) { // space, escape PHOTO.hide(); } else if (e.keyCode === 37) { // left arrow - if (!CLASS.is_hidden(DOM.photo_layer)) PHOTO.prev(); + if (CLASS.visible(DOM.photo_layer)) PHOTO.prev(); } else if (e.keyCode === 39) { // right arrow - if (!CLASS.is_hidden(DOM.photo_layer)) PHOTO.next(); + if (CLASS.visible(DOM.photo_layer)) PHOTO.next(); } else { // console.log(`${e.code} -> ${e.keyCode}`); } @@ -46,6 +46,7 @@ xhttp.onload = (() => { DOM.init(); loadJson(xhttp.responseText); + DOM.revealGrid(); }); xhttp.open("GET", "data/pictures.json"); xhttp.send(); diff --git a/scripts/photo.js b/scripts/photo.js index c0ddee4..29e9b17 100644 --- a/scripts/photo.js +++ b/scripts/photo.js @@ -4,7 +4,7 @@ var PHOTO = (photo => { photo.current = _ => document.querySelector("#photo-frame>img"); photo.hide = _ => { UTIL.enableScroll(); - CLASS.hidden(DOM.photo_layer); + CLASS.hide(DOM.photo_layer); } photo.next = _ => { let i = photo.all.findIndex(p => p.img() === photo.current()); diff --git a/scripts/util.js b/scripts/util.js index cd1ab0b..9ad4fac 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -21,12 +21,16 @@ var UTIL = (util => { })(UTIL || {}); var CLASS = (cls => { - let classes = ["hidden", "grid", "section"]; - classes.forEach(c => { - cls[c] = (e) => e.classList.add(`${c}`); - cls[`un_${c}`] = (e) => e.classList.remove(`${c}`); - cls[`is_${c}`] = (e) => e.classList.contains(`${c}`); - }); + cls.hide = (e) => { + e.classList.add("fade-out"); + e.classList.remove("fade-in"); + } + cls.show = (e) => { + e.classList.add("fade-in"); + e.classList.remove("fade-out"); + } + cls.visible = (e) => !e.classList.contains("fade-out") + return cls; })(CLASS || {}); diff --git a/styles/main.css b/styles/main.css index 8b858ee..5a387f8 100644 --- a/styles/main.css +++ b/styles/main.css @@ -60,53 +60,32 @@ body { flex-wrap: wrap; } -.grid > div { +.thumb { flex-grow: 1; margin: .3vw; - overflow: hidden; border-radius: .5vw; -} - -.grid > div > img { display: block; - min-width: 100%; height: 200px; - object-fit: cover; } -.grid > div:hover { - animation-name: box_hover; - animation-timing-function: ease-in-out; - animation-duration: 800ms; - transform: scale(1.1); - box-shadow: 0px 0px 20px 10px var(--shadow-col); +.thumb > img { + border-radius: inherit; + object-fit: cover; + min-width: 100%; + max-height: 200px; + transition: all 800ms ease-in-out; } -@keyframes box_hover { - 0% { - transform: scale(1.0); - box-shadow: 0px 0px 0px var(--shadow-col); - } - 100% { - transform: scale(1.1); - box-shadow: 0px 0px 20px 10px var(--shadow-col); - } +.thumb > img:hover { + transform: scale(1.1); + box-shadow: 0px 0px 10px 5px var(--shadow-col); + transition: all 800ms ease-in-out; } -.grid > div:active { - animation-name: box_active; - animation-timing-function: ease-in-out; - animation-duration: 500ms; +.thumb > img:active { + box-shadow: 0px 0px 0px var(--shadow-col); transform: scale(0.95); -} - -@keyframes box_active { - 0% { - transform: scale(1.1); - } - 100% { - transform: scale(0.95); - } + transition: all 300ms ease-in-out; } .photo-bg { @@ -127,6 +106,7 @@ body { } .photo-frame > img { + cursor: pointer; max-width: 90vw; max-height: 84vh; margin-left: auto; @@ -135,7 +115,7 @@ body { margin-bottom: auto; display: block; border: thick solid var(--frame-bd-col); - box-shadow: 0px 0px 6vmax 5vmax #0D0D0DC2; + box-shadow: 0px 0px 3vmax 2vmax #0D0D0DC2; } .center { @@ -171,5 +151,14 @@ body { /* these must remain at the bottom */ .parent { height: 95%; } -.hidden { display: none; } +.fade-in { + visibility: show; + opacity: 1; + transition: visibility 500ms, opacity 500ms; +} +.fade-out { + visibility: hidden; + opacity: 0; + transition: visibility 300ms, opacity 300ms; +}