diff --git a/src/animations/TitleSite.js b/src/animations/TitleSite.js index 09cbe2d..f5717ba 100644 --- a/src/animations/TitleSite.js +++ b/src/animations/TitleSite.js @@ -21,12 +21,11 @@ export const animateIn = (scope, init) => { }) // On scroll animation - const title = ScrollOut({ - once: true, - targets: scope, - onShown: () => { - console.log('TitleSite show') - letters.restart() - } + requestAnimationFrame(() => { + const title = ScrollOut({ + once: true, + targets: scope, + onShown: () => letters.restart() + }) }) } diff --git a/src/animations/index.js b/src/animations/index.js index 0fcbf9f..ccbd1fe 100644 --- a/src/animations/index.js +++ b/src/animations/index.js @@ -21,7 +21,7 @@ export const animateIn = () => { // Title: Parallax on scroll const translate = anime({ targets: '#title-houses', - translateX: ['7%', '-15%'], + translateX: window.innerWidth <= 1920 ? ['25%', '-15%'] : ['7%', '-7%'], translateZ: [0, 0], easing: 'linear', duration: animDuration, diff --git a/src/style/_base.scss b/src/style/_base.scss index a197ea4..7f6df5a 100644 --- a/src/style/_base.scss +++ b/src/style/_base.scss @@ -57,6 +57,7 @@ button { line-height: 1; color: $color-secondary; letter-spacing: -2vw; + text-align: center; pointer-events: none; user-select: none; @@ -65,6 +66,7 @@ button { } @include breakpoint (1920px) { font-size: rem(900px); + letter-spacing: -40px; } &, span { diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index 6030e76..f7edb47 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -7,6 +7,11 @@ .title-parallax { margin-top: -#{pxVW(160)}; margin-left: -#{pxVW(160)}; + + @include breakpoint (1920px) { + margin-top: -160px; + margin-left: auto; + } } // Description diff --git a/src/style/pages/_place.scss b/src/style/pages/_place.scss index e2d2574..1720dc2 100644 --- a/src/style/pages/_place.scss +++ b/src/style/pages/_place.scss @@ -167,13 +167,14 @@ top: 0; left: 0; width: 100%; - max-width: 1920px; height: 100%; will-change: transform, opacity; .parallax { width: 100%; height: 100%; + max-width: 1760px; + margin: 0 auto; } &_img { position: relative;