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 {
background: #020225;
padding-bottom: 50vh;
overflow-x: hidden;
}
main section {

5
css/4-content.css
View File

@ -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) {

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 "5-popover.css";
@import "6-portfolio.css";
@import "7-responsive.css";

4
index.html
View File

@ -38,7 +38,7 @@
<div class="title-container">
<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>
<a href="#open" class="button margin-auto">Scroll</a>
</div>
@ -56,7 +56,7 @@
<h2 class="margin-auto container-text-lg">
We come from
<span class="color-emphasis">
the
 most immersive e-commerce market
the most immersive e-commerce market
</span>
in the world.
</h2>

399
js/main.js
View File

@ -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')

4
package-lock.json generated
View File

@ -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": {

3
package.json
View File

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

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

@ -20,7 +20,7 @@ const count = ref(0)
<div class="title-container">
<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>
<a href="#open" class="button margin-auto">Scroll</a>
</div>