From bc709e9b624849ee52c5b742e15d260b8fad9f74 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Fri, 24 Jun 2016 13:12:13 +0000 Subject: [PATCH] done #480 @4 --- .../application/views/helpers/HeaderLogo.php | 8 +- .../views/scripts/common/header.phtml | 20 ++--- js/101-header.js | 85 +++++++++++++++++-- js/210-home.js | 3 - less/101-header.less | 3 + 5 files changed, 96 insertions(+), 23 deletions(-) diff --git a/framework/application/views/helpers/HeaderLogo.php b/framework/application/views/helpers/HeaderLogo.php index acb6d32..84f5d8c 100644 --- 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 */ public function headerLogo() { - - + + $logos = $this->image('/images/logo/leave.svg', "", -1, -1, array('class' => 'leave')); - $logos .= $this->image('/images/logo/text-white.svg', 'Fluidbook', -1, -1, array('class' => 'text-white')); - $logos .= $this->image('/images/logo/text-dark.svg', '', -1, -1, array('class' => 'text-dark')); + $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')); + return $this->link($logos, '/', array('class' => 'logo')); } diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml index 6257adb..45bbca9 100644 --- a/framework/application/views/scripts/common/header.phtml +++ b/framework/application/views/scripts/common/header.phtml @@ -1,4 +1,6 @@ headScript() ->addScriptAndStyle('101-header') ->addGSAP(); @@ -8,15 +10,11 @@ $home = '/'; if (!is_null($homepage)) { $home = $homepage->getHref(); } -?> -
-
- headerLogo(); - echo $this->headerNav(); - echo $this->headerContactNav(); - echo '
'; - ?> -
-
\ No newline at end of file +$header = $this->headerLogo(); +$header .= $this->headerNav(); +$header .= $this->headerContactNav(); +$header .= '
'; +$header = $this->htmlElement($header, 'div', array('id' => 'header', 'class' => 'content')); + +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 038b1c5..f88931d 100644 --- a/js/101-header.js +++ b/js/101-header.js @@ -1,15 +1,90 @@ +var formerScroll = -1; +var scrollUp = false; +var lastDirChange = 0; +var scrolledDistance = 0; +var headerPos = 0; +var htl; + registerLoader(load_header, true); function load_header() { + var h = $('header'); + + htl = new TimelineMax(); + // Background-color & height + htl.add(TweenMax.fromTo(h, 1.5, {height: 90}, {height: 56}), 0); + htl.add(TweenMax.fromTo($(h).find('#header'), 1.5, {height: 90}, {height: 56}), 0); + // Logo + var logo = $(h).find('.logo'); + htl.add(TweenMax.fromTo($(logo), 1.5, {top: 35}, {top: 12}), 0); + // Navigation + var nav = $(h).find('#menu'); + htl.add(TweenMax.fromTo(nav, 1.5, {top: 57}, {top: 24}), 0); + //Typo logo + htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {opacity: 1}, {opacity: 0}), 1.5); + // Menu position + htl.add(TweenMax.fromTo(nav, 1, {left: '50%'}, {left: 312}), 2); + htl.stop(); + $(window).on('cubeitresize', resizeHeader); resizeHeader(); + $(window).on('scroll', headerScroll); + headerScroll(); + } function resizeHeader() { - var ww = $(window).width(); - var wh = $(window).height(); - var nav = $("header nav#menu"); - var menuLeft = ($("#header").outerWidth() - $(nav).outerWidth()) / 2; - $(nav).data('centeroffset', menuLeft).css('left', menuLeft); + + + headerScroll(); } + + +function headerScroll() { + var s = $(window).scrollTop(); + var h = $('header'); + + // If no move since last call, nothing to do + if (s == formerScroll) { + return; + } + + var goingUp = true; + if (formerScroll < s) { + goingUp = false; + } + + var headerHeight = $("header").outerHeight(); + if (scrollUp != goingUp) { + lastDirChange = s; + scrolledDistance = 0; + headerPos = parseInt($(h).css('top')); + } else { + scrolledDistance = Math.abs(lastDirChange - s); + } + + var progress = Math.max(0, Math.min(3, s / 300)); + htl.time(progress); + + var htop; + if (goingUp) { + // The user is scrolling up + htop = scrolledDistance + headerPos; + } else { + // The user is scrolling down + if (headerPos > -headerHeight && headerPos < 0) { + // header move began where header was half visible + // So we immediately retract the header from his current position + htop = -scrolledDistance + headerPos; + } else { + // We retract the header when user scrolled down of 400px + htop = (400 - scrolledDistance) - headerHeight; + } + } + // Normalize top value + $("header").css('top', Math.max(-headerHeight, Math.min(0, htop))); + // Update + formerScroll = s; + scrollUp = goingUp; +} \ No newline at end of file diff --git a/js/210-home.js b/js/210-home.js index 11aeabb..e69de29 100644 --- a/js/210-home.js +++ b/js/210-home.js @@ -1,3 +0,0 @@ -/** - * Created by Vincent on 22/06/2016. - */ diff --git a/less/101-header.less b/less/101-header.less index 5876552..7327b64 100644 --- a/less/101-header.less +++ b/less/101-header.less @@ -39,6 +39,9 @@ header { nav#menu { position: relative; top: 57px; + left:50%; + width: 800px; + margin-left: -400px; display: inline-block; text-align: center; -- 2.39.5