From: stephen@cubedesigners.com Date: Fri, 28 Aug 2015 16:47:29 +0000 (+0000) Subject: Update home slideshow to be 100% height and add animated arrow to scroll. Update... X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f7a1b8bc87247c1d5a32c74dd2938a595c22a8e6;p=cubedesigners-v7.git Update home slideshow to be 100% height and add animated arrow to scroll. Update styling on contact page and remove fax numbers. --- diff --git a/framework/application/views/helpers/ContactInfos.php b/framework/application/views/helpers/ContactInfos.php index 3e9b09b..2ff8d08 100644 --- a/framework/application/views/helpers/ContactInfos.php +++ b/framework/application/views/helpers/ContactInfos.php @@ -27,8 +27,8 @@ class Cubedesigners_View_Helper_ContactInfos extends Zend_View_Helper_Abstract { $res.=''; $res.='
'; - $res.='

' . __('Tel') . ' ' . $bureau['coordonnees']['tel'] . '

'; - $res.='

' . __('Fax') . ' ' . $bureau['coordonnees']['fax'] . '

'; + $res.='

' . __('Tel') . ' ' . $this->view->linkPhone($bureau['coordonnees']['tel']) . '

'; + //$res.='

' . __('Fax') . ' ' . $bureau['coordonnees']['fax'] . '

'; $res.='
'; $res.=''; // .inner diff --git a/framework/application/views/helpers/HomeSlideshow.php b/framework/application/views/helpers/HomeSlideshow.php index dcfe2c7..862e71b 100644 --- a/framework/application/views/helpers/HomeSlideshow.php +++ b/framework/application/views/helpers/HomeSlideshow.php @@ -5,6 +5,7 @@ class Cubedesigners_View_Helper_HomeSlideshow extends CubeIT_View_Helper_Abstrac public function homeSlideshow($slides) { $this->headScript()->addSlideshow(); $this->headScript()->addGSAP(); + $this->headScript()->addJQueryLocalScroll(); $this->addScriptAndStyle('carrousel'); $slides = $slides['slides']; @@ -23,18 +24,26 @@ class Cubedesigners_View_Helper_HomeSlideshow extends CubeIT_View_Helper_Abstrac $time = $slide['time'] * 1000; } - $attributes['style'] = 'background-image:url("' . CubeIT_View_Helper_ImageCms::getPath($slide['image']) . '");'; - $attributes['data-time'] = $time; - $attributes['class'] = 'slide'; - $link = $slide['lien']; - $link['label'] = $this->markupDotclear($slide['legende']); - $s .= $this->view->htmlElement($this->view->linkCMS($link), 'div', $attributes); + // Slide image is in a separate absolutely positioned div to allow it to be animated with the scale function + $image_attributes['style'] = 'background-image:url("' . CubeIT_View_Helper_ImageCms::getPath($slide['image']) . '");'; + $image_attributes['class'] = 'slide-bg'; + $slide_image = $this->view->htmlElement('', 'span', $image_attributes); // making it a span because of existing CSS that affects all divs in this context + + $slide_attributes['data-time'] = $time; + $slide_attributes['class'] = 'slide'; + $link = $slide['lien']; + + $link['label'] = $slide_image . $this->markupDotclear($slide['legende']); + $s .= $this->view->htmlElement($this->view->linkCMS($link), 'div', $slide_attributes); } $options = array('arrows' => false, 'arrowspermanent' => false, 'autoMode' => true, 'transitionType' => 'slide', 'baseHeight' => 836, 'responsive' => true); $res .= $this->htmlElement($s, 'div', array('class' => 'slides slideshow', 'data-options' => $options)); $res .= ''; + + $res .= '
'; + $res .= ''; $res .= ''; diff --git a/js/slideshow.js b/js/slideshow.js index bf3254c..7694036 100644 --- a/js/slideshow.js +++ b/js/slideshow.js @@ -11,7 +11,8 @@ function loadCarrousel() { var slideshowBaseWidth = 1024; var sw = Math.min(ww, slideshowBaseWidth); - $(".slideshowcontinuous,.slideshow").each(function () { + // Agency page slideshow + $(".slideshowcontinuous").each(function () { var baseHeight = parseInt($(this).data('options').baseHeight); var ratio = slideshowBaseWidth / baseHeight; var h = sw / ratio; @@ -20,24 +21,24 @@ function loadCarrousel() { try { $(this).data('slideshow').setHeight(h); + } catch (err) { + + } + }); - if ($(this).parents('#home-slideshow').length == 1) { - $(this).find('.slide').each(function () { - var masque = $(this).find('.masque'); - var overlap = parseInt($(masque).data('overlap')); + // Homepage slideshow + $(".slideshow").each(function () { + var baseHeight = parseInt($(this).data('options').baseHeight); + var ratio = slideshowBaseWidth / baseHeight; + var h = sw / ratio; + var scale = h / baseHeight; - var ih = (baseHeight + overlap) * scale; - $(this).find(".masque").css({ - height: ih, - top: -1 * overlap * scale - }); + var windowHeight = $(window).height(); + var newH = Math.round(windowHeight * 1); // could be 0.8 for 80%... - var ml = (ww - 1600 * scale) / 2; - $(this).find('.masque .imgholder').css('marginLeft', ml); - $(this).find(".masque .imgholder img").css({height: ih, width: 'auto'}); - }); - } + try { + $(this).data('slideshow').setHeight(newH); } catch (err) { } @@ -45,5 +46,16 @@ function loadCarrousel() { }); + var e = $(".scrollarrow a"); + var tl = new TimelineMax({repeat: -1, repeatDelay: 1}); + tl.add(TweenMax.to(e, 1, {ease: Strong.easeOut, backgroundPosition: "50% 35px", opacity: 1})); + tl.add(TweenMax.to(e, 1, {ease: Strong.easeIn, backgroundPosition: "50% 70px", opacity: 0, delay: 1})); + + $(document).localScroll({ + axis: 'y', + duration: 500, + hash: false + }); + } diff --git a/less/common.less b/less/common.less index b44d3c1..c54c5c0 100644 --- a/less/common.less +++ b/less/common.less @@ -125,7 +125,7 @@ a { .dotclear { a { - color: #1b1b1b; + //color: #1b1b1b; text-decoration: underline; } diff --git a/less/contact.less b/less/contact.less index 423722a..e204586 100644 --- a/less/contact.less +++ b/less/contact.less @@ -78,7 +78,7 @@ } .titre { - padding-bottom: 20px; + padding-bottom: 25px; font-size: 32px; } @@ -87,7 +87,7 @@ background-repeat: no-repeat; background-position: 0px 0px; padding-left: 60px; - padding-bottom: 50px; + padding-bottom: 15px; } .numeros { @@ -96,6 +96,10 @@ background-position: 0px 0px; padding-left: 60px; padding-bottom: 50px; + + p { + line-height: 49px; // Height of the icon + } } } diff --git a/less/home.less b/less/home.less index fc83ace..7915f54 100644 --- a/less/home.less +++ b/less/home.less @@ -26,6 +26,30 @@ nav.active[role="navigation"] { } /* Home Slideshow */ + +//@keyframes bg-anim { +// 0% { +// -moz-transform: scale(1); +// -webkit-transform: scale(1); +// transform: scale(1); +// } +// 50% { +// -moz-transform: scale(1.2); +// -webkit-transform: scale(1.2); +// transform: scale(1.2); +// } +//} +//@-webkit-keyframes bg-anim { +// 0% { +// -webkit-transform: scale(1); +// transform: scale(1); +// } +// 50% { +// -webkit-transform: scale(1.2); +// transform: scale(1.2); +// } +//} + #home-slideshow { overflow: visible; //margin-top: -130px; @@ -34,10 +58,24 @@ nav.active[role="navigation"] { .slides { .slideshowmixin(); .slide { - background-repeat: no-repeat; - background-size: cover; - background-position: 50% 0; // background-blend-mode: multiply; + overflow: hidden; + .slide-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-repeat: no-repeat; + background-position: 50% 0; +// -moz-animation: bg-anim 15s linear 1s infinite; +// -webkit-animation: bg-anim 15s linear 1s infinite; +// transform: scale(1); + display: block; + z-index: -2; + } + > div { text-align: center; @@ -78,6 +116,25 @@ nav.active[role="navigation"] { } } } + + .scrollarrow { + position: absolute; + bottom: 10px; + left: 0; + width: 100%; + height: 105px; + margin: 5px 0 0 0; + z-index: 11; + + a { + display: block; + height: 105px; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iSXNvbGF0aW9uX01vZGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB3aWR0aD0iNjcuMjE5cHgiIGhlaWdodD0iMzVweCIgdmlld0JveD0iMCAwIDY3LjIxOSAzNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjcuMjE5IDM1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMy42NzIsMzVjLTAuMzQxLDAtMC42ODEtMC4xMjktMC45NC0wLjM4OUwwLjM4OSwyLjI2OGMtMC41MTktMC41MTktMC41MTktMS4zNiwwLTEuODc5DQoJczEuMzYtMC41MTksMS44NzksMGwzMS40MDQsMzEuNDAzbDMxLjI4LTMxLjI4YzAuNTE5LTAuNTE5LDEuMzYtMC41MTksMS44NzksMGMwLjUxOCwwLjUxOSwwLjUxOCwxLjM2LDAsMS44NzlMMzQuNjEsMzQuNjExDQoJQzM0LjM1MSwzNC44NzEsMzQuMDExLDM1LDMzLjY3MiwzNXoiLz4NCjwvc3ZnPg0K'); + background-position: 50% -10px; + opacity: 0; + } + } + } #casestudies {