done #480 @4

diff --git a/framework/application/views/helpers/HeaderLogo.php b/framework/application/views/helpers/HeaderLogo.php
index acb6d324460e5de23084abcaa04fabf51ad37955..84f5d8c9cb101957ad79107f92f1fe102c672b04 100644 (file)
--- a/framework/application/views/helpers/HeaderLogo.php
+++ b/framework/application/views/helpers/HeaderLogo.php
@@ -5,11 +5,11 @@ class Fluidbook_View_Helper_HeaderLogo extends CubeIT_View_Helper_Abstract {
         * @return string\r
         */\r
        public function headerLogo() {\r
-               \r
-               \r
+\r
+\r
                $logos = $this->image('/images/logo/leave.svg', "", -1, -1, array('class' => 'leave'));\r
-               $logos .= $this->image('/images/logo/text-white.svg', 'Fluidbook', -1, -1, array('class' => 'text-white'));\r
-               $logos .= $this->image('/images/logo/text-dark.svg', '', -1, -1, array('class' => 'text-dark'));\r
+               $logos .= $this->htmlElement($this->image('/images/logo/text-white.svg', 'Fluidbook', -1, -1, array('class' => 'text-white')) . $this->image('/images/logo/text-dark.svg', '', -1, -1, array('class' => 'text-dark')), 'div', array('class' => 'text'));\r
+\r
 \r
                return $this->link($logos, '/', array('class' => 'logo'));\r
        }\r

diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml
index 6257adb2a03480cfc6df83b97a81c034d9fbe4b1..45bbca99d6617e81edc5d58b5101be7466ebe317 100644 (file)
--- a/framework/application/views/scripts/common/header.phtml
+++ b/framework/application/views/scripts/common/header.phtml
@@ -1,4 +1,6 @@
 <?php\r
+/** @var $this CubeIT_View */\r
+\r
 $this->headScript()\r
        ->addScriptAndStyle('101-header')\r
        ->addGSAP();\r
@@ -8,15 +10,11 @@ $home = '/';
 if (!is_null($homepage)) {\r
        $home = $homepage->getHref();\r
 }\r
-?>\r
-<header class="light">\r
-       <div id="header" class="content">\r
-               <?php\r
-               echo $this->headerLogo();\r
-               echo $this->headerNav();\r
-               echo $this->headerContactNav();\r
 \r
-               echo '<div class="nav-icon"><div></div></div>';\r
-               ?>\r
-       </div>\r
-</header>
\ No newline at end of file
+$header = $this->headerLogo();\r
+$header .= $this->headerNav();\r
+$header .= $this->headerContactNav();\r
+$header .= '<div class="nav-icon"><div></div></div>';\r
+$header = $this->htmlElement($header, 'div', array('id' => 'header', 'class' => 'content'));\r
+\r
+echo $this->htmlElement($header, 'header', array('class' => $this->headerClass));
\ No newline at end of file

diff --git a/js/101-header.js b/js/101-header.js
index 038b1c5b1eff72567bed7c4b5072dd5dc3b5fe59..f88931db41bad4f3cf05c868765dd05ac38e85c9 100644 (file)
--- a/js/101-header.js
+++ b/js/101-header.js
@@ -1,15 +1,90 @@
+var formerScroll = -1;\r
+var scrollUp = false;\r
+var lastDirChange = 0;\r
+var scrolledDistance = 0;\r
+var headerPos = 0;\r
+var htl;\r
+\r
 registerLoader(load_header, true);\r
 \r
 function load_header() {\r
+    var h = $('header');\r
+\r
+    htl = new TimelineMax();\r
+    // Background-color & height\r
+    htl.add(TweenMax.fromTo(h, 1.5, {height: 90}, {height: 56}), 0);\r
+    htl.add(TweenMax.fromTo($(h).find('#header'), 1.5, {height: 90}, {height: 56}), 0);\r
+    // Logo\r
+    var logo = $(h).find('.logo');\r
+    htl.add(TweenMax.fromTo($(logo), 1.5, {top: 35}, {top: 12}), 0);\r
+    // Navigation\r
+    var nav = $(h).find('#menu');\r
+    htl.add(TweenMax.fromTo(nav, 1.5, {top: 57}, {top: 24}), 0);\r
+    //Typo logo\r
+    htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {opacity: 1}, {opacity: 0}), 1.5);\r
+    // Menu position\r
+    htl.add(TweenMax.fromTo(nav, 1, {left: '50%'}, {left: 312}), 2);\r
+    htl.stop();\r
+\r
     $(window).on('cubeitresize', resizeHeader);\r
     resizeHeader();\r
 \r
+    $(window).on('scroll', headerScroll);\r
+    headerScroll();\r
+\r
 }\r
 \r
 function resizeHeader() {\r
-    var ww = $(window).width();\r
-    var wh = $(window).height();\r
-    var nav = $("header nav#menu");\r
-    var menuLeft = ($("#header").outerWidth() - $(nav).outerWidth()) / 2;\r
-    $(nav).data('centeroffset', menuLeft).css('left', menuLeft);\r
+\r
+\r
+    headerScroll();\r
 }\r
+\r
+\r
+function headerScroll() {\r
+    var s = $(window).scrollTop();\r
+    var h = $('header');\r
+\r
+    // If no move since last call, nothing to do\r
+    if (s == formerScroll) {\r
+        return;\r
+    }\r
+\r
+    var goingUp = true;\r
+    if (formerScroll < s) {\r
+        goingUp = false;\r
+    }\r
+\r
+    var headerHeight = $("header").outerHeight();\r
+    if (scrollUp != goingUp) {\r
+        lastDirChange = s;\r
+        scrolledDistance = 0;\r
+        headerPos = parseInt($(h).css('top'));\r
+    } else {\r
+        scrolledDistance = Math.abs(lastDirChange - s);\r
+    }\r
+\r
+    var progress = Math.max(0, Math.min(3, s / 300));\r
+    htl.time(progress);\r
+\r
+    var htop;\r
+    if (goingUp) {\r
+        // The user is scrolling up\r
+        htop = scrolledDistance + headerPos;\r
+    } else {\r
+        // The user is scrolling down\r
+        if (headerPos > -headerHeight && headerPos < 0) {\r
+            // header move began where header was half visible\r
+            // So we immediately retract the header from his current position\r
+            htop = -scrolledDistance + headerPos;\r
+        } else {\r
+            // We retract the header when user scrolled down of 400px\r
+            htop = (400 - scrolledDistance) - headerHeight;\r
+        }\r
+    }\r
+    // Normalize top value\r
+    $("header").css('top', Math.max(-headerHeight, Math.min(0, htop)));\r
+    // Update\r
+    formerScroll = s;\r
+    scrollUp = goingUp;\r
+}
\ No newline at end of file

diff --git a/js/210-home.js b/js/210-home.js
index 11aeabb11f5bb9bce0ba0f3f673a424b3696175c..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
--- a/js/210-home.js
+++ b/js/210-home.js
@@ -1,3 +0,0 @@
-/**\r
- * Created by Vincent on 22/06/2016.\r
- */\r

diff --git a/less/101-header.less b/less/101-header.less
index 5876552d2c8d23196fa87876c929465a81cf18cb..7327b6455ce1d9df4c56a50a36902cf7c51c0e98 100644 (file)
--- a/less/101-header.less
+++ b/less/101-header.less
@@ -39,6 +39,9 @@ header {
        nav#menu {\r
                position: relative;\r
                top: 57px;\r
+               left:50%;\r
+               width: 800px;\r
+               margin-left: -400px;\r
 \r
                display: inline-block;\r
                text-align: center;\r