diff --git a/css/boilerplate.css b/css/boilerplate.css index 7e3f257..4cd4a14 100644 --- a/css/boilerplate.css +++ b/css/boilerplate.css @@ -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; +} diff --git a/css/content.css b/css/content.css new file mode 100644 index 0000000..e69de29 diff --git a/css/cover.css b/css/cover.css new file mode 100644 index 0000000..04eb578 --- /dev/null +++ b/css/cover.css @@ -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; +} diff --git a/css/general.css b/css/general.css new file mode 100644 index 0000000..6fc4df0 --- /dev/null +++ b/css/general.css @@ -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; +} diff --git a/css/main.css b/css/main.css index b52e1e0..28183ac 100644 --- a/css/main.css +++ b/css/main.css @@ -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 { +#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, diff --git a/css/main_title.css b/css/main_title.css new file mode 100644 index 0000000..98f6045 --- /dev/null +++ b/css/main_title.css @@ -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; +} diff --git a/css/open.css b/css/open.css new file mode 100644 index 0000000..e69de29 diff --git a/css/popover.css b/css/popover.css new file mode 100644 index 0000000..e69de29 diff --git a/css/portfolio.css b/css/portfolio.css new file mode 100644 index 0000000..e69de29 diff --git a/css/welcome.css b/css/welcome.css new file mode 100644 index 0000000..bc0bf8b --- /dev/null +++ b/css/welcome.css @@ -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; +} diff --git a/font/font.zip b/font/font.zip new file mode 100644 index 0000000..c879de6 Binary files /dev/null and b/font/font.zip differ diff --git a/img/unlock.png b/img/unlock.png new file mode 100644 index 0000000..e2ef761 Binary files /dev/null and b/img/unlock.png differ diff --git a/index.html b/index.html index be4375c..743d55b 100644 --- a/index.html +++ b/index.html @@ -16,9 +16,9 @@ - - - + + + @@ -30,15 +30,19 @@
-
+

Sesame

-

- We focus on online
 conversion to help brands sell better and more. -

- Scroll +
+ +

+ We focus on online
 conversion to help brands sell better and more. +

+ Scroll +
+
@@ -59,7 +63,8 @@
-

+ +

Open Sesame

@@ -73,14 +78,16 @@
-

For all your +

+ For all your digital - uses.

+ uses. +
-

+

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 @@ - - - - - - + + + + + + - + + + + + + diff --git a/js/main.js b/js/main.js index d1ca99a..048f91f 100644 --- a/js/main.js +++ b/js/main.js @@ -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);