$c = '<div class="img-wrapper" style="'. $hover_style .'">';
$c.= $image;
+ $c.= '<span class="arrows-animation animating"></span>';
$c.= '</div>';
$c.= '<h2>' . $s->titre . '</h2>';
//$c.='<h3>' . $s->description . '</h3>';
$res .= '</article>';
}
- $res .= $this->linkInternal(__('Voir plus d\'actualité') . $this->view->linkArrow(), 'news', array('class' => 'arrow-link'));
+ $res .= $this->linkInternal($this->view->linkArrow(__('Voir plus d\'actualité')), 'news', array('class' => 'animated-arrow'));
$res .= '</section>';
$res .= '<div class="geoloc">';
$event = array('category' => 'map', 'action' => 'click', 'label' => $bureau['coordonnees']['ville']);
- $res .= $this->view->linkGeo(__("Voir le plan") . $this->view->linkArrow(), $bureau['coordonnees']['adresse'] . ',' . $bureau['coordonnees']['ville'] . ',' . Zend_Locale::getTranslation($bureau['coordonnees']['pays'], 'territory'), array('class' => 'arrow-link', 'data-event' => $event));
+ $res .= $this->view->linkGeo($this->view->linkArrow(__("Voir le plan")), $bureau['coordonnees']['adresse'] . ',' . $bureau['coordonnees']['ville'] . ',' . Zend_Locale::getTranslation($bureau['coordonnees']['pays'], 'territory'), array('class' => 'animated-arrow', 'data-event' => $event));
$res .= '</div>';
$res .= '</div>';
class Cubedesigners_View_Helper_LinkArrow extends CubeIT_View_Helper_Abstract {
- public function linkArrow() {
-
- return '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 25 10.6" style="enable-background:new 0 0 25 10.6;" xml:space="preserve">
- <path d="M25,5.5C25,5.4,25,5.2,25,5.1c0-0.1-0.1-0.1-0.1-0.2l-4.8-4.8c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l3.9,3.9H0.5
- C0.2,4.8,0,5,0,5.3s0.2,0.5,0.5,0.5h22.8l-3.9,3.9c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l4.8-4.8
- C24.9,5.6,24.9,5.6,25,5.5z"/>
- </svg>';
+ public function linkArrow($text = '') {
+
+ // HTML structure for link content. This doesn't include the link itself
+ // because it's more flexible to be able to provide the link contents to
+ // existing link helpers
+ //
+ // Based on: https://codepen.io/nicoencarnacion/pen/XpaRQV
+
+ $this->headScript()->addScriptAndStyle('link-arrow');
+
+ return '<span class="the-arrow -left">
+ <span class="shaft"></span>
+ </span>
+ <span class="main">
+ <span class="text">'. $text .'</span>
+ <span class="the-arrow -right">
+ <span class="shaft"></span>
+ </span>
+ </span>';
}
}
<?php echo $this->caseStudiesGrid(3, $this->studie->id); ?>
<p class="casestudies-archive-link">
- <?php echo $this->linkInternal(__('Voir tous les projets') . $this->linkArrow(), 'casestudies', array('class' => 'arrow-link')); ?>
+ <?php echo $this->linkInternal($this->linkArrow(__('Voir tous les projets')), 'casestudies', array('class' => 'animated-arrow')); ?>
</p>
</div>
</div>
<p class="casestudies-archive-link">
- <?php echo $this->linkInternal(__('Voir les archives') . $this->linkArrow(), 'Portfolio', array('class' => 'arrow-link')); ?>
+ <?php echo $this->linkInternal($this->linkArrow(__('Voir les archives')), 'Portfolio', array('class' => 'animated-arrow')); ?>
</p>
</div>
width: 100%;
height: 100%;
background-color: currentColor; // Inherit from .img-wrapper
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAMAAADUivDaAAABp1BMVEUAAAD2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH5x1H967/84Z/////+9d/714D5zGH3sxH85q/++u/98M/4vTH4wkH3uCH60nH7249RxKUJAAAAfHRSTlMAIlmJsM/k8/LOrocCRJvjmEIeiOGGHCWc+ZkjDI77+lLlTgqdCB/QzBsy598mOO/qM/DtLejJBp6PU/5MDQ+NJIuCBd4BSj6R1Bdainmizcfg3ezx+NfGr6FRIRXSmkg76dx+GSDiTwnF2xYuKMsYn/aTHYUDQ5dBetmgCFBy9QAAArJJREFUeF6l1Plb01gYxfFTwKgD0gpYiaAFR8UqKhRwwKogBXVQlEVU3HBlAGdFcT3dV5Y/2oY+eabc5N4m8fN7v3lv3txCyldX37BP208e0A7+0ljngztNh5r9FPgDh5vgVEurRlttR4Jw4mi7Tin9WAdq6Tx+gkqh+k4odXWzpraTkPv1FB0JnIbEmR46dDYMW+fO07HeC7Bx8RJd6Ou3mSFCVwYGIQgO0SV/UNhFD127/BuqDdODEVS5Qi+iV2HCNY2eaNdhGqVHo2Zh7AQ9CvlQcYqeDWNXi04b8WQilUonMltU0YMw3KBVNp0yJZSRcZTF+ijK5VNVClnKTUwCuGktFFOGdCKfqERUjVsAminanSFfoiFbMBqblLoNQKMgXnlw9UjpHGV+BzooMt7ktnAs+VGiU7hDQcnYAqtslhNFSnXhLgUZy0ONMeQnmUaD3cvMCVHVC72H+xQYi+Qem8rEDGZrJ7LKxBzmKUiWE1ustqNMRKBTsF1OZCxbptQDLFCwZVyLnNDMUzHFPEX5vT8pFZTnoIZeWscwGuYccaOQoNxDcanm5KlCpkTm4pW7upMtUeYRHtMqmbLKUmIRjRSZV9xULCob06ijna2kGUlnmVTO8QRPKRHPlG2XzHPJGtFnQBtryRUVjecAXvCnGiMAlvhTjZcAYq/cNOJC4fUkylrpoiF+p29gCOrOG+JJ9LfYFaCC+p+8HRW+kLNGoiAWFt6hAvX06C5Mncv0ZPkaTPiDXkSXUCVAD+pRbeUsXVuNYY+gny6tvYdgcICu9I3Bor+PLgz9CRt/zdKxuTHYCv9Nh2b+gUTseJQORFtjkLuqsaaJJShdH9WppI+voBbfvyFK/bfeAic+fOymre7xKTi18enzHAVr61824E646+vi6rfuSET7tvp9uisMmR8A02/S/W9HBAAAAABJRU5ErkJggg==');
+ // Magnifying glass icon
+ // background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAMAAADUivDaAAABp1BMVEUAAAD2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH5x1H967/84Z/////+9d/714D5zGH3sxH85q/++u/98M/4vTH4wkH3uCH60nH7249RxKUJAAAAfHRSTlMAIlmJsM/k8/LOrocCRJvjmEIeiOGGHCWc+ZkjDI77+lLlTgqdCB/QzBsy598mOO/qM/DtLejJBp6PU/5MDQ+NJIuCBd4BSj6R1Bdainmizcfg3ezx+NfGr6FRIRXSmkg76dx+GSDiTwnF2xYuKMsYn/aTHYUDQ5dBetmgCFBy9QAAArJJREFUeF6l1Plb01gYxfFTwKgD0gpYiaAFR8UqKhRwwKogBXVQlEVU3HBlAGdFcT3dV5Y/2oY+eabc5N4m8fN7v3lv3txCyldX37BP208e0A7+0ljngztNh5r9FPgDh5vgVEurRlttR4Jw4mi7Tin9WAdq6Tx+gkqh+k4odXWzpraTkPv1FB0JnIbEmR46dDYMW+fO07HeC7Bx8RJd6Ou3mSFCVwYGIQgO0SV/UNhFD127/BuqDdODEVS5Qi+iV2HCNY2eaNdhGqVHo2Zh7AQ9CvlQcYqeDWNXi04b8WQilUonMltU0YMw3KBVNp0yJZSRcZTF+ijK5VNVClnKTUwCuGktFFOGdCKfqERUjVsAminanSFfoiFbMBqblLoNQKMgXnlw9UjpHGV+BzooMt7ktnAs+VGiU7hDQcnYAqtslhNFSnXhLgUZy0ONMeQnmUaD3cvMCVHVC72H+xQYi+Qem8rEDGZrJ7LKxBzmKUiWE1ustqNMRKBTsF1OZCxbptQDLFCwZVyLnNDMUzHFPEX5vT8pFZTnoIZeWscwGuYccaOQoNxDcanm5KlCpkTm4pW7upMtUeYRHtMqmbLKUmIRjRSZV9xULCob06ijna2kGUlnmVTO8QRPKRHPlG2XzHPJGtFnQBtryRUVjecAXvCnGiMAlvhTjZcAYq/cNOJC4fUkylrpoiF+p29gCOrOG+JJ9LfYFaCC+p+8HRW+kLNGoiAWFt6hAvX06C5Mncv0ZPkaTPiDXkSXUCVAD+pRbeUsXVuNYY+gny6tvYdgcICu9I3Bor+PLgz9CRt/zdKxuTHYCv9Nh2b+gUTseJQORFtjkLuqsaaJJShdH9WppI+voBbfvyFK/bfeAic+fOymre7xKTi18enzHAVr61824E646+vi6rfuSET7tvp9uisMmR8A02/S/W9HBAAAAABJRU5ErkJggg==');
background-position: center;
background-repeat: no-repeat;
position: absolute;
h3 {
font-size: 16px;
line-height: 1.4;
- height: 18px;
color: #545454;
margin-top: -3px;
a:hover {
- .img-wrapper {
-
- &:before {
- opacity: 1;
- background-size: 66px;
- }
+ .arrows-animation, .img-wrapper:before {
+ opacity: 1;
}
img {
margin-bottom: 4em;
text-align: right;
}
+
+// Animated arrows (>>)
+.arrows-animation {
+ font-size: 66px; // Controls size of animated arrows element
+ border: 2px solid #fff;
+ width: 1em;
+ height: 1em;
+ border-radius: 100%;
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 1;
+ opacity: 0; // Hidden until hovered
+ transition: opacity 0.2s ease-out;
+
+ &:before, &:after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ width: 0.3em;
+ height: 0.3em;
+ background-size: contain;
+ top: 0.35em;
+ left: 30%;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M319.1 217l-190-190C109 6.8 76 7.1 55.5 27.6s-20.8 53.5-.7 73.7l152.5 152.5L54.8 406.2c-20.2 20.2-19.9 53.2.6 73.7s53.5 20.8 73.7.6l190-190c10.1-10.1 15.1-23.4 15-36.8.1-13.3-4.9-26.6-15-36.7z'/%3E%3C/svg%3E");
+ }
+
+ &:after {
+ margin-left: 0.2em;
+ }
+
+ &:hover, &.animating
+ {
+ &:before, &:after {
+ animation-name: bounceAlpha;
+ animation-duration:1.4s;
+ animation-iteration-count:infinite;
+ animation-timing-function:linear;
+ }
+ &:before {
+ animation-delay:0.2s;
+ }
+ }
+}
+
+@keyframes bounceAlpha {
+ 0% {opacity: 1; transform: translateX(0) scale(1);}
+ 25%{opacity: 0; transform:translateX(0.125em) scale(0.9);}
+ 26%{opacity: 0; transform:translateX(-0.125em) scale(0.9);}
+ 55% {opacity: 1; transform: translateX(0) scale(1);}
+}
}
body {
- background-color: #e4e5ec;
+ background-color: #fafafa;
font-family: @roboto;
font-size: 18px;
font-weight: 300;
--- /dev/null
+// Animated arrow links based on https://codepen.io/nicoencarnacion/pen/XpaRQV
+
+@import "00-constants";
+
+// Variables
+@black: #666;
+@hover-color: @yellow;
+
+@text-arrow-space: 10px;
+@shaft-width: 40px;
+@shaft-thickness: 1px;
+@arrow-head-width: 8px;
+@arrow-head-thickness: @shaft-thickness;
+
+
+// Todo: check why colour of right-hand arrow is glitchy on mouseout. See original codepen - maybe related to using currentColor...
+
+
+// The Arrow
+.the-arrow {
+ width: @shaft-width;
+ transition: all 0.2s;
+
+ &.-left {
+ position: absolute;
+ top: 60%;
+ left: 0;
+
+ > .shaft {
+ width: 0;
+ background-color: currentColor;
+
+ &:before,
+ &:after {
+ width: 0;
+ background-color: currentColor;
+ }
+
+ &:before {
+ transform: rotate(0);
+ }
+
+ &:after {
+ transform: rotate(0);
+ }
+ }
+ }
+
+ &.-right {
+ top: 3px;
+
+ > .shaft {
+ width: @shaft-width;
+ transition-delay: 0.2s;
+
+ &:before,
+ &:after {
+ width: @arrow-head-width;
+ transition-delay: 0.3s;
+ transition: all 0.5s;
+ }
+
+ &:before {
+ transform: rotate(40deg);
+ }
+
+ &:after {
+ transform: rotate(-40deg);
+ }
+ }
+ }
+
+ > .shaft {
+ background-color: currentColor;
+ display: block;
+ height: @shaft-thickness;
+ position: relative;
+ transition: all 0.2s;
+ transition-delay: 0;
+ will-change: transform;
+
+ &:before,
+ &:after {
+ background-color: currentColor;
+ content: '';
+ display: block;
+ height: @arrow-head-thickness;
+ position: absolute;
+ top: 0;
+ right: 0;
+ transition: all 0.2s;
+ transition-delay: 0;
+ }
+
+ &:before {
+ transform-origin: top right;
+ }
+
+ &:after {
+ transform-origin: bottom right;
+ }
+ }
+}
+
+
+
+// Animated Arrow Button
+
+.animated-arrow {
+ display: inline-block;
+ //color: currentColor;
+ //font-size: 1.25em;
+ //font-style: italic;
+ //text-decoration: none;
+ position: relative;
+ transition: all 0.2s;
+
+ &:hover {
+ color: @hover-color;
+
+ > .the-arrow.-left {
+ > .shaft {
+ width: @shaft-width;
+ transition-delay: 0.1s;
+ background-color: @hover-color;
+
+ &:before,
+ &:after {
+ width: @arrow-head-width;
+ transition-delay: 0.1s;
+ background-color: @hover-color;
+ }
+
+ &:before {
+ transform: rotate(40deg);
+ }
+
+ &:after {
+ transform: rotate(-40deg);
+ }
+ }
+ }
+
+ > .main {
+ transform: translateX(@shaft-width + @text-arrow-space);
+
+ > .the-arrow.-right {
+ > .shaft {
+ width: 0;
+ transform: translateX(200%);
+ transition-delay: 0;
+
+ &:before,
+ &:after {
+ width: 0;
+ transition-delay: 0;
+ transition: all 0.1s;
+ }
+
+ &:before {
+ transform: rotate(0);
+ }
+
+ &:after {
+ transform: rotate(0);
+ }
+ }
+ }
+ }
+ }
+
+ > .main {
+ display: flex;
+ align-items: center;
+ transition: all 0.2s;
+
+ > .text {
+ margin: 0 @text-arrow-space 0 0;
+ line-height: 1;
+ }
+
+ > .the-arrow {
+ position: relative;
+ }
+ }
+}
projects / cubedesigners-v7.git / commitdiff