Add parallax effects on scroll (titles and photo)

src/utils/functions.js

@@ -1,6 +1,16 @@
 import { apiEndpoints } from './store'
 
 
+/*
+** Get thumbnail from API
+*/
+export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
+    const ratio = 1.5
+    height = !height ? Math.round(width / ratio) : height
+    return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
+}
+
+
 /*
 ** Debounce function with a delay
 ** (For scrolling or other resource demanding behaviors)
@@ -43,8 +53,26 @@ export const lettersToSpan = string => {
 
 
 /*
-** Format date from an input date
+** Random String Generator
 */
+export const randomString = (length = 6, type = 'A') => {
+    type = type && type.toLowerCase()
+    let str = ''
+    let i = 0
+    const min = type == 'a' ? 10 : 0
+    const max = type == 'n' ? 10 : 62
+    for (; i++ < length;) {
+        let r = Math.random() * (max - min) + min << 0
+        str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
+    }
+    return str
+}
+
+
+/*
+** Date related
+*/
+// Format date from an input date
 export const formatDate = (originDate, format) => {
     let output
     const date = new Date(originDate)
@@ -70,10 +98,7 @@ export const formatDate = (originDate, format) => {
     return output
 }
 
-
-/*
-** Relative time from an input date
-*/
+// Relative time from an input date
 export const relativeTime = (originDate, limit = 0) => {
     const date = new Date(originDate)
     const diff = Number(new Date()) - date
@@ -133,29 +158,19 @@ export const relativeTime = (originDate, limit = 0) => {
 }
 
 
-
 /*
-** Random String Generator
+** Controls Anime.js parallax
 */
-export const randomString = (length = 6, type = 'A') => {
-    type = type && type.toLowerCase()
-    let str = ''
-    let i = 0
-    const min = type == 'a' ? 10 : 0
-    const max = type == 'n' ? 10 : 62
-    for (; i++ < length;) {
-        let r = Math.random() * (max - min) + min << 0
-        str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
+export const parallaxAnime = (element, anime) => {
+    const bound = element.getBoundingClientRect()
+    const windowHeight = window.innerHeight
+    if (bound.top < windowHeight && bound.bottom > 0) {
+        anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
+    } else {
+        if (bound.top >= windowHeight) {
+            anime.seek(0)
+        } else if (bound.bottom <= 0) {
+            anime.seek(anime.duration)
+        }
     }
-    return str
-}
-
-
-/*
-** Get thumbnail from API
-*/
-export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
-    const ratio = 1.5
-    height = !height ? Math.round(width / ratio) : height
-    return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
 }