reupload

public/web/shella/scripts/module.parallax.js

@@ -0,0 +1,137 @@
+theme.Parallax = function() {
+
+    function Parallax() {
+        this.load();
+    };
+
+    Parallax.prototype = $.extend({}, Parallax.prototype, {
+        load: function () {
+            $.widget( 'ui.parallax', {
+                options: {
+                    ratio: 1.2
+                },
+                params: {},
+                _create: function() {
+                    var _ = this;
+
+                    this.params.start_width = this.element.width();
+                    this.params.start_height = this.element.height();
+                    this.params.start_ratio_height = this.params.start_height / this.params.start_width;
+
+                    this._setOption('ratio', this.element.data('ratio'), true);
+                    this._setOption('height', this.element.data('height'), true);
+                    this._setOption('minHeight', this.element.data('min-height'), true);
+
+                    if(this.options.height) {
+                        var height_arr = this.options.height.split(',');
+
+                        this.options.height = {
+                            xs: height_arr[4],
+                            sm: height_arr[3],
+                            md: height_arr[2],
+                            lg: height_arr[1],
+                            xl: height_arr[0]
+                        };
+                    } else {
+                        this.element.css({
+                            paddingTop: _.params.start_ratio_height * 100 + '%'
+                        });
+                    }
+
+                    if(this.options.minHeight) {
+                        this.element.css({
+                            minHeight: this.options.minHeight + 'px'
+                        });
+                    }
+
+                    this.$content = this.element.children().first();
+
+                    this._calculateSize();
+                    this._calculatePosition();
+
+                    this.element.css({
+                        overflow: 'hidden',
+                        position: 'relative'
+                    });
+
+                    this.$content.css({
+                        position: 'absolute',
+                        top: '0',
+                        left: '50%',
+                        transform: 'translateX(-50%)'
+                    });
+
+                    $window.on('theme.resize.parallax', function () {
+                        _._calculateSize();
+                        _._calculatePosition();
+                    });
+
+                    $window.on('scroll.parallax', function () {
+                        _._calculatePosition();
+                    });
+
+                    this.element.addClass('parallax--init');
+                },
+                _calculateSize: function() {
+                    this.params.current_width = this.element.width();
+
+                    if(this.options.height) {
+                        this.element.css({
+                            paddingTop: this.options.height[theme.current.bp]
+                        });
+                    }
+
+                    this.params.current_height = this.element.height();
+
+                    this.params.current_scale_width = this.params.current_width * this.options.ratio;
+                    this.params.current_scale_height = this.params.current_height * this.options.ratio;
+
+                    this.params.stroke_scroll = this.params.current_height + window.innerHeight;
+                    this.params.stroke_content = this.params.current_scale_height - this.params.current_height;
+                    this.params.stroke_ratio = this.params.stroke_scroll / this.params.stroke_content;
+
+                    this.$content.width(this.params.current_scale_width);
+                },
+                _calculatePosition: function() {
+                    this.params.stroke_current = this.params.stroke_scroll - this.element[0].getBoundingClientRect().bottom;
+
+                    this.params.stroke_current = Math.max(this.params.stroke_current, 0);
+                    this.params.stroke_current = Math.min(this.params.stroke_current, this.params.stroke_scroll);
+
+                    this.params.current_top = this.params.stroke_content * -1 + (this.params.stroke_current / this.params.stroke_ratio);
+
+                    this.$content.css({
+                        transform: 'translate(-50%, ' + this.params.current_top + 'px)'
+                    });
+                },
+                _init: function () {
+
+                },
+                _setOption: function(key, value) {
+                    $.Widget.prototype._setOption.apply(this, arguments);
+                },
+                destroy: function() {
+                    $window.unbind('theme.resize.parallax scroll.parallax');
+
+                    $.Widget.prototype.destroy.call(this);
+                }
+            });
+        },
+        init: function($parallax) {
+            if(!$parallax.hasClass('parallax--init')) {
+                $parallax.parallax();
+            }
+        },
+        destroy: function ($parallax) {
+            if($parallax.hasClass('parallax--init')) {
+                $parallax.parallax('destroy');
+            }
+        }
+    });
+
+    theme.Parallax = new Parallax;
+};
+
+$(function() {
+    theme.Parallax();
+});