今回も実際の制作からのメモ。
この投稿は備忘録の側面が強いのでslickの使い方に関しては割愛しています。
いつかよく使うオプションと使用サンプルを一緒に紹介します。いつか。
この記事でご紹介するのは、slickのスライドに合わせて他の要素にもアニメーションをつける方法です。
実現できる動作はこちらのdemoページから。（スマホ版は用意していません。ごめんなさい。）
それではコードと解説を。
slickのスライドに合わせて数のカウントと他の要素にアニメーションをつける方法！
各コードポイントとなるところだけピックアップしています。HTMLはこちら。
<div class="per customClass-1">
<ul class="imgList">
<li class="img01"></li>
<li class="img02"></li>
<li class="img03"></li>
</ul>
<ul class="txtList">
<li class="txt01">
<dl>
<dt>1つ目のテキスト</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat sapiente nostrum ex odio voluptatibus id rem ratione corrupti, eaque consequatur omnis ea qui, nihil accusantium nulla, nesciunt sequi. Aperiam, alias.</dd>
</dl>
</li>
<li class="txt02">
<dl>
<dt>2つ目のテキスト</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat sapiente nostrum ex odio voluptatibus id rem ratione corrupti, eaque consequatur omnis ea qui, nihil accusantium nulla, nesciunt sequi. Aperiam, alias.</dd>
</dl>
</li>
<li class="txt03">
<dl>
<dt>3つ目のテキスト</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat sapiente nostrum ex odio voluptatibus id rem ratione corrupti, eaque consequatur omnis ea qui, nihil accusantium nulla, nesciunt sequi. Aperiam, alias.</dd>
</dl>
</li>
</ul>
</div>HTMLのポイントは.imgListと.txtListを同じ階層に入れておくことと、.per に .customClass-1をあらかじめ入れておくことですね。
ちなみにslickで動かすのは.imgListです。
scssはこちら。見た目を整えるコードはもっとありましたが重要なのはこれくらいのはず。
.per {
.txtList {
position: relative;
li {
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 0;
opacity: 0;
transition: all .3s ease;
}
}
&.customClass-1 {
.txtList {
.txt01 {
opacity: 1;
}
}
}
&.customClass-2 {
.txtList {
.txt02 {
opacity: 1;
}
}
}
&.customClass-3 {
.txtList {
.txt03 {
opacity: 1;
}
}
}
}今回は.txtListの<li>は同じところで出たり消えたらいしてほしいので、position: absolute;を使って3つとも同じ位置におきます。すべての<li>にopacity: 0;も。
jsはこちら。
$(function () {
$(".imgList").on("init", function (event, slick) {
$(this).append('<div class="slick-num"><span class="now-count"></span> / <span class="all-count"></span></div>');
$(".now-count").text(slick.currentSlide + 1);
$(".all-count").text(slick.slideCount);
})
.slick({
autoplay: false,
slidesToShow: 1,
swipe: true,
arrows: true,
pauseOnFocus: false,
pauseOnHover: false,
variableWidth: true,
})
.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
$(".now-count").text(nextSlide + 1);
// 以前に追加されたカスタムクラスを削除
var sliderParent = $(".imgList").parent();
sliderParent.removeClass(function (index, className) {
return (className.match(/\bcustomClass-\S+/g) || []).join(' ');
});
// スライドに応じて親要素に新しいクラスを追加
var newClass = "customClass-" + (nextSlide + 1);
sliderParent.addClass(newClass);
});
});$(“.imgList”).on(〜)は枚数のところですね。「今のスライドのナンバー / スライドの合計数」で表示するようになっています。
.on(“beforeChange”, function (event, slick, currentSlide, nextSlide) {〜}); は.imgListのスライドが切り替わるたびに、.perにクラス名「customClass-◯」を追加・削除していく記述です。
scssの&.customClass-◯ {〜} でそれぞれの.txt0◯にopacity: 1;をつけています。
.per に .customClass-1をあらかじめ入れておいたのは、最初はこの記述が起動していないので1つ目の.txt01を表示させておくために入れています。
いかがでしょうか。
クラス名を追加・削除することで、他の要素のアニメーションを起動させているため、比較的汎用性のある記述をご紹介できたかと思います。
もっと上級者の方は別の方法も知っているかもしれませんが、ひとまずはコレでいろいろできるかと。
