数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。

CSSで画像を横にスライドさせる方法 提供:カップめんリスペクト

CSSで画像を横にスライド~

今回はCSS(スタイルシート)アニメーションを使って画像を横にスライドさせていきます。

後にjavascriptと組み合わせて完全なスライドショーを作るための布石となります。

どこよりも詳しく書いていくので初心者でもすぐにわかります。

レベル1 アニメーションの基本のスタイルシート

まずは最低これだけはっていう基本の型があるので作っていきます。

animation-name:"アニメーションの名前";でアニメーションに名前を付け

animation-duration:"時間(秒数など)s";で一回のアニメーションにかかる時間の設定をし

animation-timing-function:ease;で速さに強弱をつけます。

またanimation-iteration-count:"回数";で動きの回数を設定します。

さらにいったりきたりする動きはanimation-direction: alternate;を使います。

スタイルシートは次のようになります。

imgのpicrotateクラスにしてみました。クラス名は何でも大丈夫です

img.picrotate{
animation-name:picrotation;
animation-duration:3s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction: alternate;
}

infiniteは無限回という意味です。


レベル2 細かい動きの設定

細かい動きの設定は

@keyframes アニメーション名{
処理内容
}

ですることができます。

レベル3 横の動きの設定

横の動きはx軸方向に動かすのでtransform: translateX(〇px);を使います。

初めの位置を0%,終わりの位置を100%として次のように記述します。

@keyframes picrotation{

0%{
transform: translateX(0px);
}

100%{
transform: translateX(400px);
}

}

これで0pxから400pxの位置に横に動くことになります。


レベル4 ここまでをまとめる

CSS(スタイルシート)をまとめて書くと次のようになります。

img.picrotate{
animation-name:picrotation;
animation-duration:3s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction: alternate;
}

@keyframes picrotation{

0%{
transform: translateX(0px);
}

100%{
transform: translateX(400px);
}

}

レベル5 画像を用意して記事中の記述を書く

記事中にはこう書きます。

<img src="画像のURL" class="picrotate">

カップめんリスペクト

今回の提供はユーチューブ(youtube)配信でお馴染み?のカップめんリスペクトさんでお送り致しました。

www.youtube.com