Added ElementScrollFader effect

public/styles/index.scss

@@ -63,6 +63,7 @@
 @import './objects/_app.scss';
 @import './objects/_background.scss';
 @import './objects/_button.scss';
+@import './objects/_element-scroll-fader.scss';
 @import './objects/_floating-content-box.scss';
 @import './objects/_form.scss';
 @import './objects/_input.scss';

public/styles/objects/_element-scroll-fader.scss

@@ -0,0 +1,30 @@
+/*
+ *  Element Scroll Fader
+ *    Simple fade in animation that's activated when a user scrolls down far
+ *    enough to see the element.
+ *
+ *  Dependencies:
+ *    styles/settings/animation.scss
+ *    styles/tools/_transform.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/06/08
+ */
+$o-element-scroll-fader--speed: 0.75s;
+$o-element-scroll-fader--amount: 15%;
+
+.o-element-scroll-fader {
+  opacity: 0;
+  transition: all $o-element-scroll-fader--speed $s-animation--ease-out;
+
+  $amt: $o-element-scroll-fader--amount;//Shorthand
+  &.from-top    { @include t-translate-y(-$amt); }
+  &.from-bottom { @include t-translate-y( $amt); }
+  &.from-left   { @include t-translate-x(-$amt); }
+  &.from-right  { @include t-translate-x( $amt); }
+
+  &.is-visible {
+    opacity: 1;
+    @include t-translate(0, 0);
+  }
+}