diff --git a/css/sprint_4.css b/css/sprint_4.css index f0a6d84..824a42b 100644 --- a/css/sprint_4.css +++ b/css/sprint_4.css @@ -12731,171 +12731,6 @@ main nav { margin-top: 0; padding-top: 50vh; } -@media screen and (max-width: 1023px) { - #main_title_container h2 { - margin-top: 5vh; - } - - #main_title { - top: 15rem; - height: 25vh; - } - - #cover .button { - top: 7vh; - } - - #content_all h2, - #welcome h2 { - font-size: 6em; - line-height: 1em; - text-align: left; - } - - - #content_all .columns { - top: -145vh; - width: 55vw; - } - .columns { - display: block !important; - } - .column { - width: 100% !important; - } - - #open { - top: 80vh; - } - /** - flipping part - */ - #flipping_zone { - margin-top: -120vh; - position: static; - } - .flip-container { - position: relative; - } - - .flip-container + .flip-container { - margin-top: -5vh; - } - .flip-container .container-text { - z-index: 1; - left: 33vw; - } - .flip-container .text-title { - margin-top: 0; - } - - .flip-container .phone-container { - left: 42vw; - top: 5vh; - } - .flip-container.flip-from-left .container-text { - left: 33vw; - top: 5vh; - } - .flip-container.flip-from-left .phone-container { - left: 25vw; - top: 10vh; - } - - #content-4 { - margin-top: 25vh; - } - #content-5 { - margin-top: 15vh; - } - - #popover { - margin-top: 100vh; - } - /** - exemples sliders - */ - .slider-screen .text-title { - margin-top: 1em; - } - .slider-screen .text, - .slider-screen .phone-container { - position: relative; - width: 412px; - left: 25vw; - top: 5vh; - } - .bullets { - top: 28em; - } - .arrow-left, - .arrow-right { - top: 60vh; - } - .slider-screen { - min-height: 100vh; - } - #popover, #portfolio { - min-height: 200vh; - } - #popover .phone-container, #portfolio .phone-container{ - width: 50vw; - } - -} -@media screen and (max-width: 35em) { - #main_title { - margin-top: 5vh; - } - #main_title_container h2 { - margin-top: 15vh; - } - - #content_all h2, - #welcome h2 { - font-size: 4rem !important; - } - #content_all .text { - padding-right: 0; - } - .container-text-md { - width: auto; - } - #content_all .columns { - width: 100%; - margin: 1rem; - } - .flip-container .container-text { - width: 100%; - left: 5vw; - } - .flip-container .phone-container { - position: static; - margin: 4rem auto; - } - .flip-container.flip-from-left .container-text { - left: 5vw; - } - .flip-container .phone-container { - margin-top: 7rem; - } - .flip-container .text-description { - max-width: 90vw; - } - - #content-4 { - margin-top: 50vh; - } - #content-5 { - margin-top: 45vh; - } - - .slider-screen .text, - .slider-screen .phone-container { - left: 5vw; - max-width: 90vw; - } -} body { background: #fff; padding-bottom: 50vh; @@ -13106,92 +12941,7 @@ main .credits { left: 0; top: -97em; } -@media all and (max-width: 1600px) { - section#carry { - min-height: 120rem; - } - section#carry .description { - margin-top: 3vh; - font-size: 8rem; - } - section#carry .gradient-bg { - top: -40rem; - } - section#carry .gradient-bg-yellow { - top: 10rem; - } - section#carry .computer-block { - width: 70%; - height: 1080px; - left: 0; - top: -110em; - background-size: contain; - margin: 0 auto; - } - section#carry .bubbles { - position: relative; - left: -5vw; - } - section#carry .bubbles p :nth-of-type(1) { - top: -75vh; - } - section#carry .bubbles p :nth-of-type(2) { - left: 70%; - } - section#carry .bubbles p :nth-of-type(3) { - left: 50%; - } - section#carry .bubbles p :nth-of-type(4) { - left: 10%; - } -} -@media all and (max-width: 1100px) { - section#carry { - padding-left: 10vw; - padding-right: 10vw; - min-height: 115rem; - } - section#carry .title { - font-size: 4rem; - } - section#carry .description { - margin-top: 3vh; - font-size: 10rem; - } - section#carry .computer-block { - background-size: contain; - position: relative; - height: 100vh; - width: 100%; - margin-top: -15rem; - } - section#carry .gradient-bg { - margin-top: 0; - } - section#carry .gradient-bg-yellow { - margin-top: 0; - } - section#carry .bubbles { - position: static; - } - section#carry .bubbles p { - margin-top: 2rem; - left: 0; - } - section#carry .bubbles p :nth-of-type(1) { - left: 10%; - } - section#carry .bubbles p :nth-of-type(2) { - left: 70%; - } - section#carry .bubbles p :nth-of-type(3) { - left: 4vw; - margin-left: -60%; - } - section#carry .bubbles p :nth-of-type(4) { - left: -10%; - } -} + #kyc { font-family: "GT Walsheim Pro"; background: white; @@ -13350,24 +13100,8 @@ main .credits { left: 1124px; top: 10vhpx; } -@media screen and (max-width: 1300px) { - #kyc .small-bubble:nth-of-type(1) { - margin-top: 14rem; - } - #kyc .bubbles .bubble { - position: static; - } - #kyc .bubbles .bubble:nth-of-type(1) { - margin-left: 12rem; - } - #kyc .bubbles .bubble:nth-of-type(2) { - margin-left: 5rem; - } - #kyc .bubbles .bubble:nth-of-type(3) { - margin-left: 34%; - margin-top: 0; - } -} + + #china { background-color: #141373; height: 1060px; @@ -13610,36 +13344,7 @@ main .credits { #we_develop .rotated { transform: rotate(180deg); } -@media all and (max-width: 1500px) { - #we_develop .circle.circle-right { - right: 10vw; - } - #we_develop .circle.circle-left { - right: 90vw; - } - #we_develop .quick { - left: 3rem; - top: 77rem; - } - #we_develop .long_term { - margin-right: 5rem; - } - #we_develop .data { - text-align: left; - padding-left: 6rem; - margin-top: 2rem; - } - #we_develop .ar { - text-align: right; - padding-right: 6rem; - margin-top: 3rem; - } -} -@media all and (max-width: 1100px) { - #we_develop .ar { - margin-top: -3rem; - } -} + #full_creative { background: white; min-height: 120vh; @@ -13680,26 +13385,7 @@ main .credits { #full_creative img { max-width: 80vw; } -@media all and (max-width: 1500px) { - #full_creative { - padding-bottom: 20rem; - } - #full_creative .title { - padding: 2rem; - } - #full_creative .column { - padding: 2rem; - } - #full_creative .column p { - font-size: 1.5rem; - } - #full_creative .column, #full_creative .columns { - display: block; - } - #full_creative img { - margin-bottom: 15rem; - } -} + #our_team { background: white; padding-top: 5rem; @@ -13739,26 +13425,7 @@ main .credits { padding: 0 2em; background: white; } -@media screen and (max-width: 1500px) { - #our_team { - margin-top: 30rem; - padding-bottom: 20rem; - } - #our_team img { - max-width: 100%; - margin: 0 auto; - } - #our_team .columns, #our_team .colmumn { - display: block; - position: static; - } - #our_team .name { - font-size: 1.5rem; - } - #our_team .sub-category { - margin-bottom: 10rem; - } -} + #china_achievements { margin-top: 30rem; background: white; @@ -13790,6 +13457,392 @@ main .credits { #china_achievements .offset-left-columns { margin-left: -10rem; } + +#baozun_group { + margin-top: 150px; + background: url("/img/baozun.jpg") no-repeat; + background-size: cover; + border-radius: 80px; +} +#baozun_group .title { + color: #FFFDFC; + font-style: normal; + font-weight: 600; + font-size: 100px; + line-height: 90px; + text-align: center; + letter-spacing: -0.04em; + padding-top: 464px; +} + + + +.counter-block .big-number { + font-weight: 600; + font-size: 140px; + line-height: 90%; + letter-spacing: -0.04em; + color: #020225; +} + +.counter-block .text-description { + font-weight: 400; + font-size: 10px; + line-height: 150%; + text-align: center; + text-transform: uppercase; + color: #020225; +} + +.counter-block img { + margin-left: 80px; + border-radius: 80px; +} + + +@media all and (max-width: 1023px) { + #main_title_container h2 { + margin-top: 5vh; + } + + #main_title { + top: 15rem; + height: 25vh; + } + + #cover .button { + top: 7vh; + } + + #content_all h2, + #welcome h2 { + font-size: 6em; + line-height: 1em; + text-align: left; + } + + + #content_all .columns { + top: -145vh; + width: 55vw; + } + .columns { + display: block !important; + } + .column { + width: 100% !important; + } + + #open { + top: 80vh; + } + /** + flipping part + */ + #flipping_zone { + margin-top: -120vh; + position: static; + } + .flip-container { + position: relative; + } + + .flip-container + .flip-container { + margin-top: 20vh; + } + .flip-container .container-text { + z-index: 1; + left: 33vw; + } + .flip-container .text-title { + margin-top: 0; + } + + .flip-container .phone-container { + left: 42vw; + top: 5vh; + } + .flip-container.flip-from-left .container-text { + left: 33vw; + top: 5vh; + } + .flip-container.flip-from-left .phone-container { + left: 25vw; + top: 10vh; + } + + #content-4 { + margin-top: 25vh; + } + #content-5 { + margin-top: 15vh; + } + + #popover { + margin-top: 100vh; + } + /** + exemples sliders + */ + .slider-screen .text-title { + margin-top: 1em; + } + .slider-screen .text, + .slider-screen .phone-container { + position: relative; + width: 412px; + left: 25vw; + top: 5vh; + } + .bullets { + top: 28em; + } + .arrow-left, + .arrow-right { + top: 60vh; + } + .slider-screen { + min-height: 100vh; + } + #popover, #portfolio { + min-height: 200vh; + } + #popover .phone-container, #portfolio .phone-container{ + width: 50vw; + } + +} +@media all and (max-width: 35em) { + #main_title { + margin-top: 5vh; + } + #main_title_container h2 { + margin-top: 15vh; + } + + #content_all h2, + #welcome h2 { + font-size: 4rem !important; + } + #content_all .text { + padding-right: 0; + } + .container-text-md { + width: auto; + } + #content_all .columns { + width: 100%; + margin: 1rem; + } + .flip-container .container-text { + width: 100%; + left: 6vw; + } + .flip-container .phone-container { + position: static; + margin: 4rem auto; + } + .flip-container.flip-from-left .container-text { + left: 5vw; + } + .flip-container .phone-container { + margin-top: 7rem; + } + .flip-container .text-description { + max-width: 90vw; + } + + #content-4 { + margin-top: 50vh; + } + #content-5 { + margin-top: 45vh; + } + + .slider-screen .text, + .slider-screen .phone-container { + left: 5vw; + max-width: 90vw; + } +} + +@media all and (max-width: 1600px) { + section#carry { + min-height: 120rem; + } + section#carry .description { + margin-top: 3vh; + font-size: 8rem; + } + section#carry .gradient-bg { + top: -40rem; + } + section#carry .gradient-bg-yellow { + top: 10rem; + } + section#carry .computer-block { + width: 70%; + height: 1080px; + left: 0; + top: -110em; + background-size: contain; + margin: 0 auto; + } + section#carry .bubbles { + position: relative; + left: -5vw; + } + section#carry .bubbles p :nth-of-type(1) { + top: -75vh; + } + section#carry .bubbles p :nth-of-type(2) { + left: 70%; + } + section#carry .bubbles p :nth-of-type(3) { + left: 50%; + } + section#carry .bubbles p :nth-of-type(4) { + left: 10%; + } +} +@media all and (max-width: 1100px) { + section#carry { + padding-left: 10vw; + padding-right: 10vw; + min-height: 115rem; + } + section#carry .title { + font-size: 4rem; + } + section#carry .description { + margin-top: 3vh; + font-size: 10rem; + } + section#carry .computer-block { + background-size: contain; + position: relative; + height: 100vh; + width: 100%; + margin-top: -15rem; + } + section#carry .gradient-bg { + margin-top: 0; + } + section#carry .gradient-bg-yellow { + margin-top: 0; + } + section#carry .bubbles { + position: static; + } + section#carry .bubbles p { + margin-top: 2rem; + left: 0; + } + section#carry .bubbles p :nth-of-type(1) { + left: 10%; + } + section#carry .bubbles p :nth-of-type(2) { + left: 70%; + } + section#carry .bubbles p :nth-of-type(3) { + left: 4vw; + margin-left: -60%; + } + section#carry .bubbles p :nth-of-type(4) { + left: -10%; + } +} + +@media all and (max-width: 1300px) { + #kyc .small-bubble:nth-of-type(1) { + margin-top: 14rem; + } + #kyc .bubbles .bubble { + position: static; + } + #kyc .bubbles .bubble:nth-of-type(1) { + margin-left: 12rem; + } + #kyc .bubbles .bubble:nth-of-type(2) { + margin-left: 5rem; + } + #kyc .bubbles .bubble:nth-of-type(3) { + margin-left: 34%; + margin-top: 0; + } +} + +@media all and (max-width: 1500px) { + #we_develop .circle.circle-right { + right: 10vw; + } + #we_develop .circle.circle-left { + right: 90vw; + } + #we_develop .quick { + left: 3rem; + top: 77rem; + } + #we_develop .long_term { + margin-right: 5rem; + } + #we_develop .data { + text-align: left; + padding-left: 6rem; + margin-top: 2rem; + } + #we_develop .ar { + text-align: right; + padding-right: 6rem; + margin-top: 3rem; + } +} +@media all and (max-width: 1100px) { + #we_develop .ar { + margin-top: -3rem; + } +} + +@media all and (max-width: 1500px) { + #full_creative { + padding-bottom: 20rem; + } + #full_creative .title { + padding: 2rem; + } + #full_creative .column { + padding: 2rem; + } + #full_creative .column p { + font-size: 1.5rem; + } + #full_creative .column, #full_creative .columns { + display: block; + } + #full_creative img { + margin-bottom: 15rem; + } +} +@media screen and (max-width: 1500px) { + #our_team { + margin-top: 30rem; + padding-bottom: 20rem; + } + #our_team img { + max-width: 100%; + margin: 0 auto; + } + #our_team .columns, #our_team .colmumn { + display: block; + position: static; + } + #our_team .name { + font-size: 1.5rem; + } + #our_team .sub-category { + margin-bottom: 10rem; + } +} @media screen and (max-width: 1500px) { #china_achievements { margin-top: 895vw; @@ -13819,22 +13872,7 @@ main .credits { width: 100%; } } -#baozun_group { - margin-top: 150px; - background: url("/img/baozun.jpg") no-repeat; - background-size: cover; - border-radius: 80px; -} -#baozun_group .title { - color: #FFFDFC; - font-style: normal; - font-weight: 600; - font-size: 100px; - line-height: 90px; - text-align: center; - letter-spacing: -0.04em; - padding-top: 464px; -} + @media screen and (max-width: 1500px) { #baozun_group { margin-top: 605vw; @@ -13845,26 +13883,3 @@ main .credits { margin-top: 650vw; } } - - -.counter-block .big-number { - font-weight: 600; - font-size: 140px; - line-height: 90%; - letter-spacing: -0.04em; - color: #020225; -} - -.counter-block .text-description { - font-weight: 400; - font-size: 10px; - line-height: 150%; - text-align: center; - text-transform: uppercase; - color: #020225; -} - -.counter-block img { - margin-left: 80px; - border-radius: 80px; -} diff --git a/js/animations_custom.js b/js/animations_custom.js index f8285ff..013460d 100644 --- a/js/animations_custom.js +++ b/js/animations_custom.js @@ -10,20 +10,21 @@ let enable_animations = false enable_animations = true const rotateYCard = '200deg' -const offsetCard = '-=100' +const offsetCard = '10' function animateCard (id, side) { + console.log('animateCard', id, side, offsetCard) const fromObject = { rotateY: rotateYCard, - side: offsetCard + // side: offsetCard } let toObject = { rotateY: 0, duration: 0.2, ease: 'easeInOut', - side: 0, + // side: 1, scrollTrigger: { trigger: '#content-' + id + ' .flip-handle', start: 'top 80%', @@ -31,7 +32,8 @@ function animateCard (id, side) { markers: development_debug, } } - // toObject[side] = offsetCard; + fromObject[side] = 0; + toObject[side] = offsetCard; gsap.fromTo('#content-' + id, fromObject, toObject) @@ -79,7 +81,7 @@ if (enable_animations) { trigger: '#unlock_white', delay: 1, scrub:2, - start: '+=50% 80%' + start: '+50% 80%' } }) @@ -94,16 +96,16 @@ if (enable_animations) { }, keyframes: [ { - top: '-=50', + top: '-50', width: '100vw', }, { - top: '-=50', - width: "-=5vw", + top: '-50', + width: "-5vw", }, { - top: '-=100', - width: '-=40vw', + top: '-100', + width: '-40vw', }] }) @@ -115,7 +117,7 @@ if (enable_animations) { { top: 500, duration: 1, - opacity: 0.5, + opacity: 0, scrollTrigger: { trigger: '#cover', scrub: 1, @@ -126,7 +128,7 @@ if (enable_animations) { gsap.to('#phone-watches-1', { left: 500, - top: (531 - 400), + top: -200, scale: 0.8, duration: 1.5, ease: 'sine', @@ -179,24 +181,10 @@ if (enable_animations) { } }) - gsap.to('#phone-watches-4', - { - left: '50vw', - top: -10, - scale: 0.5, - duration: 3, - ease: 'sine', - scrollTrigger: { - trigger: '#welcome', - scrub: 2, - markers: development_debug, - } - }) - gsap.fromTo('#content_first', { scale: 0.5, - opacity: 0.5, + opacity: 0.15, }, { opacity: 1, @@ -213,7 +201,7 @@ if (enable_animations) { { scale: 0.8, left: -50, - opacity: 0.5, + opacity: 0.15, top: -20, }, { @@ -234,7 +222,7 @@ if (enable_animations) { gsap.fromTo('#content_all_img', { scale: 1, - left: "-=100" + left: "-100" }, { scale: 1.1, @@ -252,7 +240,7 @@ if (enable_animations) { { opacity: 0.5, scale: 1, - bottom: '-=100vh', + bottom: '-100vh', height: '10rem', }, {