backgrounds

app/static/css/partials/_ascroll.scss

@@ -23,6 +23,7 @@
 
   }
   .annotation {
+    min-height: 100vh;
     .frame {
       img {
         width: 100%;

app/static/css/partials/_layout.scss

@@ -1,6 +1,19 @@
+@keyframes background_animation {
+    0%,100% {
+        background-position: 0 0;
+        color: #ddd;
+    }
+
+    50% {
+        background-position: 100% 0;
+        color: #000;
+    }
+}
 body {
-    background: #d3d;
-    color: #eee;
+    background: linear-gradient(to right, #6666ff, #0099ff , #ffff00, #ff3399);
+    animation: background_animation 60s ease-in-out infinite;
+    background-size: 400% 100%;
+    color: #ddd;
     font-family: "Noto Sans";
     font-size: 20px;
     overflow-x: hidden;

app/static/js/ascroll.js

@@ -3,10 +3,6 @@ var layer = 'descriptions'
 var baseURL = 'https://pad.ma'
 var imageResolution = 480
 
-let lastKnownScrollPosition = 0
-let ticking = false;
-
-
 async function pandoraAPI(action, data) {
     var url = baseURL + '/api/'
     //var url = '/pandoraAPI/'
@@ -39,6 +35,7 @@ function updatePlayer(video, frame, currentTime, out, src) {
     video.dataset.in = currentTime
     video.dataset.out = out
     video.controls = true
+    video._frame = frame
     video.play()
     video.style.opacity = 1
 }
@@ -66,18 +63,55 @@ function onVisibilityChange(el, callback) {
     }
 }
 
+function scrollTo(element) {
+    var delta = element.offsetTop - document.scrollingElement.scrollTop,
+        duration = 1000, t = 40, n = duration / t,
+        step = delta / n;
+
+    function scroll() {
+        if (document.scrollingElement.scrollTop + step > element.offsetTop) {
+            document.scrollingElement.scrollTop = element.offsetTop
+            n = 0
+        } else {
+            document.scrollingElement.scrollTop += step
+        }
+        n--
+        if (n) setTimeout(scroll, t)
+    }
+    scroll()
+}
+
 function timeupdate(event) {
     if (event.target.dataset.out && event.target.dataset.in) {
         var in_= parseFloat(event.target.dataset.in)
         var out_= parseFloat(event.target.dataset.out)
         if (event.target.currentTime >= out_) {
+            /*
+            var next
+            if (event.target._frame) {
+                next = event.target._frame.parentElement.nextSibling
+                if (next) {
+                    next = next.querySelector('.frame')
+                }
+            }
+            if (next) {
+                scrollTo(next)
+            } else {
+                event.target.pause()
+            }
+            */
             event.target.currentTime = in_
         }
     }
 }
 
 function loadItem(config) {
-    pandoraAPI('get', {id: config.item, keys: ['id', 'title', 'layers']}).then(response => {
+    pandoraAPI('get', {id: config.item, keys: [
+        'id', 'title', 'layers', 'hue', 'saturation', 'lightness'
+    ]}).then(response => {
+        //var color = `hsl(${response.data.hue}, ${response.data.saturation * 100}%, ${response.data.lightness * 100}%)`
+        var color = `hsl(${response.data.hue}, 70%, 50%)`
+        //document.body.style.background = color
         var ascroll = document.querySelector('#ascroll')
         var loaded = false
 
@@ -120,21 +154,6 @@ function loadItem(config) {
         if (frame) {
             updatePlayer(video, frame, first['in'], first['out'])
         }
-
-        /*
-        document.addEventListener('scroll', function(e) {
-          lastKnownScrollPosition = window.scrollY;
-
-          if (!ticking) {
-            window.requestAnimationFrame(function() {
-              updatePlayerPosition(video, lastKnownScrollPosition);
-              ticking = false;
-            });
-
-            ticking = true;
-          }
-        })
-        */
     })
 }
 function loadEdit(config) {