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

add responsive, disable animations

Browse Source
This commit is contained in:
Tykayn 2023-05-11 14:23:32 +02:00 committed by tykayn
parent 36ca950aeb
commit 35836defa8
9 changed files with 326 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/0-general.css
View File

@ -2,6 +2,7 @@
body { body {
background: #020225; background: #020225;
padding-bottom: 50vh; padding-bottom: 50vh;
overflow-x: hidden;
} }
main section { main section {

5
css/4-content.css
View File

@ -47,6 +47,11 @@
font-size: 100px !important; font-size: 100px !important;
letter-spacing: -0.04em; letter-spacing: -0.04em;
line-height: 90px; 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) { #content_all .columns > .column:nth-of-type(1) {

107
css/7-responsive.css Normal file
View File

@ -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;
}
}

1
css/main.css
View File

@ -18,3 +18,4 @@ custom
@import "4-content.css"; @import "4-content.css";
@import "5-popover.css"; @import "5-popover.css";
@import "6-portfolio.css"; @import "6-portfolio.css";
@import "7-responsive.css";

4
index.html
View File

@ -38,7 +38,7 @@
<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>
@ -56,7 +56,7 @@
<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>

399
js/main.js
View File

@ -2,217 +2,222 @@
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/ */
let development_debug = false let development_debug = false
let enable_animations = false
gsap.fromTo('#main_title', { if (enable_animations) {
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('#hand', { gsap.fromTo('#main_title', {
top: 300, opacity: 0,
duration: 1, top: 200
scrollTrigger: { }, {
trigger: '#cover', opacity: 1,
scrub: 1, top: 100,
markers: development_debug, scale: 0.8,
} duration: 1.5,
}) ease: 'sine',
gsap.to('#main_title', { scrollTrigger: {
top: 150, trigger: '#cover',
duration: 1, scrub: 1,
scrollTrigger: { markers: development_debug,
trigger: '#main_title', }
scrub: 1, })
markers: development_debug,
}
})
gsap.to('#phone-watches-1', gsap.to('#hand', {
{ top: 300,
left: 500, duration: 1,
top: (531 - 400), scrollTrigger: {
scale: 0.8, trigger: '#cover',
duration: 1.5, scrub: 1,
ease: 'sine', markers: development_debug,
scrollTrigger: { }
trigger: '#welcome', })
scrub: 1, gsap.to('#main_title', {
markers: development_debug, top: 150,
}
})
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('#phone-watches-4', duration: 1,
{ scrollTrigger: {
left: '50vw', trigger: '#main_title',
top: -10, scrub: 1,
scale: 0.5, markers: development_debug,
duration: 3, }
ease: 'sine', })
scrollTrigger: {
trigger: '#welcome',
scrub: 2,
markers: development_debug,
}
})
gsap.to('#content_first', gsap.to('#phone-watches-1',
{ {
left: -20, left: 500,
top: -50, top: (531 - 400),
opacity: 1, scale: 0.8,
duration: 3, duration: 1.5,
scale: 1.5, ease: 'sine',
ease: 'easeInOut', scrollTrigger: {
scrollTrigger: { trigger: '#welcome',
trigger: '#content', scrub: 1,
scrub: 0.5, markers: development_debug,
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', gsap.to('#phone-watches-4',
{ {
left: -40, left: '50vw',
top: -50, top: -10,
opacity: 1, scale: 0.5,
duration: 2, duration: 3,
scale: 1.25, ease: 'sine',
ease: 'spline', scrollTrigger: {
scrollTrigger: { trigger: '#welcome',
trigger: '#content', scrub: 2,
scrub: 0.5, markers: development_debug,
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 // le background coloré grandit légèrement
gsap.fromTo('#content_all_img', gsap.fromTo('#content_all_img',
{ {
scale: 0.8, scale: 0.8,
left: -100 left: -100
}, },
{ {
scale: 1, scale: 1,
left: -80, left: -80,
ease: 'linear', ease: 'linear',
scrollTrigger: { scrollTrigger: {
trigger: '#content_all .columns', trigger: '#content_all .columns',
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }
}) })
// TODO faire devenir fixe le background une fois que l'on est passé // TODO faire devenir fixe le background une fois que l'on est passé
gsap.fromTo('#open img', gsap.fromTo('#open img',
{ {
opacity: 0.5, opacity: 0.5,
bottom: '-100vh' bottom: '-100vh'
}, },
{ {
opacity: 1, opacity: 1,
bottom: '50vh', bottom: '50vh',
scale: 1.5, scale: 1.5,
ease: 'spline', ease: 'spline',
scrollTrigger: { scrollTrigger: {
trigger: '#open-handle', trigger: '#open-handle',
scrub: 2, scrub: 2,
markers: development_debug, markers: development_debug,
} }
}) })
let rotateYCard = '180deg' let rotateYCard = '180deg'
let offsetCard = '-100px' let offsetCard = '-100px'
// flip from right // flip from right
gsap.fromTo('#content-2', { gsap.fromTo('#content-2', {
rotateY: rotateYCard, rotateY: rotateYCard,
right: offsetCard, right: offsetCard,
}, },
{ {
rotateY: 0, rotateY: 0,
right: 0, right: 0,
duration: 0.2, duration: 0.2,
ease: 'easeInOut', ease: 'easeInOut',
scrollTrigger: { scrollTrigger: {
trigger: '#content-2 .flip-handle', trigger: '#content-2 .flip-handle',
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }
}) })
function animateCard (id, side) { function animateCard (id, side) {
let fromObject = { let fromObject = {
rotateY: rotateYCard, rotateY: rotateYCard,
} }
fromObject[side] = offsetCard fromObject[side] = offsetCard
let toObject = { let toObject = {
rotateY: 0, rotateY: 0,
duration: 0.2, duration: 0.2,
ease: 'easeInOut', ease: 'easeInOut',
scrollTrigger: { scrollTrigger: {
trigger: '#content-' + id + ' .flip-handle', trigger: '#content-' + id + ' .flip-handle',
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }
} }
toObject[side] = 0 toObject[side] = 0
gsap.fromTo('#content-' + id, fromObject, gsap.fromTo('#content-' + id, fromObject,
toObject) 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')

4
package-lock.json generated
View File

@ -7,11 +7,15 @@
"": { "": {
"name": " ", "name": " ",
"version": "0.0.1", "version": "0.0.1",
"license": "AGPLv3+",
"dependencies": { "dependencies": {
"serve": "~14.2.0" "serve": "~14.2.0"
}, },
"devDependencies": { "devDependencies": {
"parcel-bundler": "^1.8.1" "parcel-bundler": "^1.8.1"
},
"engines": {
"node": ">=16.0.0"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {

3
package.json
View File

@ -5,6 +5,9 @@
"keywords": "sesame", "keywords": "sesame",
"license": "AGPLv3+", "license": "AGPLv3+",
"author": "B. Lemoine contact@cipherbliss.com", "author": "B. Lemoine contact@cipherbliss.com",
"engines": {
"node": ">=16.0.0"
},
"scripts": { "scripts": {
"start": "serve ." "start": "serve ."
}, },

2
sesame-vitejs/sesame/src/components/CoverSection.vue
View File

@ -20,7 +20,7 @@ const count = ref(0)
<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>