From 039867c22cbc4d96677661ee7518535a0d26727e Mon Sep 17 00:00:00 2001
From: dmh <dmytro.hrynevych@gmail.com>
Date: Tue, 17 May 2016 18:00:18 +0300
Subject: [PATCH] [FEATURE] add new parallax el

---
 dev/js/components.js                            |  7 ++++---
 dev/js/main/contentElements/parallax.js         | 17 ++++++++++++-----
 dev/styles/main/contentElements/parallax.less   | 15 +++++++++++----
 .../parts/content/contentElements/parallax.hbs  |  5 +++++
 4 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 dev/templates/parts/content/contentElements/parallax.hbs

diff --git a/dev/js/components.js b/dev/js/components.js
index 0f6cf83..cb095c3 100644
--- 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
index eb05ec3..89c2e85 100644
--- 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
index 508fe5a..2e354cc 100644
--- 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
new file mode 100644
index 0000000..6a7c357
--- /dev/null
+++ 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>