Photo: Fix number positioning and parallax effect

src/animations/Photo.js

@@ -42,22 +42,30 @@ export const animateIn = scope => {
     })
 
     // Number parallax on scroll
-    const numberParallax = ScrollOut({
-        targets: scope.querySelector('.photo__number'),
-        onShown (el) {
-            const translate = anime({
-                targets: el,
-                translateX: ['-50%', '-50%'],
-                translateY: ['-50%', '-20%'],
-                duration: 2000,
-                easing: 'linear',
-                autoplay: false
+    const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
+    const nbParallax = nbParallaxMedia => {
+        if (nbParallaxMedia.matches) {
+            const scroll = ScrollOut({
+                targets: scope.querySelector('#photo_number'),
+                onShown (el) {
+                    const translate = anime({
+                        targets: el,
+                        translateY: (window.innerWidth <= 768) ? ['0%', '20%'] : ['-15%', '15%'],
+                        duration: 2000,
+                        easing: 'linear',
+                        autoplay: false
+                    })
+                    window.addEventListener('scroll', () => parallaxAnime(el, translate))
+                    setTimeout(() => parallaxAnime(el, translate), 50)
+                },
+                onHidden () {
+                    window.removeEventListener('scroll', parallaxAnime)
+                }
             })
-            window.addEventListener('scroll', () => parallaxAnime(el, translate))
-            setTimeout(() => parallaxAnime(el, translate), 50)
-        },
-        onHidden () {
-            window.removeEventListener('scroll', parallaxAnime)
         }
-    })
+    }
+
+    // Listen on screen size to run the function
+    nbParallaxMedia.addListener(nbParallax)
+    nbParallax(nbParallaxMedia)
 }