flexsliderの中のキャプションをCSSで任意にスライドさせる　メモ

再びWEBネタです。結構前からやってみたかった事に突然思い立って作業してみました。良く有料のテンプレートである、スライダーの中のテキストが動くヤツ。あれを実装してみたかったんです。

CSSを使ってflexsliderのキャプションをスライドインさせる

本当はCSSではなくて、textillate.jsを使って作業していたのですが、どうにも連動がうまくいかない・・・。文字数で全体の表示時間が変化しちゃって、だんだんとスライダーのループとズレてしまう・・・。何かトリガーに出来ないかやってみたのですが、上手くいかないのでCSSを使って作ってみました。

css3の進化

凄いですねー。css3。スライドを調べていたら、相当なアニメーションがCSSでも可能になっているようです。お陰で、比較的楽に、尚且つ重くなり難く実装出来ました。
コードはこんな感じです。

   <div class="flexslider">
        <ul class="slides">
            <li style="background:url(<?php echo $value['url']; ?>)">
                    <a href="<?php echo $URL; ?>">
                    <p class="slider-caption slidp<?php echo $属性; ?>"><?php echo $テキスト); ?></p>
                </a>
            </li>
        </ul>
    </div>

wordpressでやっていたので、phpで書き出しています。一部省略しているので、そのままでは使えません。スライダーのキャプションに新しい属性(ここではslidpbという名前)を追加して、slidpbの後にforeachで回したカウントを入れて、固有の属性にしています。

それに対してCSSでこんな感じのコード。

.flex-active-slide .slidpb?? {
  -webkit-animation-duration: 2s;
  -webkit-animation-name: slidein;
  animation-duration: 2s;
  animation-name: slidein;
}
@-webkit-keyframes slidein {
  from { margin-top:-1000px; opacity: 0.2; }
  to   { width:100%; }
}
@keyframes slidein {
  from { margin-top:-1000px; opacity: 0.2; }
  to   { width:100%; }
}

.flex-active-slideはスライダーを使うと吐き出される属性なので、それがスイッチになります。スライダーがアクティブになると.slidpb??もアクティブになるので、完全に連動出来るのがとても良かった。.slidpb??の??はforeachで得たモノを付け足してます。僕は数字。

このやり方なら、属性が固有になるので、それぞれ違ったスライドのさせ方が出来ます。上からだったり、下からだったり、横からだったりとか縦横無尽です。
実装例はウチのネットショップのTOPスライダーです。
コチラ＞＞https://www.u-hg.com/category/item/
キャッシュが残ってる場合は変な表示になると思いますので更新して下さい。

textillate.jsのように派手な演出は出来ませんが、まぁまぁ良い感じで出来たと思います。
実はtextillate.jsもスライダーの属性をスイッチに出来ないか何度もやったのですが、どうにも・・・。分かる方いたら教えて欲しいなー。

とは言え、cssのみで実装した軽いエフェクトなので、意外と良いのかも知れませんね。

ウチのお客様はHP製作なんて興味ない人が大半と思いますが、暇つぶし位で見ていただければ幸いです。
ちなみにミシンも回していたのですが、先にWEBを完了させてしまいました。スイマセンm(uu)m

ではー

---

---