diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index b17249dce64..44ccdfbafd4 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -360,7 +360,7 @@ footer { } .parallax_full { - background: #eeeeee no-repeat top center; + background: #eeeeee no-repeat top center fixed; width: 100%; background-size: 100%; } diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index 136e039bc1c..ec5bb1a1e1a 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -276,7 +276,7 @@ footer background-color: grey .parallax_full - background: #eee no-repeat top center + background: #eee no-repeat top center fixed width: 100% background-size: 100% &.oe_small .container diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js index 963a0b1664d..86cc9d31f57 100644 --- a/addons/website/static/src/js/website.js +++ b/addons/website/static/src/js/website.js @@ -150,6 +150,20 @@ $data.attr("data-publish", +result ? 'on' : 'off'); }); }); + + $('[data-snippet-id="parallax"]').each(function(){ + var $el = $(this); + var $window = $(window); + $window.scroll(function() { + var yPos = -( ($window.scrollTop() - $el.offset().top) / $el.data('speed')); + + var yPos = -($window.scrollTop() / 2); + // Put together our final background position + var coords = '50% '+ yPos + 'px'; + // Move the background + $el.css({ backgroundPosition: coords }); + }) + }); $(document).on('click', '.js_publish_management .js_publish_btn', function (e) { var $data = $(this).parents(".js_publish_management:first"); diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index 2732c397619..a033639b47a 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -1198,8 +1198,25 @@ start : function () { this._super(); this.change_background(this.$target, 'ul[name="parallax-background"]'); + this.scroll(); this.change_size(); }, + scroll: function(){ + var self = this; + var $ul = this.$editor.find('ul[name="parallax-scroll"]'); + var $li = $ul.find("li"); + var $parallax = this.$el.find('.parallax_full'); + var speed = $parallax.data('speed') || 1 ; + + $ul.find('[data-value="' + speed + '"]').addClass('active'); + $li.on('click', function (event) { + $li.removeClass("active"); + $(this).addClass("active"); + var speed = $(this).data('value') + $parallax.data('speed', speed); + }); + + }, change_size: function () { var self = this; var $el = this.$target; diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index f0261a47e32..55349cc6f80 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -709,13 +709,13 @@