Fix appear on scroll - barryclark#63

_assets/javascripts/application.js

@@ -7,24 +7,16 @@ $('.btn-share').on('click', function() {
 });
 
 $(document).on('turbolinks:load', function () {
+ // Initialize ScrollAppear
+ if (typeof $.fn.scrollAppear === 'function') {
+ $('.appear').scrollAppear();
+ }
+
  // Initialize fluidbox
  $('.fluidbox-trigger').fluidbox();
 
  // Track page views on Turbolinks
  if (typeof ga === 'function') {
  ga('send', 'pageview', location.pathname);
  }
-
- // Initialize scrollreveal
- sr.reveal('.reveal', {
- distance: '0',
- duration: 500,
- easing: 'ease-in-out',
- origin: 'top',
- scale: 1,
- reset: false,
- viewFactor: 0
- });
 });
-
-window.sr = ScrollReveal({ reset: true });

_assets/javascripts/scrollappear.js

@@ -0,0 +1,40 @@
+;(function ($, window, document, undefined) {
+
+ var els = [];
+
+ // Public methods
+ var pluginApi = {
+ init: function() {
+ this.each(function() {
+ els.push($(this));
+ });
+
+ refreshVisibility(els);
+
+ $(window).scroll(function () {
+ refreshVisibility(els);
+ });
+ return this;
+ }
+ };
+
+ // Private Methods
+ var refreshVisibility = function (els) {
+ $.each(els, function() {
+ if ($(this)[0].getBoundingClientRect().top < $(window).height()) {
+ $(this).addClass('appeared');
+ }
+ });
+ };
+
+ // Attach plugin to jQuery namespace
+ $.fn.scrollAppear = function(method) {
+ if (pluginApi[method]) {
+ return pluginApi[method].apply(this, Array.prototype.slice.call(arguments, 1));
+ } else if (typeof method === 'object' || !method) {
+ return pluginApi.init.apply(this, arguments);
+ } else {
+ $.error('Method ' + method + 'does not exist in scrollAppear.');
+ }
+ };
+}(jQuery, window, document));

_assets/javascripts/vendor.js

@@ -1,6 +1,5 @@
 //= require jquery
 //= require throttle-debounce-fn/dist/throttle-debounce-fn.js
 //= require fluidbox
-//= require scrollreveal
 //= require turbolinks/dist/turbolinks.js
 //= require retinajs

_assets/stylesheets/dark.scss

@@ -68,3 +68,4 @@ $article-paginator-color-hover: $gray-lightest;
 @import "modules/header";
 @import "modules/highlights-dark";
 @import "modules/icons";
+@import "modules/scrollappear";

_assets/stylesheets/light.scss

@@ -68,3 +68,4 @@ $article-paginator-color-hover: $gray-darkest;
 @import "modules/header";
 @import "modules/highlights-light";
 @import "modules/icons";
+@import "modules/scrollappear";

_assets/stylesheets/modules/_scrollappear.scss

@@ -0,0 +1,16 @@
+// =============================================================================
+// ScrollAppear
+// =============================================================================
+
+.appear {
+ visibility: hidden;
+ opacity: 0;
+}
+
+.appeared {
+ visibility: visible;
+ opacity: 1;
+ -webkit-transition: opacity 0.5s ease-in-out;
+ -moz-transition: opacity 0.5s ease-in-out;
+ transition: opacity 0.5s ease-in-out;
+}

_config.yml

@@ -11,6 +11,7 @@ about_enabled: false # Change to true if you wish to show an icon in the navigat
 discus_identifier: # Add your Disqus identifier
 ga_analytics: # Add your GA Tracking Id
 local_fonts: false # Change to true if you wish to use local fonts
+scrollappear_enabled: true # Change to false to disable
 rss_enabled: true # Change to false if not
 social:
  dribbble: # Add your Dribbble handle
@@ -53,6 +54,7 @@ exclude:
  - package.json
  - README.md
  - vendor/
+ - yarn.lock
 gems:
  - jekyll-assets
  - jekyll-paginate

_includes/footer.html

@@ -1,4 +1,4 @@
-<footer class="footer reveal">
+<footer class="footer {% if site.scrollappear_enabled %}appear{% endif %}">
  <p>
  Chalk is a high quality, completely customizable, performant and 100% free
  blog template for Jekyll built by

_includes/javascripts.html

@@ -1,7 +1,13 @@
+{% javascript vendor %}
+
 {% unless site.local_fonts %}
  {% javascript webfonts %}
 {% endunless %}
 
+{% if site.scrollappear_enabled %}
+ {% javascript scrollappear %}
+{% endif %}
+
 {% if site.ga_analytics %}
  <script>
  window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
@@ -10,5 +16,4 @@
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
 {% endif %}
 
-{% javascript vendor %}
 {% javascript application %}

_includes/navigation.html

@@ -1,4 +1,4 @@
-<nav class="header-nav reveal">
+<nav class="header-nav {% if site.scrollappear_enabled %}appear{% endif %}">
  <a href="{{ '/' | relative_url }}" class="header-logo" title="{{ site.name }}">{{ site.name }}</a>
  <ul class="header-links">
  {% if site.about_enabled == true %}

_layouts/articles_by_tag.html

@@ -5,7 +5,7 @@
 {% if site.tags[page.slug] %}
  <ul class="article-list">
  {% for post in site.tags[page.slug] %}
- <li class="article-list-item reveal">
+ <li class="article-list-item {% if site.scrollappear_enabled %}appear{% endif %}">
  <a href="{{ post.url | relative_url }}" title="{{ post.title }}">
  <h5>{{ post.title }}</h5>
  </a>

_layouts/post.html

@@ -6,7 +6,7 @@
  <div class="grid grid-centered">
  <div class="grid-cell">
  {% include navigation.html %}
- <article class="article reveal">
+ <article class="article {% if site.scrollappear_enabled %}appear{% endif %}">
  <header class="article-header">
  <h1>{{ page.title }}</h1>
  <p>{{ page.description }}</p>

about.html

@@ -4,7 +4,7 @@
 description: ""
 ---
 
-<div class="about reveal">
+<div class="about {% if site.scrollappear_enabled %}appear{% endif %}">
  <img src="{% asset_path 'about.jpg' %}" alt="About Nielsen Ramon header image" />
  <h1>About me</h1>
  <p>

index.html

@@ -6,7 +6,7 @@
 
 <ul class="article-list">
  {% for post in paginator.posts %}
- <li class="article-list-item reveal">
+ <li class="article-list-item {% if site.scrollappear_enabled %}appear{% endif %}">
  <a href="{{ post.url | relative_url }}" title="{{ post.title }}">
  <h5>
  {{ post.title }}
@@ -37,7 +37,7 @@ <h5>
  </li>
  {% endfor %}
  {% if paginator.total_pages > 1 %}
- <li class="article-pagination reveal">
+ <li class="article-pagination {% if site.scrollappear_enabled %}appear{% endif %}">
  {% if paginator.previous_page %}
  <a href="{{ paginator.previous_page_path }}" class="article-pagination-right">Newer posts <span class="icon icon-arrow-right"></span></a>
  {% endif %}

package.json

@@ -5,7 +5,6 @@
  "throttle-debounce-fn": "^1.0.1",
  "fluidbox": "^2.0.5",
  "retinajs": "^2.1.1",
- "scrollreveal": "^3.3.5",
  "turbolinks": "^5.0.0",
  "webfontloader": "^1.6.28"
  }