[FEATURE] add new parallax el

t3kit · May 17, 2016 · 039867c · 039867c
1 parent c39dc7d
commit 039867c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/dev/js/components.js b/dev/js/components.js
@@ -28,8 +28,9 @@
 
 
 // Parallax
-// parallax scrolling effects
-// http://markdalgleish.com/projects/stellar.js
+// JavaScript parallax scrolling
+// https://github.com/nk-o/jarallax
 //==============================================================================
-@import '../bower_components/jquery.stellar/jquery.stellar.js';
+@import '../bower_components/jarallax/jarallax/jarallax.js';
+@import '../bower_components/jarallax/jarallax/jarallax-video.js';
 //==============================================================================
diff --git a/dev/js/main/contentElements/parallax.js b/dev/js/main/contentElements/parallax.js
@@ -3,12 +3,19 @@
 
     // document load event
     $(document).ready(function() {
-
         // Parallax
-         // http://markdalgleish.com/projects/stellar.js
-        $.stellar({
-            horizontalScrolling: false,
-            verticalOffset: 40
+        // https://github.com/nk-o/jarallax
+        $('.parallax-img').jarallax({
+            type: 'scroll', //scroll, scale, opacity, scroll-opacity, scale-opacit
+            speed: 0.5,
+            noAndroid: false,
+            noIos: true
+        });
+        $('.parallax-video').jarallax({
+            type: 'scroll', //scroll, scale, opacity, scroll-opacity, scale-opacit
+            speed: 0.5,
+            noAndroid: true,
+            noIos: true
         });
     });
 

diff --git a/dev/styles/main/contentElements/parallax.less b/dev/styles/main/contentElements/parallax.less
@@ -1,7 +1,14 @@
 .parallax {
-    background-attachment: fixed;
-    background-position: 50% 0;
-    background-repeat: no-repeat;
     position: relative;
-    overflow: hidden;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    max-width: 1920px;
+    margin: 0 auto;
+}
+
+@media (min-width: 480px) {
+    .no-touch .parallax-video{
+        background-image: none !important;
+    }
 }
diff --git a/dev/templates/parts/content/contentElements/parallax.hbs b/dev/templates/parts/content/contentElements/parallax.hbs
@@ -0,0 +1,5 @@
+<div class="parallax {{#if this.videoLink}} parallax-video {{else}} parallax-img {{/if}} {{#if this.hideInMobile}} hidden-xs{{/if}}" {{#if this.videoLink}} data-jarallax-video={{videoLink}} {{/if}} style="background-image: url({{imgSrc}}); height: {{#if this.height}}{{height}}{{else}} auto{{/if}};">
+    {{#if this.elements}}
+        {{{elements}}}
+    {{/if}}
+</div>