tykayn/digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

show back animation on open sesame section

Browse Source
This commit is contained in:
Tykayn 2023-04-26 15:05:12 +02:00 committed by tykayn
parent dce4095bf7
commit 3ac1cf4bf7
3 changed files with 84 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/4-content.css
View File

@ -8,6 +8,8 @@
#content_all_img{ #content_all_img{
background: url('/img/bg_content.png'); background: url('/img/bg_content.png');
background-size: cover; background-size: cover;
width: 90vw;
height: 90vh;
} }
#content_all .columns { #content_all .columns {

126
index.html
View File

@ -27,77 +27,77 @@
<main class="has-text-centered"> <main class="has-text-centered">
<!-- <section id="cover" class="has-text-centerd">--> <section id="cover" class="has-text-centerd">
<!-- <div id="hand"></div>--> <div id="hand"></div>
<!-- <div id="main_title_container" class="margin-auto has-text-centered">--> <div id="main_title_container" class="margin-auto has-text-centered">
<!-- <div id="main_title" class="margin-auto">--> <div id="main_title" class="margin-auto">
<!-- <h1 class="is-hidden">Sesame</h1>--> <h1 class="is-hidden">Sesame</h1>
<!-- </div>--> </div>
<!-- <div class="title-container">--> <div class="title-container">
<!-- <h2 class="container-text margin-auto">--> <h2 class="container-text margin-auto">
<!-- We focus on online
 conversion to help brands sell better and more.--> We focus on online
 conversion to help brands sell better and more.
<!-- </h2>--> </h2>
<!-- <a href="#open" class="button margin-auto">Scroll</a>--> <a href="#open" class="button margin-auto">Scroll</a>
<!-- </div>--> </div>
<!-- </div>--> </div>
<!-- </section>--> </section>
<!-- <section id="welcome">--> <section id="welcome">
<!-- <div class="phones-land">--> <div class="phones-land">
<!-- <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">--> <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
<!-- <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">--> <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
<!-- <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">--> <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
<!-- <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">--> <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
<!-- </div>--> </div>
<!-- <h2 class="margin-auto container-text-lg">--> <h2 class="margin-auto container-text-lg">
<!-- We come from--> We come from
<!-- <span class="color-emphasis">--> <span class="color-emphasis">
<!-- the
 most immersive e-commerce market--> the
 most immersive e-commerce market
<!-- </span>--> </span>
<!-- in the world.--> in the world.
<!-- </h2>--> </h2>
<!-- </section>--> </section>
<!-- <section id="open">--> <section id="open">
<div id="open-handle"></div>
<!-- <h2 class="text">--> <h2 class="text">
<!-- <img src="/img/unlock.png" alt="Open Sesame">--> <img src="/img/unlock.png" alt="Open Sesame">
<!-- </h2>--> </h2>
<!-- </section>--> </section>
<!-- <section id="content">--> <section id="content">
<!-- <h2>--> <h2>
<!-- <p id="content_first" class="first color-emphasis">Transactional</p>--> <p id="content_first" class="first color-emphasis">Transactional</p>
<!-- <p id="content_second" class="second">Content</p>--> <p id="content_second" class="second">Content</p>
<!-- </h2>--> </h2>
<!-- </section>--> </section>
<!-- <section id="content_all">--> <section id="content_all">
<!-- <div id="content_all_img"></div>--> <div id="content_all_img"></div>
<!-- <div class="columns">--> <div class="columns">
<!-- <div class="column">--> <div class="column">
<!-- <h2 class="container-text-md">--> <h2 class="container-text-md">
<!-- For all your--> For all your
<!-- <span class="color-emphasis">--> <span class="color-emphasis">
<!-- digital--> digital
<!-- </span>--> </span>
<!-- uses.--> uses.
<!-- </h2>--> </h2>
<!-- </div>--> </div>
<!-- <div class="column">--> <div class="column">
<!-- <p class="container-text-md text">--> <p class="container-text-md text">
<!-- Our creative competitive edge--> Our creative competitive edge
<!-- We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our--> 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--> technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale
<!-- for all touchpoints to reduce costs.--> for all touchpoints to reduce costs.
<!-- </p>--> </p>
<!-- </div>--> </div>
<!-- </div>--> </div>
<!-- </section>--> </section>
<!-- flipping zones--> <!-- flipping zones-->
<section id="content-2" class="flip-container flip-from-right"> <section id="content-2" class="flip-container flip-from-right">

21
js/main.js
View File

@ -127,9 +127,10 @@ gsap.to("#content_second",
}) })
// le background coloré grandit légèrement // 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", ease: "easeInOut",
scrollTrigger: { scrollTrigger: {
trigger: '#content', 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 rotateYCard = "180deg";
let offsetCard = "-100px"; let offsetCard = "-100px";