add pictures from zip, containers for text

css/main.css

@@ -265,6 +265,15 @@ textarea {
    animations
    ========================================================================== */
 
+.container-text{
+  max-width: 360px;
+}
+.container-text-md{
+  max-width: 500px;
+}
+.container-text-lg{
+  max-width: 1062px;
+}
 /******** all sections *********/
 main section {
   height: 100vh;
@@ -305,12 +314,11 @@ main section h2{
 }
 
 #cover {
-
-  background: url('/img/bg1.jpg') no-repeat;
+  background: url('/img/BG 1.png') no-repeat;
   background-size: cover;
 }
 #cover .hand{
-  background: url('/img/hand1.jpg');
+  background: url('/img/hand 1.png');
   background-size: cover;
 }
 
@@ -389,6 +397,6 @@ main section h2{
 
 }
 #content_all{
-  background: url('/img/bd_content.jpg');
+  background: url('/img/bg_content.png');
   background-size: cover;
 }

index.html

@@ -39,13 +39,14 @@
   <section id="cover">
     <div class="hand"></div>
     <h1 id="main_title">Sesame</h1>
-    <h2>
-      We focus on online
 conversion to help brands 
sell better and more.
+    <h2 class="container-text">
+      We focus on online
 conversion to help brands sell better and more.
     </h2>
     <button class="button">Scroll</button>
   </section>
   <section id="welcome">
-    <h2>
+
+    <h2 class="container-text-md">
       We come from
       <span class="color-emphasis">
       the
 most immersive e-commerce market
@@ -64,28 +65,41 @@
       <p>Content</p>
 
     </h2>
-   </section>
+  </section>
   <section id="content_all">
-    <h2>For all your digital uses.</h2>
-    <p>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 for
-      all touchpoints to reduce costs. </p>
+    <div class="columns">
+      <div class="column">
+        <h2 class="container-text-md">For all your digital uses.</h2>
+      </div>
+      <div class="column">
+        <p class="container-text-md">
+          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
+          for all touchpoints to reduce costs.
+        </p>
+      </div>
+    </div>
+
+
   </section>
   <section id="content-2">
-    <h2>Motion &
-      3D design</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 class="container-text">
+
+      <h2>Motion &
+        3D design</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>
     <button>More infos</button>
     <div class="phone-container"></div>
   </section>
   <section id="content-3"></section>
   <section id="content-4"></section>
   <section id="content-5"></section>
-  <section id="popover">
+  <section id="popover" class="is-hidden">
     <div class="phone-container"></div>
     <div id="text">
       <h2>

js/main.js

@@ -1,84 +1,13 @@
-// Color palette variables
-let dark = '#252525';
-let mid = '#888';
-let light = 'rgba(255, 255, 255, 0.4)';
-
-// Add scrollmagic controller
-let controller = new ScrollMagic.Controller();
-
-//------------------
-//TIMELINE 1
-//------------------
-
-// Add timeline
-let tl1 = anime.timeline({autoplay: false});
-
-// Add animations
-let s1a1 = {
-  targets: '#main_title .elem',
-  opacity: 1,
-  translateX: {
-    value: [250, 0],
-    duration: 800
-  },
-  rotate: {
-    value: [90, 0],
-    duration: 1200,
-    easing: 'easeInOutSine'
-  },
-  scale: {
-    value: [2, 1.5],
-    duration: 1100,
-    delay: 800,
-    easing: 'easeInOutQuart'
-  },
-  color: [light, dark],
-  duration: 800,
-  delay: 0,
-  easing: 'easeInOutSine'
-};
-
-let s1a2 = {
-  targets: '#cover .elem .blocks > div',
-  backgroundColor: [light, dark],
-  borderRadius: function(el) { return anime.random(2, 10); },
-  delay: function(el) { return anime.random(0, 800); }
-};
-
-let s1a3 = {
-  targets: '#cover p',
-  opacity: [0,1],
-  translateX: {
-    value: ['-100vw', '0vw'],
-    duration: 1500,
-  },
-  translateY: {
-    value: [-100, 0],
-    duration: 1500,
-  },
-  easing: 'easeInOutSine',
-  duration: 2000
-};
-
-// Add children
-tl1.add(s1a3).add(s1a1, '-=1600').add(s1a2, '-=1300');
-
-// Get section height
-let oneHeight = document.getElementById("one").clientHeight;
-console.log('oneHeight: ' + oneHeight);
-
-//------------------
-//SCENE 1
-//------------------
-
 //Add first scrollmagic scene
-let scene1 = new ScrollMagic.Scene({
-  triggerElement: "#cover",
-  triggerHook: 0.5,
-  reverse: false
+// init controller
+var controller = new ScrollMagic.Controller({globalSceneOptions: {duration: 100}});
+
+// build scenes
+var scene = new ScrollMagic.Scene({
+  triggerElement: "#cover"
 })
-  // Trigger animation timeline
-.on("enter", function (event) {
-  tl1.play();
-})
-.addTo(controller);
+  .setTween("#main_title", 0.5, {scale: 2.5}) // trigger a TweenMax.to tween
+  .addIndicators({name: "1"}) // add indicators (requires plugin)
+  .addTo(controller);
+
+console.log('scene', scene)

package.json

@@ -15,6 +15,7 @@
     "parcel-bundler": "^1.8.1"
   },
   "dependencies": {
+    "anime": "^0.1.2",
     "bulma": "^0.9.4",
     "scrollmagic": "^2.0.8"
   }