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

show back animation on open sesame section

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{
background: url('/img/bg_content.png');
background-size: cover;
width: 90vw;
height: 90vh;
}
#content_all .columns {

126
index.html
View File

@ -27,77 +27,77 @@
<main class="has-text-centered">
<!-- <section id="cover" class="has-text-centerd">-->
<!-- <div id="hand"></div>-->
<section id="cover" class="has-text-centerd">
<div id="hand"></div>
<!-- <div id="main_title_container" class="margin-auto has-text-centered">-->
<!-- <div id="main_title" class="margin-auto">-->
<!-- <h1 class="is-hidden">Sesame</h1>-->
<!-- </div>-->
<div id="main_title_container" class="margin-auto has-text-centered">
<div id="main_title" class="margin-auto">
<h1 class="is-hidden">Sesame</h1>
</div>
<!-- <div class="title-container">-->
<div class="title-container">
<!-- <h2 class="container-text margin-auto">-->
<!-- We focus on online
 conversion to help brands sell better and more.-->
<!-- </h2>-->
<!-- <a href="#open" class="button margin-auto">Scroll</a>-->
<!-- </div>-->
<h2 class="container-text margin-auto">
We focus on online
 conversion to help brands sell better and more.
</h2>
<a href="#open" class="button margin-auto">Scroll</a>
</div>
<!-- </div>-->
<!-- </section>-->
<!-- <section id="welcome">-->
</div>
</section>
<section id="welcome">
<!-- <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-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-4">-->
<!-- </div>-->
<!-- <h2 class="margin-auto container-text-lg">-->
<!-- We come from-->
<!-- <span class="color-emphasis">-->
<!-- the
 most immersive e-commerce market-->
<!-- </span>-->
<!-- in the world.-->
<!-- </h2>-->
<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-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-4">
</div>
<h2 class="margin-auto container-text-lg">
We come from
<span class="color-emphasis">
the
 most immersive e-commerce market
</span>
in the world.
</h2>
<!-- </section>-->
<!-- <section id="open">-->
<!-- <h2 class="text">-->
<!-- <img src="/img/unlock.png" alt="Open Sesame">-->
<!-- </h2>-->
<!-- </section>-->
<!-- <section id="content">-->
<!-- <h2>-->
<!-- <p id="content_first" class="first color-emphasis">Transactional</p>-->
<!-- <p id="content_second" class="second">Content</p>-->
<!-- </h2>-->
<!-- </section>-->
<!-- <section id="content_all">-->
<!-- <div id="content_all_img"></div>-->
<!-- <div class="columns">-->
<!-- <div class="column">-->
<!-- <h2 class="container-text-md">-->
<!-- For all your-->
<!-- <span class="color-emphasis">-->
<!-- digital-->
<!-- </span>-->
<!-- uses.-->
<!-- </h2>-->
<!-- </div>-->
<!-- <div class="column">-->
<!-- <p class="container-text-md text">-->
<!-- 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.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
</section>
<section id="open">
<div id="open-handle"></div>
<h2 class="text">
<img src="/img/unlock.png" alt="Open Sesame">
</h2>
</section>
<section id="content">
<h2>
<p id="content_first" class="first color-emphasis">Transactional</p>
<p id="content_second" class="second">Content</p>
</h2>
</section>
<section id="content_all">
<div id="content_all_img"></div>
<div class="columns">
<div class="column">
<h2 class="container-text-md">
For all your
<span class="color-emphasis">
digital
</span>
uses.
</h2>
</div>
<div class="column">
<p class="container-text-md text">
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.
</p>
</div>
</div>
<!-- </section>-->
</section>
<!-- flipping zones-->
<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
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";