Dlugosz icons

rollovers for dlugosz.polona.pl

by Grzegorz Matyszewski

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="section" data-cssanimate="svg line:last-of-type">
  <svg class="icon-yearbooks" xmlns="http://www.w3.org/2000/svg" width="49" height="18" viewBox="0 0 49 18">
    <g fill="#fff" stroke="#FFFFF8" stroke-miterlimit="10">
      <line x1=".5" y1="18" x2=".5" y2="7"></line>
      <line x1="3.5" y1="7" x2="3.5" y2="18"></line>
      <line x1="6.5" x2="6.5" y2="18"></line>
      <line x1="9.5" y1="7" x2="9.5" y2="18"></line>
      <line x1="12.5" y1="7" x2="12.5" y2="18"></line>
      <line x1="15.5" y1="7" x2="15.5" y2="18"></line>
      <line x1="18.5" y1="18" x2="18.5"></line>
      <line x1="21.5" y1="7" x2="21.5" y2="18"></line>
      <line x1="24.5" y1="18" x2="24.5" y2="7"></line>
      <line x1="24.5" y1="7" x2="24.5" y2="18"></line>
      <line x1="27.5" y1="7" x2="27.5" y2="18"></line>
      <line x1="30.5" x2="30.5" y2="18"></line>
      <line x1="33.5" y1="7" x2="33.5" y2="18"></line>
      <line x1="36.5" y1="7" x2="36.5" y2="18"></line>
      <line x1="39.5" y1="7" x2="39.5" y2="18"></line>
      <line x1="42.5" y1="18" x2="42.5"></line>
      <line x1="45.5" y1="7" x2="45.5" y2="18"></line>
      <line x1="48.5" y1="7" x2="48.5" y2="18"></line>
    </g>
  </svg>
</div>
<div class="section" data-cssanimate="svg g">
  <svg class="icon-manuscripts" xmlns="http://www.w3.org/2000/svg" width="42" height="17" viewBox="-278 412.9 42 17" enable-background="new -278 412.9 42 17">
    <g stroke="#fff" stroke-miterlimit="10" fill="none">
        <line x1="-278" y1="413.4" x2="-260" y2="413.4"></line>
        <line x1="-278" y1="417.5" x2="-272" y2="417.5"></line>
        <line x1="-270" y1="417.4" x2="-260" y2="417.4"></line>
        <line x1="-278" y1="421.4" x2="-260" y2="421.4"></line>
        <line x1="-278" y1="425.4" x2="-270" y2="425.4"></line>
        <line x1="-268" y1="425.4" x2="-260" y2="425.4"></line>
        <line x1="-278" y1="429.4" x2="-260" y2="429.4"></line>
       ...

SCSS

body { background: #191919; }
.section { padding: 40px; cursor: pointer; outline: 1px solid #333; }


@keyframes grow {
  50% { transform: scaleY(18/10); }
  90% { transform: scaleY(0.9); }
  100% { transform: scaleY(1); }
}

@keyframes slide {
  to { transform: translate(-42px,0); }
}

@keyframes pin {
  50% { transform: translate(0,5px); }
  100% { transform: translate(0,0); }
}



.icon-yearbooks line {
  transform-origin: bottom center;
}

%icon-yearbooks-hover {
  @for $i from 1 through 18 {
    line:nth-of-type(#{$i}) {
      animation: grow 0.4s ease-out 0.015s*$i forwards 1;
    }
  }
}

%icon-manuscripts-hover g {
  animation: slide 0.6s ease-out;
}

%icon-pin-big-hover g {
  animation: pin 0.6s ease;
}


[data-cssanimate].animate {
  .icon-yearbooks {
    @extend %icon-yearbooks-hover; 
  }
  .icon-manuscripts {
    @extend %icon-manuscripts-hover; 
  }
  .icon-manuscripts-alt {
    @extend %icon-manuscripts-alt-hover; 
  }
  .icon-pin-big {
    @extend %icon-pin-big-hover; 
  }
}

JavaScript

$('[data-cssanimate]').each(function(i, o) {
    var selector = $(o).data('cssanimate');
    $(o).find(selector).off('.cssanim').on('webkitAnimationEnd.cssanim mozAnimationEnd.cssanim animationEnd.cssanim', function() {
        $(o).removeClass('animate');
    });
});

$('[data-cssanimate]').off('.cssanim').on('mouseenter.cssanim', function(e) {
    $(e.currentTarget).addClass("animate");
});