Scroll-in elements

Gemfile.lock

@@ -54,15 +54,13 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    wdm (0.1.1)
 
 PLATFORMS
   ruby
   x64-mingw32
 
 DEPENDENCIES
   jekyll
-  wdm (>= 0.1.0)
 
 BUNDLED WITH
-   1.17.2
+   2.1.4

_pages/docs/scroll_ins.md

@@ -0,0 +1,33 @@
+---
+layout: docs
+permalink: /scroll_ins
+
+title: Scroll-ins
+description: The types of scroll-ins in ModestaCSS
+---
+Scroll-ins are elements that fade into view once you scroll into them. These scroll-ins can have varying types of fade-in animations.  
+In order to remove the orderly fade-in effect, you can add the `no-delay` class name.
+
+**Note:** Scroll-in elements start fading in once the page has finished loading.
+
+# Usage
+```html
+<p class="scroll-in">Fade-in scroll-in</p>
+<p class="scroll-in from-left">Fade-in from the left</p>
+<p class="scroll-in from-right">Fade-in from the right</p>
+<p class="scroll-in from-top">Fade-in from the top</p>
+<p class="scroll-in from-bottom">Fade-in from the bottom</p>
+<p class="scroll-in from-front">Fade-in from the front</p>
+<p class="scroll-in from-back">Fade-in from the back</p>
+```
+<br>
+
+# Preview
+<div>
+  <span class="label scroll-in">1</span>
+  <span class="label scroll-in">2</span>
+  <span class="label scroll-in">3</span>
+</div>
+
+# Scroll-in Example:
+[Click here](../examples/scroll_in)

_pages/examples/scroll_in.html

@@ -0,0 +1,52 @@
+---
+layout: example
+permalink: /examples/scroll_in
+
+title: Scroll-in
+description: Scroll-in example
+---
+
+
+<div class="fullscreen">
+  <div class="background" style="background-image: url('https://i.alexflipnote.dev/7b89f3.png');"></div>
+  <div class="center-object">
+    <div class="container">
+      <h1 class="title center">Scroll down for magic!</h1>
+    </div>
+    <div id="fade" class="arrow bounce">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 481.32 291.98" class="white-fill">
+        <path d="M466.5,15.5L466,15c-19.8-19.8-52-19.8-71.9,0L240.8,168.3L87.2,14.8C67.4-5,35.2-5,15.4,14.8l-0.5,0.5 C-5,35.2-5,67.4,14.8,87.2l186.6,186.6c0.9,1,1.8,2,2.7,3v0c3.8,3.8,8.1,6.9,12.7,9.3c17,9,38.1,7.7,53.9-3.9 c2.2-1.6,4.4-3.4,6.4-5.4L466.5,87.4C486.4,67.6,486.4,35.4,466.5,15.5z"/>
+      </svg>
+    </div>
+  </div>
+</div>
+<section class="container">
+  <br><br><br><br>
+  <h6>These buttons show up once you scroll into them.</h6>
+  <div class="buttons">
+    <a class="btn emerald scroll-in">Button</a>
+    <a class="btn emerald scroll-in">Button</a>
+    <a class="btn emerald scroll-in">Button</a>
+  </div>
+  <br><br><br><br>
+  <h6>These buttons show up all at once.</h6>
+  <div class="buttons">
+    <a class="btn emerald scroll-in no-delay">Button</a>
+    <a class="btn emerald scroll-in no-delay">Button</a>
+    <a class="btn emerald scroll-in no-delay">Button</a>
+  </div>
+  <br><br><br><br>
+  <h6>Coming from different directions.</h6>
+  <div class="buttons">
+    <a class="btn emerald scroll-in from-left">.from-left</a>
+    <a class="btn emerald scroll-in from-top">.from-top</a>
+    <a class="btn emerald scroll-in from-bottom">.from-bottom</a>
+    <a class="btn emerald scroll-in from-right">.from-right</a>
+  </div>
+  <br><br><br><br>
+  <h6>Coming from different styles.</h6>
+  <div class="buttons">
+    <a class="btn emerald scroll-in from-front">.from-front</a>
+    <a class="btn emerald scroll-in from-back">.from-back</a>
+  </div>
+</section>

_watcher.py

@@ -47,7 +47,10 @@ def fail():
         while cmds and len(processes) < max_task:
             task = cmds.pop()
             print(task)
-            processes.append(Popen(task, shell=True))
+            if sys.platform == 'linux':
+                processes.append(Popen(task, shell=True))
+            else:
+                processes.append(Popen(task.split(' '), shell=True))
 
         for p in processes:
             if done(p):
@@ -63,9 +66,9 @@ def fail():
 
 
 commands = [
-    ['sass', '--watch', 'scss:css', '--style', 'compressed'],
-    ['bundle', 'exec', 'jekyll', 'serve'],
-    ['rollup', '-c', '-w']
+    ['sass --watch scss:css --style compressed'],
+    ['bundle exec jekyll serve'],
+    ['rollup -c -w']
 ]
 
 exec_commands(commands)

js/src/components/scroll_in.js

@@ -0,0 +1,11 @@
+export function check_scroll_ins() {
+  var height = window.innerHeight
+  var scrollIns = document.querySelectorAll('.scroll-in:not(.scroll-in--scrolled)')
+
+  if (scrollIns.length)
+    Array.from(scrollIns).forEach(element => {
+      var y = element.getBoundingClientRect().y
+      if (y < height)
+        element.classList.add('scroll-in--scrolled')
+    })
+}

js/src/index.js

@@ -1,5 +1,11 @@
 import { check_arrow } from "./components/arrow.js"
+import { check_scroll_ins } from "./components/scroll_in.js"
 
 window.addEventListener('scroll', function() {
   check_arrow()
+  check_scroll_ins()
+})
+
+window.addEventListener('load', function() {
+  check_scroll_ins()
 })

scss/components/_keyframes.scss

@@ -36,6 +36,70 @@
   100% { opacity: 1; }
 }
 
+@include keyframes(fade-from-top) {
+  from {
+    opacity: 0;
+    @include transform(translate3d(0, -100%, 0));
+  }
+  100% {
+    opacity: 1;
+    @include transform(translate3d(0, 0, 0));
+  }
+}
+
+@include keyframes(fade-from-bottom) {
+  from {
+    opacity: 0;
+    @include transform(translate3d(0, 100%, 0));
+  }
+  100% {
+    opacity: 1;
+    @include transform(translate3d(0, 0, 0));
+  }
+}
+
+@include keyframes(fade-from-left) {
+  from {
+    opacity: 0;
+    @include transform(translate3d(-100%, 0, 0));
+  }
+  100% {
+    opacity: 1;
+    @include transform(translate3d(0, 0, 0));
+  }
+}
+
+@include keyframes(fade-from-right) {
+  from {
+    opacity: 0;
+    @include transform(translate3d(100%, 0, 0));
+  }
+  100% {
+    opacity: 1;
+    @include transform(translate3d(0, 0, 0));
+  }
+}
+
+@include keyframes(fade-from-back) {
+  from {
+    opacity: 0;
+    transform: scale3d(0.5, 0.5, 0.5);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@include keyframes(fade-from-front) {
+  from {
+    opacity: 0;
+    transform: scale3d(1.5, 1.5, 1.5);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @include keyframes(load) {
   0%, 80%, 100% {
     box-shadow: 0 0, 0 0;

scss/components/_scroll_ins.scss

@@ -0,0 +1,37 @@
+.scroll-in {
+  opacity: 0;
+
+  &.scroll-in--scrolled {
+    @include animation('fading 1s ease-in-out forwards');
+
+    &.from-top {
+      @include animation('fade-from-top 1s ease-in-out forwards');
+    }
+
+    &.from-bottom {
+      @include animation('fade-from-bottom 1s ease-in-out forwards');
+    }
+
+    &.from-left {
+      @include animation('fade-from-left 1s ease-in-out forwards');
+    }
+
+    &.from-right {
+      @include animation('fade-from-right 1s ease-in-out forwards');
+    }
+
+    &.from-back {
+      @include animation('fade-from-back 1s ease-in-out forwards');
+    }
+
+    &.from-front {
+      @include animation('fade-from-front 1s ease-in-out forwards');
+    }
+
+    @for $x from 1 through 15 {
+      &:nth-child(#{$x}):not(.no-delay) {
+        animation-delay: $x * .25s;
+      }
+    }
+  }
+}

scss/modesta.scss

@@ -20,6 +20,7 @@
 @import 'components/fullscreen';
 @import 'components/grid';
 @import 'components/objects';
+@import 'components/scroll_ins';
 
 // Responsiveness
 @import 'components/responsive';