クリップされたSVGスライダー = Clipped SVG Slider

最近スライダー系でコンテンツを作ることが多くてその研究でいろいろ見て回って見るけたもの。

アロー(矢印)部分に次のコンテンツを表示することの出来るスライダーなのですが、難しく言えばモーフィングプレビューイメージを持つシンプルなスライダーでSVGのプロパティを使用してアニメーション化を実装しています。

 

これはSVGで本当に強力Codyhouse.Whatによって開発されたSVGのプロパティを使用して、アニメーションのプレビュー画像をモーフィングして、シンプルなスライダーでクリップされた要素でパスのアニメーションを組み合わせることが可能性です。CSS変換のタッチ要素を追加することができまるオープンソースな技術です。

 

ツール使用:Snap.svg

SVGのコンテンツを作ることの出来るツールサイトです。

Snap.svg ホーム

画像:Unsplash

構造の作成

HTML構造は、3つ順不同のリストで構成され ul.galleryyaや ul.navigation スライダー画像やナビゲーションのために、および画像のキャプションのために ul.caption となっています。

内部の各リスト項目 ul.gallery から構成されていて.svg-wrapper ラッピング要素<svg> を含む<clipPath> (スライド画像のクリッピング領域を変更するために使用される)要素、<image>(そのクリップパスurl属性がある要素<clipPath>のid)、および<use>HREF:要素(そののxlink属性は、<clipPath>中央にないスライド画像を覆う層を作成するために使用されるID)。

HTML

<div class="cd-svg-clipped-slider" data-selected="M780,0H20C8.954,0,0,8.954,0,20v760c0,11.046,8.954,20,20,20h760c11.046,0,20-8.954,20-20V20 C800,8.954,791.046,0,780,0z" data-lateral="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z">
  <div class="gallery-wrapper">
    <ul class="gallery">
      <li class="left">
        <div class="svg-wrapper">
          <svg viewBox="0 0 800 800">
            <title>Animated SVG</title>
            <defs>
              <clipPath id="cd-image-1">
                <path id="cd-morphing-path-1" d="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z"/>
              </clipPath>
            </defs>

            <image height='800px' width="800px" clip-path="url(#cd-image-1)" xlink:href="img/img-01.jpg"></image>
            <use xlink:href="#cd-morphing-path-1" class="cover-layer" />
          </svg>
        </div> <!-- .svg-wrapper -->
      </li>

      <li class="selected">
        <div class="svg-wrapper">
          <svg viewBox="0 0 800 800">
            <title>Animated SVG</title>
            <defs>
              <clipPath id="cd-image-2">
                <path id="cd-morphing-path-2" d="M780,0H20C8.954,0,0,8.954,0,20v760c0,11.046,8.954,20,20,20h760c11.046,0,20-8.954,20-20V20 C800,8.954,791.046,0,780,0z"/>
              </clipPath>
            </defs>

            <image height='800px' width="800px" clip-path="url(#cd-image-2)" xlink:href="img/img-02.jpg"></image>
            <use xlink:href="#cd-morphing-path-2" class="cover-layer" />
          </svg>
        </div> <!-- .svg-wrapper -->
      </li>

      <!-- other slides here -->
    </ul>

    <nav>
      <ul class="navigation">
        <li><a href="#0" class="prev">Prev</a></li>
        <li><a href="#0" class="next">Next</a></li>
      </ul>
    </nav>
  </div>

  <ul class="caption">
    <li class="left">Lorem ipsum dolor</li>
    <li class="selected">Consectetur adipisicing elit</li>
    <!-- other captions here -->
  </ul>
</div> <!-- .cd-svg-clipped-slider -->

スタイル

デフォルトでは、内部のすべてのリスト項目は、ul.gallery絶対位置、ゼロの不透明度を持ち、右に移動し、スケールダウンされています

.cd-svg-clipped-slider .gallery li {
  /* slider images */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 25%;/* (100% - width)/2 */
  width: 50%;
  height: 100%;
  opacity: 0;
  transform: translateX(75%) scale(0.4);
  transition: opacity .3s, transform .3s ease-in-out;
}

.selectedクラスが再び中心に選択された画像を移動させるために、それをスケールアップするために使用されます。

.cd-svg-clipped-slider .gallery li.selected {
  /* slide in the center */
  position: relative;
  z-index: 3;
  opacity: 1;
  transform: translateX(0) scale(1);
}

.leftそして.rightクラスが選択された画像の両側にプレビュー画像を表示するために使用されます。.leftクラスはまた、左画像のプレビューを移動させるために使用されます。

.cd-svg-clipped-slider .gallery li.left {
  /* slides on the left */
  transform: translateX(-75%) scale(0.4);
}
.cd-svg-clipped-slider .gallery li.left, 
.cd-svg-clipped-slider .gallery li.right {
  /* .right -> slide visible on the right */
  z-index: 2;
  opacity: 1;
}

 

新しいスライドを選択すると、<path>スライド画像をクリップするために使用される要素は、(スライドである場合、画像全体の画像の異なる部分を明らかにするためにアニメーション化された.selected1個、またはのためだけに部分.left/ .right画像)。

同じクラスは、画像キャプションの表示/位置を制御するために使用されます。デフォルトでは、すべてのキャプションが隠されていると右に移動しました。クラスが.selected選択された字幕を表示しながら、中央に戻ってそれを移動させるために使用される.leftクラスは、それを非表示にし、左に移動させるために使用されます。

.cd-svg-clipped-slider .caption li {
  /* slide titles */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  transform: translateX(100px);
  opacity: 0;
  transition: opacity .3s, transform .3s ease-in-out;
}
.cd-svg-clipped-slider .caption li.selected {
  /* slide visible in the center */
  z-index: 2;
  position: relative;
  transform: translateX(0);
  opacity: 1;
}
.cd-svg-clipped-slider .caption li.left {
  /* slide hidden on the left */
  transform: translateX(-100px);
}

 

イベント処理

このスライダーを実装するために、作成者が作成した  svgClippedSliderオブジェクトを、使用して bindEvents スライダーナビゲーションへのクリックのイベントハンドラをアタッチする方法を書くとこうなります。

function svgClippedSlider(element) {
  this.element = element;
  this.slidesGallery = this.element.find('.gallery').children('li');
  this.slidesCaption = this.element.find('.caption').children('li');
  this.slidesNumber = this.slidesGallery.length;
  this.selectedSlide = this.slidesGallery.filter('.selected').index();
  // ....

  this.bindEvents();
}

svgClippedSlider.prototype.bindEvents = function() {
  var self = this;
  //detect click on one of the slides
  this.slidesGallery.on('click', function(event){
    if( !$(this).hasClass('selected') ) {
      //determine new slide index and show it
      var newSlideIndex = ( $(this).hasClass('left') )
        ? self.showPrevSlide(self.selectedSlide - 1)
        : self.showNextSlide(self.selectedSlide + 1);
    }
  });
}

選択したスライドを示すの世話をする方法。これらの機能は、追加/スライド画像とキャプションから適切なクラスを削除し、の’D’属性アニメーション化するために使用されている内部の要素を スライド画像をクリップするために使用されます。showPrevSlideshowNextSlide<path><clipPath>