diff options
| author | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
|---|---|---|
| committer | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
| commit | 3e8b34be2fdeccf16c8b46f1ee518f970853768d (patch) | |
| tree | abcb7d0cb260790a2b4a746e3959f2e7ee3a33f7 /app/dispatch/static/materialize/js/parallax.js | |
| parent | 4ee5893fd9c82228c62306fc7f5babdfc602e4c4 (diff) | |
| download | dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.gz dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.xz | |
Adding in materialize source and templates
Diffstat (limited to 'app/dispatch/static/materialize/js/parallax.js')
| -rw-r--r-- | app/dispatch/static/materialize/js/parallax.js | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/app/dispatch/static/materialize/js/parallax.js b/app/dispatch/static/materialize/js/parallax.js new file mode 100644 index 0000000..529210d --- /dev/null +++ b/app/dispatch/static/materialize/js/parallax.js @@ -0,0 +1,58 @@ +(function ($) {
+
+ $.fn.parallax = function () {
+ var window_width = $(window).width();
+ // Parallax Scripts
+ return this.each(function(i) {
+ var $this = $(this);
+ $this.addClass('parallax');
+
+ function updateParallax(initial) {
+ var container_height;
+ if (window_width < 601) {
+ container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
+ }
+ else {
+ container_height = ($this.height() > 0) ? $this.height() : 500;
+ }
+ var $img = $this.children("img").first();
+ var img_height = $img.height();
+ var parallax_dist = img_height - container_height;
+ var bottom = $this.offset().top + container_height;
+ var top = $this.offset().top;
+ var scrollTop = $(window).scrollTop();
+ var windowHeight = window.innerHeight;
+ var windowBottom = scrollTop + windowHeight;
+ var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
+ var parallax = Math.round((parallax_dist * percentScrolled));
+
+ if (initial) {
+ $img.css('display', 'block');
+ }
+ if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
+ $img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
+ }
+
+ }
+
+ // Wait for image load
+ $this.children("img").one("load", function() {
+ updateParallax(true);
+ }).each(function() {
+ if (this.complete) $(this).trigger("load");
+ });
+
+ $(window).scroll(function() {
+ window_width = $(window).width();
+ updateParallax(false);
+ });
+
+ $(window).resize(function() {
+ window_width = $(window).width();
+ updateParallax(false);
+ });
+
+ });
+
+ };
+}( jQuery ));
|