Photo: Fix number positioning and parallax effect

src/animations/Photo.js

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

src/molecules/Photo.svelte

@@ -21,6 +21,9 @@
     const imgAlt = `${photo.name}, ${location.region}, ${location.country.name}`
     const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
 
+    // Photo index
+    const photoIndex = (index < 10 ? '0': '') + index
+
 
     /*
     ** Run code when mounted
@@ -69,9 +72,9 @@
             <time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}>
                 {formatDate(photo.date, 'FULL')}
             </time>
-            <span class="photo__number">
+            <div class="photo__number">
-                {(index < 10 ? '0': '') + index}
+                <span id="photo_number">{photoIndex}</span>
-            </span>
+            </div>
         </div>
     </div>
 </div>

src/style/molecules/_photo.scss

@@ -140,15 +140,31 @@
         pointer-events: none;
         user-select: none;
 
+        span {
+            display: block;
+        }
+
         @include breakpoint (sm) {
-            font-size: pxVW(300);
-            left: 92%;
-            top: 50%;
             z-index: 1;
-            transform: translate(-50%, -50%);
+            top: 0;
+            right: 8%;
+            transform: translate(0, -25%);
+            font-size: pxVW(300);
+        }
+        @include breakpoint (md) {
+            top: 50%;
+            right: 0;
+            bottom: auto;
+            transform: translate(26.5vw, -50%);
+            width: 50%;
+            text-align: center;
+        }
+        @include breakpoint (lg) {
+            transform: translate(28vw, -50%);
         }
         @include breakpoint (xxl) {
             font-size: rem(300px);
+            transform: translate(70%, -50%);
         }
     }
 }

src/style/organisms/_photos.scss

@@ -54,7 +54,6 @@
         position: relative;
         z-index: 4;
         margin-bottom: 88px;
-        overflow-x: hidden;
 
         @include breakpoint (sm) {
             margin-bottom: 120px;
@@ -67,6 +66,7 @@
     }
 
 
+
     /*
     ** List view
     */
@@ -79,9 +79,9 @@
 
         // Photo
         .photo {
-            @include breakpoint (sm) {
             // Even photos
             &:nth-child(even) {
+                @include breakpoint (sm) {
                     // Location
                     .photo__location, h2 {
                         text-align: right;
@@ -96,12 +96,26 @@
                             right: 100%;
                             left: -30px;
                         }
-                        &__number {
-                            right: 77%;
-                            left: auto;
-                            text-align: right;
                     }
                 }
+
+                // Number
+                .photo__number {
+                    @include breakpoint (sm) {
+                        right: auto;
+                        left: 8%;
+                    }
+                    @include breakpoint (md) {
+                        right: auto;
+                        left: 0;
+                        transform: translate(-23vw, -50%);
+                    }
+                    @include breakpoint (lg) {
+                        transform: translate(-26vw, -50%);
+                    }
+                    @include breakpoint (xl) {
+                        transform: translate(-66%, -50%);
+                    }
                 }
             }
 
@@ -131,6 +145,7 @@
     }
 
 
+
     /*
     ** Grid view
     */
@@ -205,6 +220,7 @@
                 transform: none;
                 top: auto;
                 left: auto;
+                text-align: right;
             }
             &__date {
                 display: none;