wip #1344 @5

diff --git a/js/libs/fluidbook/fluidbook.desktop.js b/js/libs/fluidbook/fluidbook.desktop.js
index 8892433a88585b47a5b8af782247f7c36933ff1d..7260372cb79c8e7b2f46a42562c3852436ec8316 100644 (file)
--- a/js/libs/fluidbook/fluidbook.desktop.js
+++ b/js/libs/fluidbook/fluidbook.desktop.js
@@ -1,7 +1,5 @@
 function FluidbookDesktop(fluidbook) {
     this.fluidbook = fluidbook;
-    this.origin = ['0%', '0%'];
-    this.updateDesktopScale(1);
     this.init();
 }
 
@@ -10,6 +8,7 @@ FluidbookDesktop.prototype = {
         var $this = this;
         $(document).on('click', '#links', function (e) {
             $this.clickZoom(e);
+            return false;
         });
         $(document).on('click', '#links .link', function (e) {
             e.stopPropagation();
@@ -27,103 +26,30 @@ FluidbookDesktop.prototype = {
         var x = 100 * e.pageX / $(window).width();
         var y = 100 * e.pageY / $(window).height();
 
-
-        this.origin = [x + '%', y + '%'];
-        if (this.desktopScale == 1) {
-            return;
-        } else {
-            $("#z").transform({
-                origin: this.origin
-            }, {
-                preserve: true
-            })
-        }
+        this.fluidbook.zoom.setOrigin(x + '%', y + '%')
     },
     clickZoom: function (e, way) {
         if (way == undefined) {
-            if (this.desktopScale == 1) {
-                way = 'in';
+            if (this.fluidbook.zoom.zoom == 1) {
+                way = 1;
             } else {
-                way = 'out';
-                this.zoomingOut = true;
+                way = -1;
             }
         }
         var newScale;
-        if (way == 'in') {
+        if (way == 1) {
             newScale = this.fluidbook.datas.zoom / 100;
-        } else if (way == 'out') {
+        } else if (way == -1) {
             newScale = 1;
         }
-        this.updateDesktopScale(newScale);
+        this.fluidbook.zoom.setZoom(newScale);
         return false;
     },
     wheelZoom: function (delta) {
         if ($("body").hasClass('view')) {
             return;
         }
-        this.updateDesktopScale(this.desktopScale + delta / 3, delta > 0);
+        this.fluidbook.zoom.setZoom(this.fluidbook.zoom.zoom + delta / 3, delta > 0 ? 1 : -1);
     },
-    updateDesktopScale: function (v, zoomIn) {
-        var $this = this;
-        if (this.fluidbook.viewMode()) {
-            v = 1;
-        }
-
-        var max = this.fluidbook.datas.zoomw / 100;
-
-        v = Math.max(Math.min(v, max), 1);
-
-        if (v > 1) {
-            $("#z").removeClass('nozoom')
-        }
-
-        if (zoomIn === true) {
-            if (v < 1.5) {
-                v = 2;
-            }
-        } else if (zoomIn === false) {
-            if (v < 1.5) {
-                v = 1;
-            }
-        }
-
-
-        if (v == this.desktopScale) {
-            return false;
-        }
-        this.desktopScale = v;
-
-        var animation = {
-            scale: [v, v]
-        };
-
-        if (this.desktopScale == 1) {
-            animation.origin = ['50%', '50%'];
-        } else {
-            animation.origin = this.origin;
-        }
-
-        if (this.desktopScale != 1) {
-            $("header,footer,#interface").addClass('hidden');
-
-        } else {
-            $("header,footer,#interface").removeClass('hidden');
-        }
-        $("#z").addClass('animate').transform(animation);
-        setTimeout(function () {
-            $("#z").removeClass('animate');
-            if (v == 1) {
-                $("#z").addClass('nozoom');
-            }
-        }, 600);
-
-        if (this.desktopScale > 1) {
-            $("body").addClass('zoomed');
-        } else {
-            $("body").removeClass('zoomed');
-        }
-
-        return true;
-    }
 
 };
\ No newline at end of file

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 99aa67f8e150794fdce5fd40cab562fcb88862e4..76188f01eacb680f97ebb332b291ef8ae8d3edbd 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -24,6 +24,8 @@ Fluidbook.prototype = {
     init: function (datas) {
         this.datas = datas;
         this.junk = datas.cacheDate;
+        this.zoom = new FluidbookZoom(this);
+        this.zoom.resetZoom();
         this.cache = new FluidbookCache(datas);
         this.service = new FluidbookService(this, datas.id);
         this.support = new FluidbookSupport(this);
@@ -34,7 +36,10 @@ Fluidbook.prototype = {
         this.waiters = [];
         this.viewport = new FluidbookViewport(this);
         this.viewport.updateViewport();
-        this.interact=new FluidbookInteract(this);
+        if (Modernizr.ftouch && this.support.transitions2d && this.datas.mobileTransitions != 'none') {
+            this.touch = new FluidbookTouch(this);
+        }
+        this.interact = new FluidbookInteract(this);
         this.background = new FluidbookBackground(this);
         this.l10n = new FluidbookL10N(this, $_GET['lang']);
         this.video = new FluidbookVideo(this);
@@ -42,15 +47,15 @@ Fluidbook.prototype = {
         this.index = new FluidbookIndex(this);
         this.tooltip = new FluidbookTooltip(this);
         this.audiodescription = new FluidbookAudioDescription(this);
+
         if (this.datas.form == 'bulle') {
             this.form = new FluidbookBulleForm(this);
         } else {
             this.form == false;
         }
-        this.privacy=new FluidbookPrivacy(this);
+        this.privacy = new FluidbookPrivacy(this);
         this.refw = 0;
         this.refh = 0;
-        this.zoom = 1;
         this.searchHintXHR = null;
         this.searchString = '';
         this.termsToHighlight = '';
@@ -126,11 +131,7 @@ Fluidbook.prototype = {
         this.ready();
         $("#main").css('visibility', 'visible');
         this.hideLoader(0, true);
-        // See bug #610
-        if (this.touch !== undefined && this.support.android) {
-            this.touch.enableUserScale();
-        }
-
+     
         if (this.support.transitions2d) {
             $("#splash").css('opacity', 0).one(this.support.getTransitionEndEvent(true), function () {
                 $(this).remove();
@@ -141,7 +142,7 @@ Fluidbook.prototype = {
             })
         }
 
-       $(this).trigger('fluidbookhidesplash');
+        $(this).trigger('fluidbookhidesplash');
 
     },
     ready: function () {
@@ -171,21 +172,6 @@ Fluidbook.prototype = {
             }
         });
     },
-    resetZoom: function () {
-        var $this = this;
-        if (this.support.iOS) {
-        } else if (!this.support.isMobile) {
-            this.desktop.updateDesktopScale(1);
-        }
-
-    },
-    setZoom: function (zoom) {
-        if (zoom) {
-            $("#pages").addClass('zoom');
-        } else {
-            $("#pages").removeClass('zoom');
-        }
-    },
     initPage: function (pageNr, doublePage, position) {
         if ($("#page_" + pageNr).length > 0) {
             return;
@@ -319,7 +305,7 @@ Fluidbook.prototype = {
             $($this).trigger('changePage', [page]);
             this.closeView(function () {
                 $this.pageTransition(page);
-                $this.resetZoom();
+                $this.zoom.resetZoom();
                 $this.stats.track(0, page);
                 $this.hideSplash();
             }, true);
@@ -328,7 +314,7 @@ Fluidbook.prototype = {
             this.openView(args[1], args[2], args[3], function () {
                 $this.hideSplash();
             });
-            this.resetZoom();
+            this.zoom.resetZoom();
         }
 
         return;

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 079aaf748dd04ba9c98135810248bf545bab5e93..a557a1c2241e472f7592c235c061d346a2d21ff5 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -416,7 +416,7 @@ FluidbookResize.prototype = {
         this.fluidbook.displayOnePage = (this.orientation == 'portrait');
 
         if (changeOrientation) {
-            this.fluidbook.resetZoom();
+            this.fluidbook.zoom.resetZoom();
             this.fluidbook.pageTransition();
         }
     }

diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
new file mode 100644 (file)
index 0000000..1bb9341
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -0,0 +1,202 @@
+function FluidbookTouch(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.interact = fluidbook.interact;
+    this.scale = 1;
+
+    this.startX = 0;
+    this.startY = 0;
+    this.offsetX = 0;
+    this.offsetY = 0;
+
+    this.triggerOffset = 0.05;
+
+    this.init();
+}
+
+FluidbookTouch.prototype = {
+    init: function () {
+        var $this = this;
+
+        $("#main").on('touchend',function(){
+            console.log('touchend from jquery');
+        })
+
+        // Pinch to zoom
+        interact(document.getElementById("main")).gesturable({
+            onstart: function (event) {
+                if ($this.fluidbook.zoom.zoom == 1) {
+                    $this.setZoomOriginFromEvent(event);
+                }
+                return false;
+            },
+            onmove: function (event) {
+                var ds = event.ds;
+                //if ($this.fluidbook.support.iOS) {
+                    if (ds > 0) {
+                        ds *= 0.25;
+                    } else {
+                        ds *= 0.75;
+                    }
+                //}
+                var s = $this.fluidbook.zoom.zoom * (1 + ds);
+                $this.pinchZoom(s);
+                return false;
+            },
+            onend: function (event) {
+                console.log('pinch end');
+                return false;
+            },
+        }).draggable({
+            inertia: true,
+            onmove: function (event) {
+                return $this.dragzoom(event);
+            },
+            onend: function (event) {
+                $this.resetSlide();
+                console.log('drag end');
+            }
+        });
+
+        // Double tap
+        interact(document).on('doubletap', function (event) {
+
+            if ($this.fluidbook.zoom.zoom > 1) {
+                $this.fluidbook.zoom.setTransition(true);
+                $this.fluidbook.zoom.resetZoom();
+            } else {
+                $this.setZoomOriginFromEvent(event);
+                $this.fluidbook.zoom.setTransition(true);
+                $this.fluidbook.zoom.setZoom($this.fluidbook.datas.zoom / 100, 1)
+            }
+            event.preventDefault();
+        });
+    },
+
+    pinchZoom: function (s) {
+        this.fluidbook.zoom.setTransition(false);
+        this.fluidbook.zoom.setZoom(s, undefined);
+    },
+
+    dragzoom: function (e) {
+        console.log(e.dx + ' :: ' + e.dy);
+        if (e.dx == 0 && e.dy == 0) {
+            return;
+        }
+
+
+        var currentX = (parseFloat(this.fluidbook.zoom.origin[0]) / 100) * this.fluidbook.resize.ww * this.fluidbook.zoom.zoom;
+        var currentY = (parseFloat(this.fluidbook.zoom.origin[1]) / 100) * this.fluidbook.resize.hh * this.fluidbook.zoom.zoom;
+
+        var m = 2;
+        //if (this.fluidbook.support.android) {
+          //  m = 10;
+        //}
+
+        var x = currentX - e.dx * m;
+        var y = currentY - e.dy * m;
+
+        x *= 100 / this.fluidbook.resize.ww / this.fluidbook.zoom.zoom;
+        y *= 100 / this.fluidbook.resize.hh / this.fluidbook.zoom.zoom;
+
+        x = Math.max(0, Math.min(100, x));
+        y = Math.max(0, Math.min(100, y));
+
+        this.fluidbook.zoom.setOrigin(
+            x + '%',
+            y + '%',
+            true);
+
+
+        if (this.fluidbook.zoom.zoom == 1) {
+
+            if (this.startX == -1) {
+                this.startX = e.clientX;
+            }
+            if (this.startY == -1) {
+                this.startY = e.clientY;
+            }
+            this.offsetX = (e.clientX - this.startX) / this.fluidbook.resize.ww;
+            this.offsetY = (e.clientY - this.startY) / this.fluidbook.resize.hh;
+
+            this.testSlideOffset();
+        } else {
+            this.resetSlide();
+        }
+        return false;
+    },
+
+    testSlideOffset: function () {
+        if (!this.fluidbook.pad.enabled) {
+            if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) {
+                return false;
+            }
+            if (this.offsetX < -this.triggerOffset) {
+                if (this.fluidbook.l10n.dir == 'ltr') {
+                    this.fluidbook.goNextPage();
+                    this.resetSlide();
+                } else {
+                    this.fluidbook.goPreviousPage();
+                    this.resetSlide();
+                }
+
+                return true;
+            } else if (this.offsetX > this.triggerOffset) {
+                if (this.fluidbook.l10n.dir == 'ltr') {
+                    this.fluidbook.goPreviousPage();
+                    this.resetSlide();
+                } else {
+                    this.fluidbook.goNextPage();
+                    this.resetSlide();
+                }
+                return true;
+            }
+        } else {
+            // Mode mag pad
+
+            var offset = this.offsetX;
+            var way = 'x';
+            if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) {
+                offset = this.offsetY;
+                way = 'y';
+            }
+
+            if (Math.abs(offset) < this.triggerOffset) {
+                return false;
+            }
+
+            if (offset < -this.triggerOffset) {
+                if (way == 'x') {
+                    this.fluidbook.goNextChapter();
+                    this.resetSlide();
+                } else {
+                    this.fluidbook.goNextChapterPage();
+                    this.resetSlide();
+                }
+            } else {
+                if (way == 'x') {
+                    this.fluidbook.goPreviousChapter();
+                    this.resetSlide();
+                } else {
+                    this.fluidbook.goPreviousChapterPage();
+                    this.resetSlide();
+                }
+            }
+            return true;
+        }
+
+    },
+
+    resetSlide: function () {
+        this.startX = -1;
+        this.startY = -1;
+        this.offsetX = 0;
+        this.offsetY = 0;
+    },
+    setZoomOriginFromEvent: function (event) {
+        this.fluidbook.zoom.setOrigin(
+            ((event.clientX / this.fluidbook.resize.ww) * 100) + '%',
+            ((event.clientY / this.fluidbook.resize.hh) * 100) + '%',
+            true);
+    },
+};
+

diff --git a/js/libs/fluidbook/fluidbook.viewport.js b/js/libs/fluidbook/fluidbook.viewport.js
index 7f8b68ee71cb0aa1e7fa16a8632cd64eb70f5cfb..0cc5a97a8d3af6edb7c68daddd49dc35699824b2 100644 (file)
--- a/js/libs/fluidbook/fluidbook.viewport.js
+++ b/js/libs/fluidbook/fluidbook.viewport.js
@@ -2,9 +2,9 @@ function FluidbookViewport(fluidbook) {
     this.width = 'device-width';
     this.height = null;
     this.minScale = 1;
-    this.maxScale = 10;
+    this.maxScale = 1;
     this.initialScale = 1;
-    this.userScalable = true;
+    this.userScalable = false;
     this.meta = $('meta[name="viewport"]');
     this.fluidbook = fluidbook;
     if (this.fluidbook.support.iOS) {

diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
new file mode 100644 (file)
index 0000000..53bf0c5
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -0,0 +1,125 @@
+function FluidbookZoom(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.zoom = 0;
+    this.origin = ['0%', '0%'];
+    this.max = this.fluidbook.datas.zoomw / 100;
+    this.transition = true;
+    this.init();
+}
+
+FluidbookZoom.prototype = {
+    init: function () {
+        this.setTransition(true);
+    },
+
+    /**
+     *
+     * @param zoom Zoom level
+     * @param direction Zoom direction (1=zoom in, -1=zoom out)
+     */
+    setZoom: function (zoom, direction) {
+        if (direction == undefined) {
+            if (this.zoom > zoom) {
+                direction = -1;
+            } else {
+                direction = 1;
+            }
+        }
+
+        zoom = Math.max(Math.min(zoom, this.max), 1);
+        if (this.fluidbook.viewMode()) {
+            zoom = 1;
+        }
+        if (this.zoom == zoom) {
+            return;
+        }
+        if (this.transition) {
+            if (direction == 1) {
+                if (zoom < 1.5) {
+                    zoom = 2;
+                }
+            } else if (direction == -1) {
+                if (zoom < 1.5) {
+                    zoom = 1;
+                }
+            }
+        }
+        if (this.zoom == zoom) {
+            return;
+        }
+        this.zoom = zoom;
+        this.updateZoom(direction);
+    },
+
+    setTransition: function (transition) {
+        if (transition == undefined) {
+            transition = true;
+        }
+
+        if (transition == false) {
+            $("#z").addClass('notransition').removeClass('transition');
+        } else {
+            $("#z").removeClass('notransition');
+        }
+        this.transition = transition;
+    },
+
+    resetZoom: function () {
+        this.setZoom(1, -1);
+    },
+
+    setOrigin: function (x, y, force) {
+        if (force == undefined) {
+            force = false;
+        }
+        this.origin = [x, y];
+        if (!force && this.fluidbook.zoom.zoom == 1) {
+            return;
+        } else {
+            $("#z").transform({
+                origin: this.origin
+            }, {
+                preserve: true
+            })
+        }
+    },
+
+    updateZoom: function (direction) {
+        var $this = this;
+
+        if (this.zoom > 1) {
+            $("#z").removeClass('nozoom')
+        }
+
+        var animation = {
+            scale: [this.zoom, this.zoom]
+        };
+
+        if (this.desktopScale == 1) {
+            animation.origin = ['50%', '50%'];
+        } else {
+            animation.origin = this.origin;
+        }
+
+        if (this.zoom != 1) {
+            $("header,footer,#interface").addClass('hidden');
+        } else {
+            $("header,footer,#interface").removeClass('hidden');
+        }
+        $("#z").addClass('animate').transform(animation);
+        setTimeout(function () {
+            $("#z").removeClass('animate');
+            if (this.zoom == 1) {
+                $("#z").addClass('nozoom');
+            }
+        }, 600);
+
+        if (this.desktopScale > 1) {
+            $("body").addClass('zoomed');
+        } else {
+            $("body").removeClass('zoomed');
+        }
+
+        return true;
+    }
+}
\ No newline at end of file

diff --git a/style/fluidbook.css b/style/fluidbook.css
index ee5c8f8f20072dbdae19bb84792dd0a783c08353..303fd1e6c04061c6eb8fb1bdb5588166811fb472 100644 (file)
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -81,6 +81,7 @@ html {
   -ms-user-select: text;
 }
 body {
+  position: relative;
   -webkit-touch-callout: none !important;
 }
 body,
@@ -97,20 +98,29 @@ html.screenshot #main {
 html.screenshot #coquillette {
   visibility: hidden !important;
 }
-body {
+body,
+html {
   overflow-y: hidden;
   overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
 }
 a {
   -ms-touch-action: manipulation;
   touch-action: manipulation;
 }
 #main {
-  position: absolute;
+  position: relative;
   display: none;
+  overflow-x: hidden;
+  overflow-y: hidden;
   overflow: hidden;
   visibility: hidden;
   opacity: 1;
+  z-index: 0;
+  height: 100%;
+  width: 100%;
 }
 #main.fadeout,
 #view.fadeout {
@@ -286,18 +296,18 @@ a {
   direction: ltr;
   top: 0;
   left: 0;
-  -moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
-  -webkit-transition: -webkit-transform 600ms ease-out, transform 600ms ease-out;
-  -o-transition: -o-transform 600ms ease-out, transform 600ms ease-out;
-  -ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
-  transition: transform 600ms ease-out;
+  -moz-transition: -moz-transform 350ms ease-out, transform 350ms ease-out;
+  -webkit-transition: -moz-transform 350ms ease-out, transform 350ms ease-out;
+  -o-transition: -o-transform 350ms ease-out, transform 350ms ease-out;
+  -ms-transition: -ms-transform 350ms ease-out, transform 350ms ease-out;
+  transition: transform 350ms ease-out;
 }
-#z.animate {
-  -moz-transition: all 600ms ease-out;
-  -webkit-transition: all 600ms ease-out;
-  -ms-transition: all 600ms ease-out;
-  -o-transition: all 600ms ease-out;
-  transition: all 600ms ease-out;
+#z.notransition {
+  -moz-transition: none;
+  -webkit-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
 }
 #z.nozoom {
   height: 0 !important;
@@ -307,18 +317,18 @@ a {
   position: absolute;
   z-index: 11;
   direction: ltr;
-  -moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
-  -webkit-transition: -webkit-transform 600ms ease-out, transform 600ms ease-out;
-  -o-transition: -o-transform 600ms ease-out, transform 600ms ease-out;
-  -ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
-  transition: transform 600ms ease-out;
+  -moz-transition: -moz-transform 350ms ease-out, transform 350ms ease-out;
+  -webkit-transition: -webkit-transform 350ms ease-out, transform 350ms ease-out;
+  -o-transition: -o-transform 350ms ease-out, transform 350ms ease-out;
+  -ms-transition: -ms-transform 350ms ease-out, transform 350ms ease-out;
+  transition: transform 350ms ease-out;
 }
 #fluidbook.animate {
-  -moz-transition: all 600ms ease-out;
-  -webkit-transition: all 600ms ease-out;
-  -ms-transition: all 600ms ease-out;
-  -o-transition: all 600ms ease-out;
-  transition: all 600ms ease-out;
+  -moz-transition: all 350ms ease-out;
+  -webkit-transition: all 350ms ease-out;
+  -ms-transition: all 350ms ease-out;
+  -o-transition: all 350ms ease-out;
+  transition: all 350ms ease-out;
 }
 #cache {
   display: none;
@@ -443,6 +453,7 @@ a {
 /* Header */
 header {
   position: relative;
+  z-index: 12;
 }
 #nav > a {
   vertical-align: top;

diff --git a/style/fluidbook.less b/style/fluidbook.less
index ad09abcb7e54e24cfdb345dbeb51de34701672b8..1fc04adb76e04a28b3c183311f8c7dc4fbae3f47 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -88,6 +88,7 @@ html {
 }
 
 body {
+       position: relative;
        -webkit-touch-callout: none !important;
 }
 
@@ -108,9 +109,12 @@ html.screenshot #coquillette {
        visibility: hidden !important;
 }
 
-body {
+body, html {
        overflow-y: hidden;
        overflow-x: hidden;
+       width: 100%;
+       height: 100%;
+       touch-action: none;
 }
 
 a {
@@ -119,11 +123,16 @@ a {
 }
 
 #main {
-       position: absolute;
+       position: relative;
        display: none;
+       overflow-x: hidden;
+       overflow-y: hidden;
        overflow: hidden;
        visibility: hidden;
        opacity: 1;
+       z-index: 0;
+       height: 100%;
+       width: 100%;
 }
 
 #main.fadeout, #view.fadeout {
@@ -321,7 +330,7 @@ a {
        margin: -2px 20px 0 0;
 }
 
-@zoomtransition: 600ms;
+@zoomtransition: 350ms;
 
 #z {
        position: absolute;
@@ -331,17 +340,17 @@ a {
        left: 0;
 
        -moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
-       -webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       -webkit-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
        -o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
        -ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
        transition: transform @zoomtransition ease-out;
 
-       &.animate {
-               -moz-transition: all @zoomtransition ease-out;
-               -webkit-transition: all @zoomtransition ease-out;
-               -ms-transition: all @zoomtransition ease-out;
-               -o-transition: all @zoomtransition ease-out;
-               transition: all @zoomtransition ease-out;
+       &.notransition {
+               -moz-transition: none;
+               -webkit-transition: none;
+               -o-transition: none;
+               -ms-transition: none;
+               transition: none;
        }
 
        &.nozoom {
@@ -505,6 +514,7 @@ a {
 /* Header */
 header {
        position: relative;
+       z-index: 12;
 }
 
 #nav > a {