From 1305d1f8249283dbc68cffd75028486bcbb92c54 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Thu, 30 Jul 2015 14:16:55 +0000 Subject: [PATCH] Mini header implementation --- .../views/scripts/common/header.phtml | 11 ++- images/logo/Cubedesigners.svg | 66 +++++++++++++++ js/header.js | 84 +++++++++++++++++++ js/slideshow.js | 1 - less/header.less | 23 ++--- less/home.less | 10 +-- 6 files changed, 176 insertions(+), 19 deletions(-) create mode 100644 images/logo/Cubedesigners.svg create mode 100644 js/header.js diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml index 5f1deec..24223b3 100644 --- a/framework/application/views/scripts/common/header.phtml +++ b/framework/application/views/scripts/common/header.phtml @@ -1,5 +1,7 @@ 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(); } ?> +
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 ''; } else { diff --git a/images/logo/Cubedesigners.svg b/images/logo/Cubedesigners.svg new file mode 100644 index 0000000..61e78f0 --- /dev/null +++ b/images/logo/Cubedesigners.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/header.js b/js/header.js new file mode 100644 index 0000000..9f18337 --- /dev/null +++ b/js/header.js @@ -0,0 +1,84 @@ +registerLoader(load_header, true); +var htl = new TimelineMax(); +var formerScroll = -1; +var scrollUp = false; +var lastDirChange = 0; +var scrolledDistance = 0; +var headerPos = 0; + +function load_header() { + + // If we are on home, background is transparent + var hbg = 1; + if ($("#home-slideshow").length == 1) { + hbg = 0; + } + var h = $('header'); + // Background-color & height + htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'rgba(34,36,40,' + hbg + ')', height: 130}, + {backgroundColor: 'rgba(34,36,40,1)', height: 68}), 0); + // Navigation + var nav = $(h).find('.navigation'); + htl.add(TweenMax.fromTo(nav, 1, {marginTop: 57}, {marginTop: 24}), 0); + // Logo + var logo = $(h).find('.logo'); + htl.add(TweenMax.fromTo(logo, 1, {top: 36}, {top: 14}), 0); + // Resize cube logo (two parts) + var img = $(logo).find('img'); + htl.add(TweenMax.fromTo(img, 1, {height: 60}, {height: 40}), 0); + // Typo logo + var typo = $(logo).find('img.typo'); + htl.add(TweenMax.fromTo(typo, 1, {opacity: 1}, {opacity: 0}), 1); + + htl.stop(); + $(window).on('scroll', headerScroll); + 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(2, s / 130)); + 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/slideshow.js b/js/slideshow.js index 946a688..bf3254c 100644 --- 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 c8dda5f..7eaf2f1 100644 --- 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 2af0977..f157f3b 100644 --- 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 { -- 2.39.5