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

split css

Browse Source
This commit is contained in:
Tykayn 2023-04-24 18:47:52 +02:00 committed by tykayn
parent d10a4293ad
commit f456ef09dc
14 changed files with 394 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/boilerplate.css
View File

@ -260,3 +260,28 @@ textarea {
page-break-after: avoid;
}
}
body {
position: relative;
top: 0;
left: 0;
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
}
.margin-auto {
margin: 0 auto;
}
.container-text {
max-width: 360px;
}
.container-text-md {
max-width: 500px;
}
.container-text-lg {
max-width: 1062px;
}

0
css/content.css Normal file
View File

63
css/cover.css Normal file
View File

@ -0,0 +1,63 @@
#hand {
background: url('/img/hand 1.png');
background-size: cover;
position: absolute;
width: 100vw;
height: 1300px;
left: 1px;
top: -2px;
}
#cover {
background: url('/img/BG 1.png') no-repeat;
background-size: cover;
}
#cover h2 {
position: absolute;
top: 10vh;
left: 42vw;
/* Subtitle/desktop_1 */
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 120%;
/* or 48px */
text-align: center;
letter-spacing: -0.04em;
/* Secondary 100 */
color: #FFFDFC;
}
#cover .button {
box-sizing: border-box;
position: relative;
right: 0;
top: calc(1 / 3 * 100vh);
bottom: 0;
width: 150px;
height: 150px;
padding: 1rem;
color: white;
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 26px;
background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
backdrop-filter: blur(2.96px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 100%;
left: 3rem;
}

65
css/general.css Normal file
View File

@ -0,0 +1,65 @@
/******** all sections *********/
#content-1 h2,
#content-2 h2,
#content-3 h2,
#content-4 h2 {
margin-left: 10vw;
}
main nav {
position: fixed;
top: 0;
left: 0;
padding: 24px;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 130%;
text-align: center;
color: #FFFDFC;
width: 100%;
}
.burger-menu {
width: 150px;
float: left;
}
.nav-main {
text-align: center;
top: 54px;
color: #FFFDFC;
width: 100%;
height: 54px;
}
main section {
height: 1300px;
min-height: 1300px;
width: 100vw;
font-family: 'GT Walsheim Pro', Arial;
}
main section h2 {
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 600;
font-size: 60px;
line-height: 110%;
/* or 66px */
letter-spacing: -0.04em;
/* Secondary 100 */
color: #FFFDFC;
}
/******** phone base *********/
.phone-container.transparent{
background: rgba(248, 243, 241, 0.1);
border-radius: 70px;
width: 350px;
height: 700px;
}

328
css/main.css
View File

@ -1,253 +1,57 @@
@import './boilerplate.css';
@import url('https://fonts.cdnfonts.com/css/gt-walsheim-pro');
/* ==========================================================================
animations
========================================================================== */
body {
position: relative;
top: 0;
left: 0;
}
.margin-auto {
margin: 0 auto;
}
.container-text {
max-width: 360px;
}
.container-text-md {
max-width: 500px;
}
.container-text-lg {
max-width: 1062px;
}
/******** all sections *********/
#content-1 h2,
#content-2 h2,
#content-3 h2,
#content-4 h2 {
margin-left: 10vw;
}
main nav {
position: fixed;
top: 0;
left: 0;
padding: 24px;
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 130%;
/* or 31px */
text-align: center;
/* Secondary 100 */
color: #FFFDFC;
width: 100%;
}
.burger-menu {
width: 150px;
float: left;
}
.nav-main {
text-align: center;
top: 54px;
color: #FFFDFC;
width: 100%;
height: 54px;
}
main section {
height: 1300px;
min-height: 1300px;
width: 100vw;
font-family: 'GT Walsheim Pro', Arial;
}
main section h2 {
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 600;
font-size: 60px;
line-height: 110%;
/* or 66px */
letter-spacing: -0.04em;
/* Secondary 100 */
color: #FFFDFC;
padding-top: 33vh;
}
@import './general.css';
@import './cover.css';
@import './main_title.css';
@import './welcome.css';
@import './open.css';
@import './content.css';
@import './popover.css';
@import './portfolio.css';
/******** phone base *********/
.phone-container.transparent{
background: rgba(248, 243, 241, 0.1);
border-radius: 70px;
width: 350px;
height: 700px;
}
/******** section 1 *********/
#main_title_container {
text-align: center;
width: 100vw;
}
#main_title {
box-sizing: border-box;
background: url('/img/sesame.png') no-repeat;
background-size: contain;
position: relative;
height: 35vh;
width: 95vw;
max-width: 1200px;
margin: 0 auto;
}
#cover {
background: url('/img/BG 1.png') no-repeat;
background-size: cover;
}
#hand {
background: url('/img/hand 1.png');
background-size: cover;
position: absolute;
width: 100vw;
height: 1300px;
left: 1px;
top: -2px;
}
#cover h2 {
position: absolute;
top: 10vh;
left: 42vw;
/* Subtitle/desktop_1 */
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 120%;
/* or 48px */
text-align: center;
letter-spacing: -0.04em;
/* Secondary 100 */
color: #FFFDFC;
}
#cover .button {
#open {
box-sizing: border-box;
position: relative;
left: 0;
right: 0;
top: calc(1 / 3 * 100vh);
bottom: 0;
width: 150px;
height: 150px;
padding: 1rem;
color: white;
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 26px;
background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
backdrop-filter: blur(2.96px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 100%;
}
/************ section 2 ************/
#welcome img {
position: absolute;
}
.phones-land{
z-index:-1;
}
width: 1177px;
#phone-watches-1 {
width: 345px;
height: 690px;
left: 137px;
top: 1531px;
}
#phone-watches-2 {
width: 88px;
height: 176px;
left: 651px;
top: 1470px;
filter: blur(2px);
}
#phone-watches-3 {
width: 171px;
height: 342px;
left: 916px;
top: 1475px;
filter: blur(4px);
}
#phone-watches-4 {
width: 275px;
height: 550px;
left: 1222px;
top: 1523px;
filter: blur(6px);
}
#welcome h2 {
left: calc(50% - 1177px / 2 - 0.5px);
top: calc(50% - 180px / 2);
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 600;
font-size: 100px;
line-height: 90px;
/* or 90% */
font-size: 200px;
line-height: 90%;
text-align: center;
letter-spacing: -0.04em;
/* Secondary 100 */
color: #F9F3F1;
color: rgba(248, 243, 241, 0.1);
backdrop-filter: blur(7.5px);
height: 180px;
padding-top: 310px;
padding-bottom: 310px;
background: url('/img/unlock.png') bottom center no-repeat;
color: rgba(248, 243, 241, 0.1);
}
#open .text{
color: #fff;
margin-bottom: 400px;
}
#welcome .color-emphasis,
#content .color-emphasis {
color: #1E33DA;
#content{
height: 200px;
min-height: 200px;
}
#welcome .phone-container {
background: url('/img/section2_phone.png');
background-size: cover;
}
#content .first {
width: 1680px;
height: 35px;
margin-bottom: 40px;
font-style: normal;
font-weight: 600;
font-size: 40px;
@ -266,8 +70,8 @@ main section h2 {
flex-grow: 0;
}
#content .second{
margin-bottom: 100px;
width: 1680px;
height: 170px;
@ -277,65 +81,49 @@ main section h2 {
font-weight: 700;
font-size: 230px;
line-height: 65px;
/* or 28% */
display: flex;
align-items: center;
text-align: center;
color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(5px);
/* Note: backdrop-filter has minimal browser support */
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}
/****************
*/
#content_all .text{
padding-top: 1vh;
padding-left: 80px;
}
#content_all .color-emphasis{
color: #1E33DA;
}
#content_all {
padding-top: 100px;
background: url('/img/bg_content.png');
background-size: cover;
color: #FFFDFC;
}
#content_all .columns{
margin: 0 auto;
max-width: 80vw;
}
#open {
box-sizing: border-box;
position: absolute;
width: 1177px;
height: 180px;
left: calc(50% - 1177px / 2 - 0.5px);
top: calc(50% - 180px / 2);
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 600;
font-size: 200px;
line-height: 90%;
/* identical to box height, or 180px */
text-align: center;
letter-spacing: -0.04em;
/* Transparency_200 */
color: rgba(248, 243, 241, 0.1);
backdrop-filter: blur(7.5px);
/* Note: backdrop-filter has minimal browser support */
}
/**********************/
#popover {
background: url('/img/bg_pink.png');
background: url('/img/bg_pink.png') no-repeat;
background-position: center;
background-size: cover;
}
#popover .phone-container {
height: 776px;
width: 411px;
background: url('/img/phone_cream.png');
background: url('/img/phone_cream.png') no-repeat;
background-position: center;
background-size: cover;
position: relative;
left: 33%;
top: 20vh;
@ -354,7 +142,9 @@ main section h2 {
}
#portfolio {
background: url('/img/bg_grey.jpg');
background: url('/img/bg_grey.jpg') no-repeat;
background-position: center;
background-size: cover;
}
#popover .color-emphasis,

26
css/main_title.css Normal file
View File

@ -0,0 +1,26 @@
/******** section 1 *********/
#main_title_container {
text-align: center;
width: 100vw;
}
#main_title {
box-sizing: border-box;
background: url('/img/sesame.png') no-repeat;
background-size: contain;
position: relative;
top: 4rem;
height: 35vh;
width: 95vw;
max-width: 1200px;
margin: 0 auto;
}
#main_title_container h2{
margin-top:33vh;
}

0
css/open.css Normal file
View File

0
css/popover.css Normal file
View File

0
css/portfolio.css Normal file
View File

65
css/welcome.css Normal file
View File

@ -0,0 +1,65 @@
/************ section 2 ************/
.phones-land{
z-index:-1;
position: static;
}
#phone-watches-1 {
width: 345px;
height: 690px;
left: 137px;
top: 1531px;
}
#phone-watches-2 {
width: 88px;
height: 176px;
left: 651px;
top: 1470px;
filter: blur(2px);
}
#phone-watches-3 {
width: 171px;
height: 342px;
left: 916px;
top: 1475px;
filter: blur(4px);
}
#phone-watches-4 {
width: 275px;
height: 550px;
left: 1222px;
top: 1523px;
filter: blur(6px);
}
#welcome img {
position: absolute;
}
#welcome h2 {
font-weight: 600;
font-size: 100px;
line-height: 90px;
text-align: center;
letter-spacing: -0.04em;
color: #F9F3F1;
z-index: 2;
position: relative;
width: 1060px;
margin-top:400px;
}
#welcome .color-emphasis,
#content .color-emphasis {
color: #1E33DA;
}
#welcome .phone-container {
background: url('/img/section2_phone.png');
background-size: cover;
}

BIN
font/font.zip Normal file
View File

Binary file not shown.

BIN
img/unlock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 KiB

44
index.html
View File

@ -16,9 +16,9 @@
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bulma.css">
<link rel="stylesheet" href="css/main.css">
<!-- <link rel="stylesheet" href="css/normalize.css">-->
<link rel="stylesheet" href="/css/bulma.css" type="text/css">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<meta name="theme-color" content="#fafafa">
</head>
@ -30,15 +30,19 @@
<section id="cover" class="has-text-centerd">
<div id="hand"></div>
<div id="main_title_container" class="margin-auto">
<div id="main_title_container" class="margin-auto has-text-centered">
<div id="main_title" class="margin-auto">
<h1 class="is-hidden">Sesame</h1>
</div>
<div class="title-container">
<h2 class="container-text margin-auto">
We focus on online
 conversion to help brands sell better and more.
</h2>
<a href="#open" class="button">Scroll</a>
<a href="#open" class="button margin-auto">Scroll</a>
</div>
</div>
</section>
<section id="welcome">
@ -59,7 +63,8 @@
</section>
<section id="open">
<h2>
<h2 class="text">
Open Sesame
</h2>
</section>
@ -73,14 +78,16 @@
<section id="content_all">
<div class="columns">
<div class="column">
<h2 class="container-text-md">For all your
<h2 class="container-text-md">
For all your
<span class="color-emphasis">
digital
</span>
uses.</h2>
uses.
</h2>
</div>
<div class="column">
<p class="container-text-md">
<p class="container-text-md text">
Our creative competitive edge
We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our
technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale
@ -200,14 +207,19 @@
</nav>
</main>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/vendor/anime.min.js"></script>
<script src="js/vendor/ScrollMagic.min.js"></script>
<script src="js/vendor/plugins/animation.gsap.min.js"></script>
<script src="js/vendor/plugins/animation.velocity.min.js"></script>
<script src="js/vendor/plugins/debug.addIndicators.min.js"></script>
<!--<script src="js/vendor/modernizr-3.11.2.min.js"></script>-->
<!--<script src="js/vendor/anime.min.js"></script>-->
<!--<script src="js/vendor/ScrollMagic.min.js"></script>-->
<!--<script src="js/vendor/plugins/animation.gsap.min.js"></script>-->
<!--<script src="js/vendor/plugins/animation.velocity.min.js"></script>-->
<!--<script src="js/vendor/plugins/debug.addIndicators.min.js"></script>-->
<!--<script src="js/vendor/plugins/jquery.ScrollMagic.min.js"></script>-->
<script src="js/plugins.js"></script>
<!--<script src="js/plugins.js"></script>-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="js/main.js"></script>
</body>

87
js/main.js
View File

@ -1,28 +1,27 @@
anime({
targets: '#main_title',
top: ['240px', '100px'],
opacity: ['0', '1'],
easing: 'easeInOutQuad'
});
anime({
targets: '#hand',
top: ['0px', '100px'],
easing: 'easeInOut'
});
anime({
targets: '#cover h2',
opacity: ['0.5', '1'],
easing: 'easeInOut'
});
anime({
targets: '#phone-watches-1',
left: ['-5vw', '0vw'],
top: ['50vh', '45vh'],
easing: 'easeInOut'
});
// anime({
// targets: '#main_title',
// top: ['240px', '100px'],
// opacity: ['0', '1'],
// easing: 'easeInOutQuad'
// });
//
// anime({
// targets: '#hand',
// top: ['0px', '100px'],
// easing: 'easeInOut'
// });
//
// anime({
// targets: '#cover h2',
// opacity: ['0.5', '1'],
// easing: 'easeInOut'
// });
// anime({
// targets: '#phone-watches-1',
// left: ['-5vw', '0vw'],
// top: ['50vh', '45vh'],
// easing: 'easeInOut'
// });
// Add timeline
let tl1 = anime.timeline({autoplay: false});
@ -34,7 +33,7 @@ let s1a2 = {
};
// Add children
tl1.add(s1a2, '-=10');
tl1.add(s1a2);
let controller = new ScrollMagic.Controller();
@ -54,8 +53,40 @@ let scene1 = new ScrollMagic.Scene({
})
// Trigger animation timeline
.on("enter", function (event) {
tl1.play();
.on("progress", function (event) {
tl1.seek(tl2.duration * event.progress);
})
.addTo(controller);
//Add second scrollmagic scene
let scene2 = new ScrollMagic.Scene({
triggerElement: "#two",
duration: 4500,
triggerHook: 0,
})
// Add debug indicators
.addIndicators({
colorTrigger: "black",
colorStart: "blue",
colorEnd: "red",
indent: 10
})
// Trigger animation timeline
//Use scroll position to play animation
.on("progress", function (event) {
console.log('tl2.duration', tl2.duration)
console.log('event.progress', event.progress)
tl2.seek(tl2.duration * event.progress);
})
.setPin('#two')
.addTo(controller);
let twoHeight = document.getElementById("two").clientHeight;
console.log('section two Height: ' + twoHeight);