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

gather open zone

Browse Source
This commit is contained in:
Tykayn 2023-04-27 15:57:38 +02:00 committed by tykayn
parent d035aca7d7
commit b369bf197a
4 changed files with 146 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/3-open-sesame.css
View File

@ -4,7 +4,7 @@
position: relative;
top: 223vh;
top: 88vh;
font-style: normal;
font-weight: 600;
font-size: 200px;
@ -12,11 +12,11 @@
text-align: center;
letter-spacing: -0.04em;
color: rgba(248, 243, 241, 0.1);
height: 100vh;
padding-top: 310px;
padding-bottom: 310px;
color: rgba(248, 243, 241, 0.1);
height: 50vh;
}
#open .text {

86
css/4-content.css
View File

@ -1,33 +1,4 @@
#content_all {
position: relative;
top: 200vh;
padding-top: 100px;
color: #FFFDFC;
}
#content_all_img{
background: url('/img/bg_content.png');
background-size: cover;
width: 90vw;
height: 90vh;
}
#content_all .columns {
margin: 0 auto;
max-width: 80vw;
top: -100vh;
position: relative;
}
#content_all .text {
padding-top: 1vh;
padding-left: 80px;
}
#content_all .color-emphasis {
color: #1E33DA;
}
#content {
height: 200px;
min-height: 200px;
@ -36,6 +7,53 @@
margin-top: 33vh;
}
#content_all {
position: relative;
top: 55vh;
padding-top: 100px;
color: #FFFDFC;
}
#content_all_img{
background: url('/img/bg_content.png');
background-size: cover;
width: 100vw;
height: 150vh;
margin-top: -50vh;
left:0;
position: relative;
}
#content_all .columns {
margin: 0 auto;
max-width: 80vw;
top: -150vh;
position: relative;
}
#content_all .text {
padding-top: 1vh;
padding-left: 80px;
font-weight: 400;
font-size: 18px;
line-height: 26px;
text-align:left;
}
main #content_all .columns > .column:nth-of-type(0) {
font-size: 100px !important;
line-height: 90px;
letter-spacing: -0.04em;
}
#content_all .columns > .column:nth-of-type(1) {
font-size: 1em;
line-height: 90px;
letter-spacing: -0.04em;
}
#content_all .color-emphasis {
color: #1E33DA;
}
#content_first {
opacity: 0;
@ -174,3 +192,13 @@
border-width: 5px;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
#content-2{
margin-top:50vh;
}
#flipping_zone{
margin-top: -100vh;
position: relative;
}

161
index.html
View File

@ -100,92 +100,95 @@
</section>
<!-- 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 &
3D design
</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>
<div id="flipping_zone">
<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 &
3D design
</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>
<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
<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_glasses.png" alt="phone">
</div>
</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
<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_glasses.png" alt="phone">
</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-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>
<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>
</div>
<!-- other section-->
<section id="popover" class="slider-screen">

9
js/main.js
View File

@ -1,7 +1,8 @@
/**
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/
let development_debug = true;
let development_debug = false;
gsap.fromTo("#main_title", {
opacity: 0,
top: 200
@ -138,10 +139,10 @@ gsap.fromTo("#content_all_img",
left:-100},
{
scale: 1,
left:0,
ease: "easeInOut",
left:-80,
ease: "linear",
scrollTrigger: {
trigger: '#content',
trigger: '#content_all .columns',
scrub: 1,
markers: development_debug,
}