Mini header implementation

diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml
index 5f1deecdb8b99ae347fabc1fc9cb441218581192..24223b3a2d91577e186649ed43d14fef259ed35e 100644 (file)
--- a/framework/application/views/scripts/common/header.phtml
+++ b/framework/application/views/scripts/common/header.phtml
@@ -1,5 +1,7 @@
 <?php
-$this->headLink()->appendStylesheet('/less/header.less');
+$this->headScript()
+->addScriptAndStyle('header')
+->addGSAP();
 
 $homepage = $this->navigation()->getContainer()->findOneById($this->localeDefault() . '/1');
 $home = '/';
@@ -7,11 +9,16 @@ if (!is_null($homepage)) {
        $home = $homepage->getHref();
 }
 ?>
+<div id="headerPlaceholder"></div>
 <header>
        <div id="header" class="content">
                <?php
                /* LOGO */
-               echo $this->link($this->image('/images/logo.svg', "Cubedesigners Logo"), $home, array('class' => 'logo'));
+
+               $logos = $this->image('/images/logo/Cube.svg', "Cubedesigners Logo", -1, -1, array('class' => 'cube'));
+               $logos .= $this->image('/images/logo/Typo.svg', 'Cubedesigners', -1, -1, array('class' => 'typo'));
+
+               echo $this->link($logos, $home, array('class' => 'logo'));
                if ($this->currentPage && $this->currentPage->getTemplate() == 'home') {
                        echo '<div class="sublogo"><h1>' . $this->cmsValue('logoTitle') . '</h1><h2>' . $this->cmsValue('baseline') . '</h2></div>';
                } else {

diff --git a/images/logo/Cubedesigners.svg b/images/logo/Cubedesigners.svg
new file mode 100644 (file)
index 0000000..61e78f0
--- /dev/null
+++ b/images/logo/Cubedesigners.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<svg version="1.0" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"\r
+        y="0px" viewBox="-111.3 440.8 264.3 60.5" style="enable-background:new -111.3 440.8 264.3 60.5;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{fill:#FFFFFF;}\r
+       .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.5;stroke-miterlimit:10;}\r
+</style>\r
+<g>\r
+       <g>\r
+               <g>\r
+                       <g>\r
+                               <g>\r
+                                       <path class="st0" d="M-26,463.6v13.6c0,1.2,0.6,1.6,1.7,1.6c1.3,0,4.1-0.8,6-1.8v-13.5h3.1v17.8h-2.5l-0.3-1.6\r
+                                               c-2,1-5,1.9-7.2,1.9c-2.9,0-3.9-1.8-3.9-4.6v-13.6L-26,463.6L-26,463.6z"/>\r
+                                       <path class="st0" d="M2.8,475.1c0,4.1-1.4,6.7-7.6,6.7c-1.6,0-4.3-0.2-6.3-0.7v-24.7L-8,456v8.6c1.2-0.7,3.3-1.2,5.7-1.2\r
+                                               c3.7,0,5.2,2.2,5.2,5.6L2.8,475.1L2.8,475.1z M-8.1,478.9c1.2,0.2,2.4,0.3,3.5,0.3c3.6,0,4.3-1.4,4.3-3.8v-6.5\r
+                                               c0-1.8-0.8-2.7-2.9-2.7c-1.6,0-3.7,0.7-4.9,1.4L-8.1,478.9L-8.1,478.9z"/>\r
+                                       <path class="st0" d="M13,479.1c1.8,0,3.7-0.3,5.7-0.8l0.4,2.5c-1.7,0.6-4.1,1-6.3,1c-5.2,0-7.1-2.5-7.1-6.5v-5.3\r
+                                               c0-3.7,1.7-6.7,7-6.7c5.2,0,6.7,3.1,6.7,6.7v3.7H8.7v1.5C8.7,478,9.5,479.1,13,479.1z M8.7,471.2h7.6v-1.4\r
+                                               c0-2.5-0.8-3.9-3.7-3.9c-2.9,0-4,1.4-4,3.9L8.7,471.2L8.7,471.2z"/>\r
+                                       <path class="st0" d="M23.5,469c0-3.5,1.6-5.8,5.8-5.8c1.6,0,3.7,0.3,5.1,0.5v-7.4l3.1-0.4v25.6h-2.6l-0.3-1.6\r
+                                               c-1.4,1.2-3.5,2-5.9,2c-3.5,0-5.2-1.8-5.2-5.5L23.5,469L23.5,469z M34.4,466.5c-1.6-0.3-3.7-0.5-4.9-0.5c-2,0-2.9,1-2.9,3.1\r
+                                               v7.3c0,1.8,0.6,2.7,2.7,2.7c1.8,0,3.8-1,5-2.1V466.5z"/>\r
+                                       <path class="st0" d="M48.4,479.1c1.8,0,3.7-0.3,5.7-0.8l0.4,2.5c-1.7,0.6-4.1,1-6.3,1c-5.3,0-7.1-2.5-7.1-6.5v-5.3\r
+                                               c0-3.7,1.7-6.7,7-6.7c5.2,0,6.7,3.1,6.7,6.7v3.7H44.2v1.5C44.2,478,44.9,479.1,48.4,479.1z M44.2,471.2h7.6v-1.4\r
+                                               c0-2.5-0.8-3.9-3.8-3.9c-2.9,0-3.9,1.4-3.9,3.9V471.2z"/>\r
+                                       <path class="st0" d="M63.3,481.8c-1.8,0-4.2-0.4-5.7-1l0.4-2.4c1.6,0.4,3.5,0.7,5.1,0.7c2.8,0,3.3-0.5,3.3-2.4s-0.1-2.1-3.7-3\r
+                                               c-4.4-1.1-4.8-2-4.8-5.7c0-3.3,1.4-4.8,6.1-4.8c1.7,0,3.6,0.2,5,0.6l-0.2,2.5c-1.5-0.3-3.5-0.5-4.9-0.5c-2.7,0-3,0.6-3,2.2\r
+                                               c0,2,0.1,2.3,3.1,3.1c5.1,1.3,5.5,1.9,5.5,5.5C69.4,480.1,68.4,481.8,63.3,481.8z"/>\r
+                                       <path class="st0" d="M73.1,460.7v-4.4h3.1v4.4H73.1z M73.1,481.4v-17.9h3.1v17.8L73.1,481.4L73.1,481.4z"/>\r
+                                       <path class="st0" d="M108.2,481.4v-13.6c0-1.2-0.6-1.6-1.7-1.6c-1.3,0-4.1,0.8-6,1.8v13.5h-3.1v-17.9h2.5l0.3,1.6\r
+                                               c2-1,5-1.9,7.2-1.9c2.9,0,3.9,1.8,3.9,4.5v13.6L108.2,481.4L108.2,481.4z"/>\r
+                                       <path class="st0" d="M122,479.1c1.8,0,3.7-0.3,5.7-0.8l0.4,2.5c-1.7,0.6-4.1,1-6.3,1c-5.3,0-7.1-2.5-7.1-6.5v-5.3\r
+                                               c0-3.7,1.7-6.7,7-6.7c5.3,0,6.7,3.1,6.7,6.7v3.7h-10.6v1.5C117.8,478,118.6,479.1,122,479.1z M117.8,471.2h7.6v-1.4\r
+                                               c0-2.5-0.8-3.9-3.8-3.9c-2.9,0-3.9,1.4-3.9,3.9V471.2z"/>\r
+                                       <path class="st0" d="M140.1,466c-1.7,0.8-3.6,2-5.1,3.1v12.3h-3.1v-17.8h2.7l0.2,2.5c1.3-1,3.1-2.1,4.9-2.9L140.1,466z"/>\r
+                                       <path class="st0" d="M146.9,481.8c-1.8,0-4.2-0.4-5.7-1l0.4-2.4c1.6,0.4,3.5,0.7,5.1,0.7c2.8,0,3.3-0.5,3.3-2.4s-0.1-2.1-3.8-3\r
+                                               c-4.4-1.1-4.8-2-4.8-5.7c0-3.3,1.5-4.8,6.1-4.8c1.7,0,3.6,0.2,5,0.6l-0.2,2.5c-1.5-0.3-3.5-0.5-4.9-0.5c-2.7,0-3,0.6-3,2.2\r
+                                               c0,2,0.1,2.3,3,3.1c5.1,1.3,5.5,1.9,5.5,5.5C153,480.1,152,481.8,146.9,481.8z"/>\r
+                                       <path class="st0" d="M82,475.2c-1,0.7-1.7,1.8-1.7,3.1c0,1.6,0.8,3.1,3.5,3.3c2.1,0.2,2.7,0.3,4.7,0.4c2.1,0.2,2.7,0.4,2.7,1.9\r
+                                               c0,0.3,0,0.5-0.1,0.7h2.9c0-0.3,0-0.5,0-0.8c0-2.7-1.2-4-4.4-4.3c-2.2-0.2-3.2-0.3-5-0.5c-0.8-0.1-1.2-0.3-1.2-1\r
+                                               c0-0.7,0.7-1.4,1.3-1.9c0.5,0.1,1.2,0.1,1.8,0.1c4.6,0,7-2.2,7-6.1v-0.8c-0.1-1.4-0.3-2.7-1-3.5l2.1-0.4v-1.8h-5.1\r
+                                               c-0.8-0.3-2.1-0.3-3-0.3c-5.1,0-7,2.2-7,6.1v0.8C79.5,472.5,80.3,474.3,82,475.2z M82.4,469.4c0-2.7,1.1-3.6,4.1-3.6\r
+                                               c2.9,0,4.1,1,4.1,3.6v0.7c0,2.3-1.2,3.5-4.1,3.5s-4.1-0.8-4.1-3.5V469.4z"/>\r
+                               </g>\r
+                       </g>\r
+               </g>\r
+               <g>\r
+                       <path class="st0" d="M-43.8,475.3v-5.7c0-4.1,1.6-6.5,7.2-6.5c1.6,0,3.3,0.3,4.3,0.5l-0.3,2.6c-1.4-0.3-2.7-0.4-4-0.4\r
+                               c-3.1,0-4.1,0.9-4.1,3.7v5.9c0,2.8,1,3.7,4.1,3.7c1.2,0,2.5-0.1,4-0.4l0.3,2.6c-0.9,0.3-2.7,0.5-4.3,0.5\r
+                               C-42.4,481.8-43.8,479.4-43.8,475.3z"/>\r
+               </g>\r
+       </g>\r
+       <g>\r
+               <path class="st1" d="M-86.9,441.3c-1.2,0.6-19.6,11-22.5,12.7c-1.4,0.7-1.6,1.8-1.6,3.3c0,1,0,24.8,0,27.9c0,1.8,0.9,2.2,1.6,2.7\r
+                       c4.6,2.9,18.5,11.4,20.7,12.6c2.6,1.6,5.5-0.5,4-3.1c-1.5-2.7-10.1-19.1-10.1-19.1c4.1-2.4,8-4.7,9.1-5.5c2.3-1.4,2.5-1.5,2.5-4.6\r
+                       c0-2,0-20.3,0-24.3C-83.1,441.5-85.2,440.4-86.9,441.3z M-86.9,498.3l-0.4,0.3l-20.3-12.5c0,0,5.6-3.7,10.7-6.8L-86.9,498.3z\r
+                        M-108.7,483.9v-27.5l22.8-12.9l0.4,0.3v26L-108.7,483.9z"/>\r
+               <path class="st1" d="M-77.8,500.7c1.2-0.6,19.6-11,22.5-12.7c1.4-0.7,1.6-1.8,1.6-3.3c0-1,0-24.8,0-27.9c0-1.8-0.9-2.2-1.6-2.7\r
+                       c-4.5-2.9-18.5-11.4-20.6-12.6c-2.6-1.6-5.5,0.5-4,3.1c1.4,2.8,10,19.1,10,19.1c-4.1,2.4-8,4.7-9.1,5.5c-2.3,1.4-2.5,1.5-2.5,4.6\r
+                       c0,2,0,20.3,0,24.3C-81.6,500.5-79.6,501.6-77.8,500.7z M-77.9,443.7l0.4-0.3l20.2,12.5c0,0-5.6,3.7-10.7,6.8L-77.9,443.7z\r
+                        M-56,458.1v27.5l-22.8,12.9l-0.4-0.3v-25.9L-56,458.1z"/>\r
+       </g>\r
+</g>\r
+</svg>\r

diff --git a/js/header.js b/js/header.js
new file mode 100644 (file)
index 0000000..9f18337
--- /dev/null
+++ b/js/header.js
@@ -0,0 +1,84 @@
+registerLoader(load_header, true);\r
+var htl = new TimelineMax();\r
+var formerScroll = -1;\r
+var scrollUp = false;\r
+var lastDirChange = 0;\r
+var scrolledDistance = 0;\r
+var headerPos = 0;\r
+\r
+function load_header() {\r
+\r
+    // If we are on home, background is transparent\r
+    var hbg = 1;\r
+    if ($("#home-slideshow").length == 1) {\r
+        hbg = 0;\r
+    }\r
+    var h = $('header');\r
+    // Background-color & height\r
+    htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'rgba(34,36,40,' + hbg + ')', height: 130},\r
+        {backgroundColor: 'rgba(34,36,40,1)', height: 68}), 0);\r
+    // Navigation\r
+    var nav = $(h).find('.navigation');\r
+    htl.add(TweenMax.fromTo(nav, 1, {marginTop: 57}, {marginTop: 24}), 0);\r
+    // Logo\r
+    var logo = $(h).find('.logo');\r
+    htl.add(TweenMax.fromTo(logo, 1, {top: 36}, {top: 14}), 0);\r
+    // Resize cube logo (two parts)\r
+    var img = $(logo).find('img');\r
+    htl.add(TweenMax.fromTo(img, 1, {height: 60}, {height: 40}), 0);\r
+    // Typo logo\r
+    var typo = $(logo).find('img.typo');\r
+    htl.add(TweenMax.fromTo(typo, 1, {opacity: 1}, {opacity: 0}), 1);\r
+\r
+    htl.stop();\r
+    $(window).on('scroll', headerScroll);\r
+    headerScroll();\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(2, s / 130));\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/slideshow.js b/js/slideshow.js
index 946a688d5e57f1d7d5df83dbc99fbe075b94e184..bf3254c386e5f290d93612622ae8059b4f930030 100644 (file)
--- a/js/slideshow.js
+++ b/js/slideshow.js
@@ -33,7 +33,6 @@ function loadCarrousel() {
                         });
 
                         var ml = (ww - 1600 * scale) / 2;
-                        fb(ml);
 
                         $(this).find('.masque .imgholder').css('marginLeft', ml);
                         $(this).find(".masque .imgholder img").css({height: ih, width: 'auto'});

diff --git a/less/header.less b/less/header.less
index c8dda5fdf4ff18541b31a0ed8065b58bf3d2f94c..7eaf2f15ae9200379e352c839df2b5f0e66a4cdc 100644 (file)
--- a/less/header.less
+++ b/less/header.less
@@ -5,6 +5,8 @@
 header {
        height: 130px;
        background-color: #222428;
+       position: relative;
+       z-index: 4;
 
        ul {
                text-transform: uppercase;
@@ -44,19 +46,10 @@ header {
        }
 
        .logo {
-
                position: absolute;
                top: 36px;
-
-               &:hover {
-                       .svg {
-                               cursor: pointer;
-                               svg {
-                                       #Background {
-                                               fill: #ff0000 !important;
-                                       }
-                               }
-                       }
+               img {
+                       width: auto;
                }
        }
 
@@ -74,6 +67,14 @@ header {
                        }
                }
        }
+
+       position: fixed;
+       top: 0px;
+       width: 100%;
+}
+
+#headerPlaceholder {
+       height: 130px;
 }
 
 .nav-icon {

diff --git a/less/home.less b/less/home.less
index 2af0977b993d2c035e336d18e455256727126fca..f157f3b83f3d69bb0bb2fae91dabf377bcb8cf5a 100644 (file)
--- a/less/home.less
+++ b/less/home.less
@@ -1,9 +1,9 @@
 @import "00-constants";
 
-header {
-       background-color: transparent !important;
-       position: relative;
-       z-index: 4;
+
+
+#headerPlaceholder {
+       display: none;
 }
 
 /* Home Title */
@@ -28,7 +28,7 @@ nav.active[role="navigation"] {
 /* Home Slideshow */
 #home-slideshow {
        overflow: visible;
-       margin-top: -130px;
+       //margin-top: -130px;
        .slides-holder {
                overflow: visible;
                .slides {