feat(*): add inviewport js and animations

src/javascripts/scripts.js

@@ -1,4 +1,12 @@
 $(document).ready(function() {
+
+  $(window).scroll(function() {
+    $('.js-inviewport-item').isInViewport({
+      tolerance: 0
+    })
+    .addClass('is-active');
+  });
+
   var options = {
             classes: {
                 clone:   'o-header__top--clone',
@@ -21,6 +29,8 @@ $(document).ready(function() {
     $('.js-navigation-list').removeClass('is-active');
   });
 
+  $('.js-header-keyvisual').addClass('is-active');
+
   // Popup
   $('.js-popup').magnificPopup({
     type: 'inline',

src/stylesheets/components/_accentbox.scss

@@ -1,4 +1,5 @@
 .c-accentbox {
+  overflow: hidden;
   padding: get-inset-spacing(l) 0;
   border-radius: $global-border-radius;
   background: get-brand(primary);

src/stylesheets/components/_header.scss

@@ -59,20 +59,50 @@
       top: 0;
       border-radius: 10px;
       box-shadow: 0 0 80px rgba(0,0,0,.2);
+      transform: translateX(100%);
+      transition: all .7s;
 
       &:first-child {
-        transform: rotate(-18.28deg);
-      }
-      &:nth-child(2) {
-        margin-left: 200px;
-        z-index: 1;
-        transform: rotate(24deg);
+
       }
 
-      &:last-child {
-        margin-left: 400px;
-        transform: rotate(-15deg);
+    }
+
+    &.is-active {
+      img:first-child {
+        transform: rotate(-18.28deg);
+      }
+      img:nth-child(2) {
+        z-index: 1;
+        transform: translateX(200px) rotate(24deg);
+        transition-delay: .5s;
+
+      }
+
+      img:last-child {
+        transform: translateX(400px) rotate(-15deg);
+        transition-delay: .5s;
       }
     }
   }
+}
+
+.a-push-top {
+  transform: translateY(200px);
+  transition: all .5s;
+  transition-delay: .5s;
+
+  &.is-active {
+    transform: translateY(0);
+  }
+}
+
+.a-zoom {
+  transform: scale(.5);
+  transition: all .7s;
+  transition-delay: .5s;
+
+  &.is-active {
+    transform: scale(1);
+  }
 }

src/stylesheets/components/_spotlightbox.scss

@@ -3,12 +3,19 @@
   border-radius: $global-border-radius;
   background: url(../images/circles-background-dark.png) no-repeat bottom center;
   background-color: get-color(blue);
+  background-size: 100%;
+  transition: background-size .5s;
+  transition-delay: .5s;
   color: get-color(unique, white);
 
   @include respond(large) {
     padding: get-inset-spacing(xl) 0;
   }
 
+  &.is-active {
+    background-size: 150%;
+  }
+
   a {
     color: get-color(blue, lighter);
 

src/stylesheets/components/_whisperbox.scss

@@ -3,8 +3,15 @@
   border-radius: $global-border-radius;
   background: url(../images/circles-background.jpg) no-repeat bottom center;
   background-color: get-layout-color(quite);
+  background-size: 100%;
+  transition: background-size .5s;
+  transition-delay: .6s;
 
   @include respond(large) {
     padding: get-inset-spacing(xl) 0;
   }
+
+  &.is-active {
+    background-size: 150%;
+  }
 }