]> _ Git - fluidbook-html5.git/commitdiff
wait #4835 @0.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 28 Oct 2021 16:28:36 +0000 (18:28 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 28 Oct 2021 16:28:36 +0000 (18:28 +0200)
js/libs/fluidbook/fluidbook.parallax.js [new file with mode: 0644]

diff --git a/js/libs/fluidbook/fluidbook.parallax.js b/js/libs/fluidbook/fluidbook.parallax.js
new file mode 100644 (file)
index 0000000..0e95dc7
--- /dev/null
@@ -0,0 +1,71 @@
+function FluidbookParallax(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.init();
+}
+
+FluidbookParallax.prototype = {
+    frame: function (timestamp) {
+        var $this = this;
+        var progress = timestamp - this.lastFrame;
+        this.lastFrame = timestamp;
+
+        $("[data-parallax]").each(function () {
+            var currentX = parseFloat($(this).css('marginLeft'));
+            var currentY = parseFloat($(this).css('marginTop'));
+            var friction = 5;
+            var d = friction * progress / 1000;
+
+            $(this).css({
+                marginTop: currentY + ($(this).data('parallax-dest-y') - currentY) * d,
+                marginLeft: currentX + ($(this).data('parallax-dest-x') - currentX) * d
+            })
+        });
+
+        requestAnimationFrame(function (timestamp) {
+            $this.frame(timestamp);
+        });
+    },
+
+    init: function () {
+        var $this = this;
+        this.lastFrame = new Date().getTime();
+        requestAnimationFrame(function (timestamp) {
+            $this.frame(timestamp);
+        });
+
+        this.x = 0;
+        this.y = 0;
+        this.update();
+
+        if (Modernizr.hasEvent('deviceOrientation')) {
+
+        } else {
+            $(window).on('pointermove', function (e) {
+                $this.x = -1 * $this.normalize((e.clientX - $this.fluidbook.resize.ww / 2) / $this.fluidbook.resize.ww);
+                $this.y = -1 * $this.normalize((e.clientY - $this.fluidbook.resize.hh / 2) / $this.fluidbook.resize.hh);
+                $this.update();
+            });
+        }
+    },
+
+    update: function () {
+        var $this = this;
+        $("[data-parallax]").each(function () {
+            var p = parseFloat($(this).data('parallax'));
+            var scale = 0.25;
+            var destx = scale * p * $this.x * $this.fluidbook.settings.width;
+            var desty = scale * p * $this.y * $this.fluidbook.settings.height;
+            $(this).data('parallax-dest-x', destx);
+            $(this).data('parallax-dest-y', desty);
+        });
+    },
+
+
+    normalize: function (v) {
+        return Math.max(-0.5, Math.min(0.5, v));
+    },
+
+    changePage: function () {
+
+    },
+};
\ No newline at end of file