From 35836defa8f061a96d9d8ef86a15ef2f0b116272 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Thu, 11 May 2023 14:23:32 +0200 Subject: [PATCH] add responsive, disable animations --- css/0-general.css | 1 + css/4-content.css | 5 + css/7-responsive.css | 107 +++++ css/main.css | 1 + index.html | 4 +- js/main.js | 399 +++++++++--------- package-lock.json | 4 + package.json | 3 + .../sesame/src/components/CoverSection.vue | 2 +- 9 files changed, 326 insertions(+), 200 deletions(-) create mode 100644 css/7-responsive.css diff --git a/css/0-general.css b/css/0-general.css index caa9639..06a04a9 100644 --- a/css/0-general.css +++ b/css/0-general.css @@ -2,6 +2,7 @@ body { background: #020225; padding-bottom: 50vh; + overflow-x: hidden; } main section { diff --git a/css/4-content.css b/css/4-content.css index cd26874..5c114ad 100644 --- a/css/4-content.css +++ b/css/4-content.css @@ -47,6 +47,11 @@ font-size: 100px !important; letter-spacing: -0.04em; line-height: 90px; + text-shadow: 0 0 1rem #333; +} +#content_all .text, +.text-title { + text-shadow: 0 0 1rem #333; } #content_all .columns > .column:nth-of-type(1) { diff --git a/css/7-responsive.css b/css/7-responsive.css new file mode 100644 index 0000000..2b6011d --- /dev/null +++ b/css/7-responsive.css @@ -0,0 +1,107 @@ +@media screen and (max-width: 900px) { + #main_title_container h2 { + margin-top: 15vh; + } + + #main_title { + top: 15rem; + } + + + #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; + } +} diff --git a/css/main.css b/css/main.css index 4902257..7560316 100644 --- a/css/main.css +++ b/css/main.css @@ -18,3 +18,4 @@ custom @import "4-content.css"; @import "5-popover.css"; @import "6-portfolio.css"; +@import "7-responsive.css"; diff --git a/index.html b/index.html index ee20fbe..9a623a6 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,7 @@

- We focus on online
 conversion to help brands sell better and more. + We focus on online conversion to help brands sell better and more.

Scroll
@@ -56,7 +56,7 @@

We come from - the
 most immersive e-commerce market + the most immersive e-commerce market in the world.

diff --git a/js/main.js b/js/main.js index 9865a81..e1e193f 100644 --- a/js/main.js +++ b/js/main.js @@ -2,217 +2,222 @@ * gsap lib https://greensock.com/get-started-2#controllingYourAnimations */ let development_debug = false +let enable_animations = false -gsap.fromTo('#main_title', { - opacity: 0, - top: 200 -}, { - opacity: 1, - top: 100, - scale: 0.8, - duration: 1.5, - ease: 'sine', - scrollTrigger: { - trigger: '#cover', - scrub: 1, - markers: development_debug, - } -}) +if (enable_animations) { -gsap.to('#hand', { - top: 300, - duration: 1, - scrollTrigger: { - trigger: '#cover', - scrub: 1, - markers: development_debug, - } -}) -gsap.to('#main_title', { - top: 150, - duration: 1, - scrollTrigger: { - trigger: '#main_title', - scrub: 1, - markers: development_debug, - } -}) + gsap.fromTo('#main_title', { + opacity: 0, + top: 200 + }, { + opacity: 1, + top: 100, + scale: 0.8, + duration: 1.5, + ease: 'sine', + scrollTrigger: { + trigger: '#cover', + scrub: 1, + markers: development_debug, + } + }) -gsap.to('#phone-watches-1', - { - left: 500, - top: (531 - 400), - scale: 0.8, - duration: 1.5, - ease: 'sine', - scrollTrigger: { - trigger: '#welcome', - scrub: 1, - markers: development_debug, - } - }) -gsap.to('#phone-watches-2', - { - left: '50vw', - top: 100, - scale: 0.7, - duration: 1.25, - ease: 'sine', - scrollTrigger: { - trigger: '#welcome', - scrub: 1, - markers: development_debug, - } - }) -gsap.to('#phone-watches-3', - { - left: '50vw', - top: 0, - scale: 0.8, - duration: 1.25, - ease: 'sine', - scrollTrigger: { - trigger: '#welcome', - scrub: 2, - markers: development_debug, - } - }) -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.to('#hand', { + top: 300, + duration: 1, + scrollTrigger: { + trigger: '#cover', + scrub: 1, + markers: development_debug, + } + }) + gsap.to('#main_title', { + top: 150, -gsap.to('#phone-watches-4', - { - left: '50vw', - top: -10, - scale: 0.5, - duration: 3, - ease: 'sine', - scrollTrigger: { - trigger: '#welcome', - scrub: 2, - markers: development_debug, - } - }) + duration: 1, + scrollTrigger: { + trigger: '#main_title', + scrub: 1, + markers: development_debug, + } + }) -gsap.to('#content_first', - { - left: -20, - top: -50, - opacity: 1, - duration: 3, - scale: 1.5, - ease: 'easeInOut', - scrollTrigger: { - trigger: '#content', - scrub: 0.5, - markers: development_debug, - } - }) + gsap.to('#phone-watches-1', + { + left: 500, + top: (531 - 400), + scale: 0.8, + duration: 1.5, + ease: 'sine', + scrollTrigger: { + trigger: '#welcome', + scrub: 1, + markers: development_debug, + } + }) + gsap.to('#phone-watches-2', + { + left: '50vw', + top: 100, + scale: 0.7, + duration: 1.25, + ease: 'sine', + scrollTrigger: { + trigger: '#welcome', + scrub: 1, + markers: development_debug, + } + }) + gsap.to('#phone-watches-3', + { + left: '50vw', + top: 0, + scale: 0.8, + duration: 1.25, + ease: 'sine', + scrollTrigger: { + trigger: '#welcome', + scrub: 2, + markers: development_debug, + } + }) + 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.to('#content_second', - { - left: -40, - top: -50, - opacity: 1, - duration: 2, - scale: 1.25, - ease: 'spline', - scrollTrigger: { - trigger: '#content', - scrub: 0.5, - markers: development_debug, - } - }) + 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.to('#content_first', + { + left: -20, + top: -50, + opacity: 1, + duration: 3, + scale: 1.5, + ease: 'easeInOut', + scrollTrigger: { + trigger: '#content', + scrub: 0.5, + markers: development_debug, + } + }) + + gsap.to('#content_second', + { + left: -40, + top: -50, + opacity: 1, + duration: 2, + scale: 1.25, + ease: 'spline', + scrollTrigger: { + trigger: '#content', + scrub: 0.5, + markers: development_debug, + } + }) // le background coloré grandit légèrement -gsap.fromTo('#content_all_img', - { - scale: 0.8, - left: -100 - }, - { - scale: 1, - left: -80, - ease: 'linear', - scrollTrigger: { - trigger: '#content_all .columns', - scrub: 1, - markers: development_debug, - } - }) + gsap.fromTo('#content_all_img', + { + scale: 0.8, + left: -100 + }, + { + scale: 1, + left: -80, + ease: 'linear', + scrollTrigger: { + trigger: '#content_all .columns', + scrub: 1, + markers: development_debug, + } + }) // TODO faire devenir fixe le background une fois que l'on est passé -gsap.fromTo('#open img', - { - opacity: 0.5, - bottom: '-100vh' - }, - { - opacity: 1, - bottom: '50vh', - scale: 1.5, - ease: 'spline', - scrollTrigger: { - trigger: '#open-handle', - scrub: 2, - markers: development_debug, - } - }) + gsap.fromTo('#open img', + { + opacity: 0.5, + bottom: '-100vh' + }, + { + opacity: 1, + bottom: '50vh', + scale: 1.5, + ease: 'spline', + scrollTrigger: { + trigger: '#open-handle', + scrub: 2, + markers: development_debug, + } + }) -let rotateYCard = '180deg' -let offsetCard = '-100px' + let rotateYCard = '180deg' + let offsetCard = '-100px' // flip from right -gsap.fromTo('#content-2', { - rotateY: rotateYCard, - right: offsetCard, - }, - { - rotateY: 0, - right: 0, - duration: 0.2, - ease: 'easeInOut', - scrollTrigger: { - trigger: '#content-2 .flip-handle', - scrub: 1, - markers: development_debug, - } - }) + gsap.fromTo('#content-2', { + rotateY: rotateYCard, + right: offsetCard, + }, + { + rotateY: 0, + right: 0, + duration: 0.2, + ease: 'easeInOut', + scrollTrigger: { + trigger: '#content-2 .flip-handle', + scrub: 1, + markers: development_debug, + } + }) -function animateCard (id, side) { + function animateCard (id, side) { - let fromObject = { - rotateY: rotateYCard, - } - fromObject[side] = offsetCard + let fromObject = { + rotateY: rotateYCard, + } + fromObject[side] = offsetCard - let toObject = { - rotateY: 0, - duration: 0.2, - ease: 'easeInOut', - scrollTrigger: { - trigger: '#content-' + id + ' .flip-handle', - scrub: 1, - markers: development_debug, - } - } - toObject[side] = 0 + let toObject = { + rotateY: 0, + duration: 0.2, + ease: 'easeInOut', + scrollTrigger: { + trigger: '#content-' + id + ' .flip-handle', + scrub: 1, + markers: development_debug, + } + } + toObject[side] = 0 - gsap.fromTo('#content-' + id, fromObject, - toObject) + gsap.fromTo('#content-' + id, fromObject, + toObject) + } + + animateCard(2, 'right') + animateCard(3, 'left') + animateCard(4, 'right') + animateCard(5, 'left') } - -animateCard(2, 'right') -animateCard(3, 'left') -animateCard(4, 'right') -animateCard(5, 'left') diff --git a/package-lock.json b/package-lock.json index 85753a1..4f02fa2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,11 +7,15 @@ "": { "name": " ", "version": "0.0.1", + "license": "AGPLv3+", "dependencies": { "serve": "~14.2.0" }, "devDependencies": { "parcel-bundler": "^1.8.1" + }, + "engines": { + "node": ">=16.0.0" } }, "node_modules/@ampproject/remapping": { diff --git a/package.json b/package.json index 5763615..0ac9b33 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,9 @@ "keywords": "sesame", "license": "AGPLv3+", "author": "B. Lemoine contact@cipherbliss.com", + "engines": { + "node": ">=16.0.0" + }, "scripts": { "start": "serve ." }, diff --git a/sesame-vitejs/sesame/src/components/CoverSection.vue b/sesame-vitejs/sesame/src/components/CoverSection.vue index add859e..b4cc68c 100644 --- a/sesame-vitejs/sesame/src/components/CoverSection.vue +++ b/sesame-vitejs/sesame/src/components/CoverSection.vue @@ -20,7 +20,7 @@ const count = ref(0)

- We focus on online
 conversion to help brands sell better and more. + We focus on online conversion to help brands sell better and more.

Scroll