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; position: relative;
top: 223vh; top: 88vh;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 200px; font-size: 200px;
@ -12,11 +12,11 @@
text-align: center; text-align: center;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: rgba(248, 243, 241, 0.1); color: rgba(248, 243, 241, 0.1);
height: 100vh;
padding-top: 310px; padding-top: 310px;
padding-bottom: 310px; padding-bottom: 310px;
color: rgba(248, 243, 241, 0.1); color: rgba(248, 243, 241, 0.1);
height: 50vh;
} }
#open .text { #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 { #content {
height: 200px; height: 200px;
min-height: 200px; min-height: 200px;
@ -36,6 +7,53 @@
margin-top: 33vh; 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 { #content_first {
opacity: 0; opacity: 0;
@ -174,3 +192,13 @@
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d); 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> </section>
<!-- flipping zones--> <!-- flipping zones-->
<section id="content-2" class="flip-container flip-from-right"> <div id="flipping_zone">
<div id="content-2-handle" class="flip-handle"></div> <section id="content-2" class="flip-container flip-from-right">
<div class="container-text"> <div id="content-2-handle" class="flip-handle"></div>
<h2 class="text-title"> <div class="container-text">
Motion & <h2 class="text-title">
3D design Motion &
</h2> 3D design
<p class="text-description"> </h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis. <p class="text-description">
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
</p> Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
<button class="call-to-action">More infos </p>
<span class="arrow-icon">→</span> <button class="call-to-action">More infos
</button> <span class="arrow-icon">→</span>
</div> </button>
<div class="phone-container"> </div>
<img src="/img/phone_clothes.png" alt="phone"> <div class="phone-container">
</div> <img src="/img/phone_clothes.png" alt="phone">
</section> </div>
</section>
<section id="content-3" class="flip-container flip-from-left"> <section id="content-3" class="flip-container flip-from-left">
<div id="content-3-handle" class="flip-handle"></div> <div id="content-3-handle" class="flip-handle"></div>
<div class="container-text"> <div class="container-text">
<h2 class="text-title"> <h2 class="text-title">
Videos Videos
<br> <br>
Production Production
</h2> </h2>
<p class="text-description"> <p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis. 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. Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p> </p>
<button class="call-to-action">More infos <button class="call-to-action">More infos
<span class="arrow-icon">→</span> <span class="arrow-icon">→</span>
</button> </button>
</div> </div>
<div class="phone-container"> <div class="phone-container">
<img src="/img/phone_glasses.png" alt="phone"> <img src="/img/phone_glasses.png" alt="phone">
</div> </div>
</section> </section>
<section id="content-4" class="flip-container flip-from-right"> <section id="content-4" class="flip-container flip-from-right">
<div id="content-4-handle" class="flip-handle"></div> <div id="content-4-handle" class="flip-handle"></div>
<div class="container-text"> <div class="container-text">
<h2 class="text-title"> <h2 class="text-title">
Photos Photos
<br> <br>
Production Production
</h2> </h2>
<p class="text-description"> <p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis. 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. Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p> </p>
<button class="call-to-action">More infos <button class="call-to-action">More infos
<span class="arrow-icon">→</span> <span class="arrow-icon">→</span>
</button> </button>
</div> </div>
<div class="phone-container"> <div class="phone-container">
<img src="/img/phone_face.png" alt="phone"> <img src="/img/phone_face.png" alt="phone">
</div> </div>
</section> </section>
<section id="content-5" class="flip-container flip-from-left"> <section id="content-5" class="flip-container flip-from-left">
<div id="content-5-handle" class="flip-handle"></div> <div id="content-5-handle" class="flip-handle"></div>
<div class="container-text"> <div class="container-text">
<h2 class="text-title"> <h2 class="text-title">
Videos Videos
<br> <br>
Production Production
</h2> </h2>
<p class="text-description"> <p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis. 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. Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p> </p>
<button class="call-to-action">More infos <button class="call-to-action">More infos
<span class="arrow-icon">→</span> <span class="arrow-icon">→</span>
</button> </button>
</div> </div>
<div class="phone-container"> <div class="phone-container">
<img src="/img/phone_clothes.png" alt="phone"> <img src="/img/phone_clothes.png" alt="phone">
</div> </div>
</section> </section>
</div>
<!-- other section--> <!-- other section-->
<section id="popover" class="slider-screen"> <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 * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/ */
let development_debug = true; let development_debug = false;
gsap.fromTo("#main_title", { gsap.fromTo("#main_title", {
opacity: 0, opacity: 0,
top: 200 top: 200
@ -138,10 +139,10 @@ gsap.fromTo("#content_all_img",
left:-100}, left:-100},
{ {
scale: 1, scale: 1,
left:0, left:-80,
ease: "easeInOut", ease: "linear",
scrollTrigger: { scrollTrigger: {
trigger: '#content', trigger: '#content_all .columns',
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }