scrivito_section_widgets 0.0.1 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 94c46ee676623f6c048799e29e5d9d676d5257ae
-  data.tar.gz: 6e03a2ebb3d02d5940735d334879b681507ec05d
+  metadata.gz: c5affc5d46f8c510e4855ba97acf632116f8402a
+  data.tar.gz: 885af4fb52c5d5331ffc97060e67568170bfd608
 SHA512:
-  metadata.gz: ffb70f685617ffe9bce8dcc4f4b13b409096cb01cddeeb46ef4885ce7e1e5c4f61b53af39393ad90e30daab6f7efe884a4f6868ec3e762bac478ba594aed3039
-  data.tar.gz: bc3dde259750f09290b5a7c9241f3dbc8fc1b93ddb575740bd38eda9cc3fb594896b7712bcb1d36d2a8610a7827625658be0066b255aede4a229458d7f86e0f6
+  metadata.gz: fa369024944052c5e720956b6af46f33eca289ae0656069c36f74a554c5122bc1a123925c4564b02774a6f824cd5cf3d2a6f06be7dd1be0b0174fe6357740627
+  data.tar.gz: b5df7e846f02ee924b9095a3d91a173dc7c72244855a60c465af21db986e4a4b0d2e2ec4906028721080405979b876d5211f5c0c5adde4cf0c21feb012ab3c7e

data/app/assets/javascripts/scrivito_section_widgets/parallax.js

@@ -1,17 +1,40 @@
-(function($, App) {
-  'use strict';
-
-  $(function() {
-    if($('body').width() > 1024) {
-      var elems = $(".parallax");
-      set_background_positions(elems);
-
-      $(window).scroll(function(event) {
-        set_background_positions(elems);
-      });
-    }
+$(function(){
+
+  window.requestAnimationFrame = window.requestAnimationFrame
+   || window.mozRequestAnimationFrame
+   || window.webkitRequestAnimationFrame
+   || window.msRequestAnimationFrame
+   || function(f){setTimeout(f, 1000/60)}
+
+  var elems = [];
+
+  if($('body').width() > 1024) {
+    $(".parallax-image").each(function() {
+      var elem = $(this);
+
+      set_background_position(elem);
+      set_dimension(elems);
+
+      elems.push(elem);
+    });
+
+    $(window).on('scroll', function(event) {
+      window.requestAnimationFrame(function(){ set_background_positions(elems) });
+    });
+
+    $(window).on('resize', function(event) {
+      window.requestAnimationFrame(function(){ set_dimension(elems) });
+    });
+  }
+});
+
+function set_dimension(elems) {
+  var height = 0;
+  $.each(elems, function(i, elem) {
+    height = $(elem).parents('.parallax').height();
+    $(elem).css('height', height * 2);
   });
-})(jQuery, this);
+}
 
 function set_background_positions(elems) {
   $.each(elems, function(i, elem) {
@@ -20,14 +43,21 @@ function set_background_positions(elems) {
 }
 
 function set_background_position(elem) {
-  $(elem).css('background-position', calulate_position(elem));
+  $(elem).css({
+    '-webkit-transform': calulate_position(elem),
+    '-ms-transform': calulate_position(elem),
+    '-o-transform': calulate_position(elem),
+    '-moz-transform': calulate_position(elem),
+    'transform': calulate_position(elem),
+  });
 }
 
 function calulate_position(elem) {
   var speed = 0.5;
-  return "50% " + (caluclate_offset(elem) * speed) + "px";
+  var value = (caluclate_offset(elem) * speed) + "px";
+  return 'translate3d(0px, '+ value +', 0px)'
 }
 
 function caluclate_offset(elem) {
-  return $(document).scrollTop() - $(elem).offset().top;
+  return window.pageYOffset - elem.offset().top;
 }

data/app/assets/stylesheets/scrivito_section_widgets/parallax_section.css

@@ -1,5 +1,16 @@
 .scrivito_section_parallax_widget {
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.scrivito_section_parallax_widget .parallax-image {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100vh;
   background-size: cover;
+  background-position: center center;
 }
 
 .scrivito_section_video_widget video {
@@ -14,10 +25,16 @@
   right: 0;
 }
 
-.scrivito_section_parallax_widget .overlay {
+.scrivito_section_video_widget .overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+}
+
+.scrivito_section_content_widget,
+.scrivito_section_video_widget {
+  position: relative;
+  z-index: 1;
 }

data/app/views/section_parallax_widget/show.html.erb

@@ -1,3 +1,4 @@
-<section class="parallax scrivito_section_parallax_widget" style="background-image: url(<%= widget.background_image.try(:binary_url) %>); height: <%= widget.height %>">
+<section class="parallax scrivito_section_parallax_widget" style="height: <%= widget.height %>">
+  <div class="parallax-image" style="background-image: url(<%= widget.background_image.try(:binary_url) %>)"></div>
   <%= scrivito_tag(:div, widget, :section_content, class: 'container') %>
 </section>

data/lib/scrivito_section_widgets/version.rb

@@ -1,3 +1,3 @@
 module ScrivitoSectionWidgets
-  VERSION = "0.0.1"
+  VERSION = "0.0.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: scrivito_section_widgets
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.4
 platform: ruby
 authors:
 - Scrivito
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-02 00:00:00.000000000 Z
+date: 2015-03-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler