From 3ac1cf4bf718579ee0f91f9d8b7c4b70631939ad Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 26 Apr 2023 15:05:12 +0200 Subject: [PATCH] show back animation on open sesame section --- css/4-content.css | 2 + index.html | 126 +++++++++++++++++++++++----------------------- js/main.js | 21 +++++++- 3 files changed, 84 insertions(+), 65 deletions(-) diff --git a/css/4-content.css b/css/4-content.css index af25fe2..93ca0cf 100644 --- a/css/4-content.css +++ b/css/4-content.css @@ -8,6 +8,8 @@ #content_all_img{ background: url('/img/bg_content.png'); background-size: cover; + width: 90vw; + height: 90vh; } #content_all .columns { diff --git a/index.html b/index.html index bbd8abe..bcfc63e 100644 --- a/index.html +++ b/index.html @@ -27,77 +27,77 @@
- - +
+
- - - - +
+
+

Sesame

+
- +
- - - - - +

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

+ Scroll +
- - - +
+
+
- - - - - - - - - - - - - +
+ phone watches + phone watches + phone watches + phone watches +
+

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+
+

+ Open Sesame +

+
+
+

+

Transactional

+

Content

+

+
+
+
+
+
+

+ For all your + + digital + + uses. +

+
+
+

+ Our creative competitive edge + We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our + technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale + for all touchpoints to reduce costs. +

+
+
- +
diff --git a/js/main.js b/js/main.js index d47760a..a9483f7 100644 --- a/js/main.js +++ b/js/main.js @@ -127,9 +127,10 @@ gsap.to("#content_second", }) // le background coloré grandit légèrement -gsap.to("#content_all_img", +gsap.fromTo("#content_all_img", + {scale:0.8}, { - scale: 1.5, + scale: 1, ease: "easeInOut", scrollTrigger: { trigger: '#content', @@ -138,6 +139,22 @@ gsap.to("#content_all_img", } }) +// 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, + } + }) + let rotateYCard = "180deg"; let offsetCard = "-100px";