]> MadKous Network Git Server - photo-site.git/commitdiff
projects / photo-site.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 46e9dc6)
Add transitions
authorMatthew Kousoulas <shaman.kous@gmail.com>
Tue, 5 Oct 2021 19:54:39 +0000 (15:54 -0400)
committerMatthew Kousoulas <shaman.kous@gmail.com>
Tue, 5 Oct 2021 19:54:39 +0000 (15:54 -0400)
index.html patch | blob | history
scripts/dom.js patch | blob | history
scripts/main.js patch | blob | history
scripts/photo.js patch | blob | history
scripts/util.js patch | blob | history
styles/main.css patch | blob | history

diff --git a/index.html b/index.html
index 44a4e895bb5c8a4ea6a631d6e454275eef1be975..2fd5fe4d4376d7c9058337ce5ba3719a3438ed47 100644 (file)
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
                <script type="text/javascript" src="scripts/main.js"></script>
        </head>
        <body class="parent">
-               <div id="photo-layer" class="photo-bg hidden">
+               <div id="photo-layer" class="photo-bg fade-out">
                        <div id="photo-left" class="arrow-bar">
                                <div class="center">
                                <a class="arrow-sym arrow-left" href="#"></a>
@@ -25,10 +25,12 @@
                                </div>
                        </div>
                </div>
-               <div id="logo">
+               <div id="logo" class="fade-out">
                        <a href="/">
                                <img src="/media/logo_ng.svg" alt="MadKous">
                        </a>
                </div>
+               <div id="thumb-layer" class="fade-out">
+               </div>
        </body>
 </html>
diff --git a/scripts/dom.js b/scripts/dom.js
index 59ffbe4202cf414b1505b0107effca7f5150ef22..cea7a4de63dcf0dfc7ee54cd1bed48acf4e91755 100644 (file)
--- 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 a4cb309a216e3e1bcc0d4400c9f1f7a7eb2d2b73..bbf0a358f62b201b52016d7ab8d310b097cf20d0 100644 (file)
--- 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 c0ddee49f15b82610ff13530e92e18762ccc1974..29e9b177e8a8a78ce84a37c4b52c81c6ea665553 100644 (file)
--- 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 cd1ab0b5bbe480286a1ea118f12e79942cfdad26..9ad4fac5a30aae996b6bcaa619e8faee85ca806d 100644 (file)
--- 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 8b858eef308805dee1bfd8d8b3e3380636dea868..5a387f8532d5e896e360e153de1e1a5ae6e1675b 100644 (file)
--- 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;
+}
 
Unnamed repository; edit this file 'description' to name the repository.