Update home slideshow to be 100% height and add animated arrow to scroll. Update...

diff --git a/framework/application/views/helpers/ContactInfos.php b/framework/application/views/helpers/ContactInfos.php
index 3e9b09bb280f28242d26152665dc322552f224c7..2ff8d08d88f15349b5a5e110f858dfd35320f472 100644 (file)
--- 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.='</div>';\r
 \r
             $res.='<div class="numeros">';\r
-            $res.='<p itemprop="telephone">' . __('Tel') . ' ' . $bureau['coordonnees']['tel'] . '</p>';\r
-            $res.='<p itemprop="faxNumber">' . __('Fax') . ' ' . $bureau['coordonnees']['fax'] . '</p>';\r
+            $res.='<p itemprop="telephone">' . __('Tel') . ' ' . $this->view->linkPhone($bureau['coordonnees']['tel']) . '</p>';\r
+            //$res.='<p itemprop="faxNumber">' . __('Fax') . ' ' . $bureau['coordonnees']['fax'] . '</p>';\r
             $res.='</div>';\r
 \r
             $res.='</div>'; // .inner\r

diff --git a/framework/application/views/helpers/HomeSlideshow.php b/framework/application/views/helpers/HomeSlideshow.php
index dcfe2c78f2fe492d4d7a9e897e9ad4a90427f91f..862e71b521469008a6844eb0af61c3f3422422fe 100644 (file)
--- 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 .= '</div>';
+
+        $res .= '<div class="scrollarrow"><a href="#agency"></a></div>';
+
                $res .= '</div>';
                $res .= '</section>';
 

diff --git a/js/slideshow.js b/js/slideshow.js
index bf3254c386e5f290d93612622ae8059b4f930030..76940366cd38c5930c49aca834b04be7afb221fe 100644 (file)
--- 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 b44d3c180f231f05388f0f7ac6fb8bcc1ec305c8..c54c5c080d0c42eefe2225d061ac482883d54fea 100644 (file)
--- 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 423722aac26fcf762bc24285d724800527129c5f..e204586572d89c05762b630cd783a51fe9850524 100644 (file)
--- 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 fc83aceeb720ab17ad6177c4908bef01390ef6af..7915f54a0bed4ef133894ac1f732c72c5743c195 100644 (file)
--- 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 {