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

rotate all cards with a flip handle

This commit is contained in:
Tykayn 2023-04-25 17:22:09 +02:00 committed by tykayn
parent d2f8565d37
commit dce4095bf7
4 changed files with 121 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/0-general.css
View File

@ -1,6 +1,7 @@
/******** all sections *********/
body{
background: #020225;
padding-bottom: 50vh;
}

24
css/4-content.css
View File

@ -22,11 +22,9 @@
#content {
height: 200px;
min-height: 200px;
}
#content h2 {
margin-top: 33vh;
}
@ -69,11 +67,23 @@
flex-grow: 0;
}
.flip-handle{
background: transparent;
height: 10vh;
width: 2vw;
position: relative;
top:-25vh;
}
.flip-container{
color: #FFFDFC;
padding-top: 15vh;
transform-origin: right;
}
.flip-container.flip-from-left{
transform-origin: left;
}
.flip-container + .flip-container{
padding-top:0;
margin-top: -15vh;
@ -88,8 +98,8 @@
text-align: left;
}
.flip-container.flip-from-left .container-text{
width: 50%;
left: 50%;
width: 320px;
left: 613px;
}
.flip-container .color-emphasis {
@ -115,7 +125,7 @@
.flip-container .phone-container{
box-sizing: border-box;
position: relative;
left: 60vw;
left: 66vw;
top: -540px;
background: rgba(225, 196, 183, 0.2);
border-radius: 70px;
@ -126,7 +136,7 @@
}
.flip-container.flip-from-left .phone-container{
left: 5vw;
left: 183px;
top: -540px;
}
@ -146,13 +156,13 @@
gap: 10px;
width: 198px;
height: 56px;
border-radius: 70px;
flex: none;
order: 2;
flex-grow: 0;
background: transparent;
color: #fff;
border: 10px solid;
border-radius: 70px;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);

46
index.html
View File

@ -101,6 +101,7 @@
<!-- flipping zones-->
<section id="content-2" class="flip-container flip-from-right">
<div id="content-2-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
Motion &
@ -120,6 +121,7 @@
</section>
<section id="content-3" class="flip-container flip-from-left">
<div id="content-3-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
Videos
@ -139,9 +141,48 @@
</div>
</section>
<section id="content-4" class="flip-container flip-from-right">
<div id="content-4-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
Photos
<br>
Production
</h2>
<p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p>
<button class="call-to-action">More infos
<span class="arrow-icon">→</span>
</button>
</div>
<div class="phone-container">
<img src="/img/phone_face.png" alt="phone">
</div>
</section>
<section id="content-5" class="flip-container flip-from-left">
<div id="content-5-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
Videos
<br>
Production
</h2>
<p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p>
<button class="call-to-action">More infos
<span class="arrow-icon">→</span>
</button>
</div>
<div class="phone-container">
<img src="/img/phone_clothes.png" alt="phone">
</div>
</section>
@ -194,6 +235,9 @@
<!-- </div>-->
<!-- </section>-->
<div class="credits">
B. Lemoine - cipherbliss.com
</div>
<nav class="fixed-nav is-fixed-top">
<div class="burger-menu is-2">
<div class="icon-burger">

67
js/main.js
View File

@ -34,7 +34,7 @@ gsap.to("#main_title", {
gsap.to("#phone-watches-1",
{
left: 500,
top: (531 - 400) ,
top: (531 - 400),
scale: 0.8,
duration: 1.5,
ease: "sine",
@ -43,11 +43,11 @@ gsap.to("#phone-watches-1",
scrub: 1,
markers: development_debug,
}
})
})
gsap.to("#phone-watches-2",
{
left: "50vw",
top: 100 ,
top: 100,
scale: 0.7,
duration: 1.25,
ease: "sine",
@ -56,11 +56,11 @@ gsap.to("#phone-watches-2",
scrub: 1,
markers: development_debug,
}
})
})
gsap.to("#phone-watches-3",
{
left: "50vw",
top: 0 ,
top: 0,
scale: 0.8,
duration: 1.25,
ease: "sine",
@ -69,11 +69,11 @@ gsap.to("#phone-watches-3",
scrub: 2,
markers: development_debug,
}
})
})
gsap.to("#phone-watches-4",
{
left: "50vw",
top: -10 ,
top: -10,
scale: 0.5,
duration: 3,
ease: "sine",
@ -82,12 +82,12 @@ gsap.to("#phone-watches-4",
scrub: 2,
markers: development_debug,
}
})
})
gsap.to("#phone-watches-4",
{
left: "50vw",
top: -10 ,
top: -10,
scale: 0.5,
duration: 3,
ease: "sine",
@ -138,3 +138,52 @@ gsap.to("#content_all_img",
}
})
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,
}
})
function animateCard(id, side){
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
gsap.fromTo("#content-"+id, fromObject,
toObject)
}
animateCard(2, 'right')
animateCard(3, 'left')
animateCard(4, 'right')
animateCard(5, 'left')