diff --git a/src/animations/Photo.js b/src/animations/Photo.js
index 69f55f6..5d5311d 100644
--- a/src/animations/Photo.js
+++ b/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)
}
diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index a34091a..dd321d7 100644
--- a/src/molecules/Photo.svelte
+++ b/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 @@
-
- {(index < 10 ? '0': '') + index}
-
+
+ {photoIndex}
+
diff --git a/src/style/molecules/_photo.scss b/src/style/molecules/_photo.scss
index 2f5abcf..2d072a2 100644
--- a/src/style/molecules/_photo.scss
+++ b/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%);
}
}
}
diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss
index 856c3d5..61cf25a 100644
--- a/src/style/organisms/_photos.scss
+++ b/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) {
+ // Even photos
+ &:nth-child(even) {
+ @include breakpoint (sm) {
// Location
.photo__location, h2 {
text-align: right;
@@ -96,11 +96,25 @@
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;