sliders sections

css/main.css

@@ -30,8 +30,7 @@ body {
 #content-1 h2,
 #content-2 h2,
 #content-3 h2,
-#content-4 h2
+#content-4 h2 {
-{
   margin-left: 10vw;
 }
 
@@ -69,7 +68,8 @@ main nav {
 }
 
 main section {
-  height: 100vh;
+  height: 1300px;
+  min-height: 1300px;
   width: 100vw;
   font-family: 'GT Walsheim Pro', Arial;
 }
@@ -90,10 +90,18 @@ main section h2 {
 }
 
 
+/******** 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;
+  text-align: center;
   width: 100vw;
 }
 
@@ -173,6 +181,41 @@ text-align:center;
 }
 
 /************ section 2 ************/
+#welcome img {
+  position: absolute;
+}
+
+#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 {
   font-weight: 600;
   font-size: 100px;
@@ -185,10 +228,10 @@ text-align:center;
   /* Secondary 100 */
   color: #F9F3F1;
 
-
 }
 
-#welcome .color-emphasis {
+#welcome .color-emphasis,
+#content .color-emphasis {
   color: #1E33DA;
 }
 
@@ -197,7 +240,7 @@ text-align:center;
   background-size: cover;
 }
 
-#content .color-emphasis {
+#content .first {
 
   width: 1680px;
   height: 35px;
@@ -221,7 +264,116 @@ text-align:center;
 
 }
 
+#content .second {
+
+  width: 1680px;
+  height: 170px;
+
+  font-family: 'GT Walsheim Pro';
+  font-style: normal;
+  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 {
   background: url('/img/bg_content.png');
   background-size: cover;
 }
+
+#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');
+}
+
+#popover .phone-container {
+  height: 776px;
+  width: 411px;
+  background: url('/img/phone_cream.png');
+  position: relative;
+  left: 33%;
+  top: 20vh;
+}
+#popover .text{
+  position: relative;
+  left: 52%;
+  top: 20vh;
+  width: 400px;
+}
+#popover p{
+  position: relative;
+  left: 52%;
+  top: 20vh;
+  width: 400px;
+}
+
+#portfolio {
+  background: url('/img/bg_grey.jpg');
+}
+
+#popover .color-emphasis,
+#portfolio .color-emphasis {
+  color: #E77064;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+#portfolio .phone-container {
+  height: 776px;
+  background: url('/img/phone_shoes.png');
+}
+
+.phone-container .top{
+  height: 60px;
+  background: url('/img/phone_rectangle_top.jpg');
+}
+
+.phone-container .bottom{
+  height: 60px;
+  background: url('/img/phone_rectangle_bottom.jpg');
+  top: 655.5px;
+  position: relative;
+}

index.html

@@ -43,6 +43,10 @@
   </section>
   <section id="welcome">
 
+    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
+    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
+    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
+    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
     <h2 class="margin-auto container-text-lg">
       We come from
       <span class="color-emphasis">
@@ -51,10 +55,6 @@
       in the world.
     </h2>
 
-    <img src="/img/phone_watches.png" alt="phone watches" class="phone-watches-1">
-    <img src="/img/phone_watches.png" alt="phone watches" class="phone-watches-2">
-    <img src="/img/phone_watches.png" alt="phone watches" class="phone-watches-3">
-    <img src="/img/phone_watches.png" alt="phone watches" class="phone-watches-4">
   </section>
   <section id="open">
     <h2>
@@ -63,15 +63,19 @@
   </section>
   <section id="content">
     <h2>
-      <p class="color-emphasis">Transactional</p>
+      <p class="first color-emphasis">Transactional</p>
-      <p>Content</p>
+      <p class="second">Content</p>
 
     </h2>
   </section>
   <section id="content_all">
     <div class="columns">
       <div class="column">
-        <h2 class="container-text-md">For all your digital uses.</h2>
+        <h2 class="container-text-md">For all your
+          <span class="color-emphasis">
+          digital
+          </span>
+          uses.</h2>
       </div>
       <div class="column">
         <p class="container-text-md">
@@ -141,12 +145,35 @@
     </div>
   </section>
 <!--  other section-->
-  <section id="popover" class="is-hidden">
+  <section id="popover" >
+    <div class="phone-container">
+      <div class="top">
+
+      </div>
+      <div class="bottom">
+
+      </div>
+    </div>
+    <div class="text">
+      <h2>
+            <span class="color-emphasis">
+            Premium
+            </span>
+        <span>
+            & Campaign
+            </span>
+      </h2>
+      <p>
+        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>
+    </div>
+  </section>
+  <section id="portfolio" >
     <div class="phone-container"></div>
     <div id="text">
       <h2>
-            <span id="colored">
+            <span class="color-emphasis">
-
             Premium
             </span>
         <span>
@@ -172,12 +199,12 @@
 
 </main>
 <script src="js/vendor/modernizr-3.11.2.min.js"></script>
-<!--<script src="js/vendor/plugins/animation.gsap.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/vendor/plugins/animation.velocity.min.js"></script>-->
 <script src="js/vendor/anime.min.js"></script>
-<!--<script src="js/vendor/ScrollMagic.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/main.js"></script>
 

js/main.js

@@ -1,19 +1,66 @@
-
 anime({
   targets: '#main_title',
-  top: ['240px','100px'],
+  top: ['240px', '100px'],
-  opacity: ['0','1'],
+  opacity: ['0', '1'],
   easing: 'easeInOutQuad'
 });
 
 anime({
   targets: '#hand',
-  backgroundPosition: ['50px','0px'],
+  backgroundPosition: ['50px', '0px'],
-  opacity: ['0.5','1'],
+  opacity: ['0.5', '1'],
+  easing: 'easeInOut'
+});
+
+anime({
+  targets: '#cover h2',
+  opacity: ['0.5', '1'],
   easing: 'easeInOut'
 });
 anime({
-  targets: '#cover h2',
+  targets: '#phone-watches-1',
-  opacity: ['0.5','1'],
+  left: ['-5vw', '0vw'],
+  top: ['50vh', '45vh'],
   easing: 'easeInOut'
 });
+
+
+// Add timeline
+let tl1 = anime.timeline({autoplay: false});
+
+let s1a2 = {
+  targets: '#cover',
+  backgroundColor: ['#000', '#ddd'],
+  borderRadius: function (el) {
+    return anime.random(2, 10);
+  },
+  delay: function (el) {
+    return anime.random(0, 800);
+  }
+};
+// Add children
+tl1.add(s1a2, '-=1300');
+
+let controller = new ScrollMagic.Controller();
+
+//Add first scrollmagic scene
+let scene1 = new ScrollMagic.Scene({
+  triggerElement: "#cover",
+  triggerHook: 0.5,
+  reverse: false
+})
+
+  // Add debug indicators
+  .addIndicators({
+    colorTrigger: "black",
+    colorStart: "blue",
+    colorEnd: "red",
+    indent: 10
+  })
+
+  // Trigger animation timeline
+  .on("enter", function (event) {
+    tl1.play();
+  })
+
+  .addTo(controller);