規定の位置で画像を滑らかにスライドさせる～JavaScript×CSS～

2023年11月14日 2023年11月28日

中山テック代表

中山テック代表の中山です。

さて、スマホの下部や上部で画像が滑らかにスライドするのを見たことありますでしょうか。

私は、よくあります（汗

そんな弊社も、ゲーム系ブログは最下に画像をスライドさせております。

すいません広告です・・・

今回はJavaScript×CSSで画像を滑らかにスライドさせる方法をお話したいと思います。

Contents

1 動作紹介
2 HTML
3 CSS
4 JavaScript
5 まとめ

動作紹介

6枚の画像を順番にスライド＆表示させます。

1回につき8秒表示したら次の画像を表示させたいと思います。

※スマホ版でのご説明となりますが、PC版でも実装可能ですョ！

YouTubeのショートですが、補足動画をアップしました。

このような動きを出すにはどうすれば良いのか、次の項からお話したいと思います。

HTML

<div id="koukoku_bottom_slide">
  <div id="footerKotei1" class="footerKoteiAds1"></div>
  <div id="footerKotei2" class="footerKoteiAds2"></div>
  <div id="footerKotei3" class="footerKoteiAds3"></div>
  <div id="footerKotei4" class="footerKoteiAds4"></div>
  <div id="footerKotei5" class="footerKoteiAds5"></div>
  <div id="footerKotei6" class="footerKoteiAds6"></div>
</div>

これって縦に6つ画像を並べてるだけじゃないの？って質問が出そうですが、答えは「No」。

後述するCSSで「position」をabsoluteにし、div内での配置にすることで横並びを実現できます。

※先日はrelativeで相対位置にして縦に並べてハードコーディングしてました。大変申し訳ございません。

CSS

@media only screen and (max-width: 789px) {
  #koukoku-fixed-pc {
    display:none;
  }
  #koukoku_bottom_slide img {
    margin-bottom:0;
  }
  #koukoku_bottom_slide {
    color:white;
    left: 0;
    width: 100%;
    height:123px;
    position: fixed;
    display: block;
    z-index: 998;
    background-color:black;
    text-align:center;
  }　⇒①
  #koukoku_bottom_slide.upGame{
    animation: upGameMove 1s forwards;
  }
  @keyframes upGameMove{
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      bottom:0;
    }
  }

  #koukoku_bottom_slide.downGame {
    animation: downGameMove 6s forwards;
  }
  @keyframes downGameMove{
    from {
      opacity: 1;
      bottom:0;
    }
    to {
      opacity: 0;
      transform: translateY(100px);
    }
  }


 .footerKoteiAds1,
 .footerKoteiAds2,
 .footerKoteiAds3,
 .footerKoteiAds4,
 .footerKoteiAds5,
 .footerKoteiAds6 {
    left:0;
    position:relative;
    position:absolute;
    overflow: hidden;
    animation-duration: 16s;
    animation-iteration-count:infinite;
    animation-fill-mode: both;
 }　⇒②
 .footerKoteiAds1 {
    animation-name: footerKoteiAdsSlide1;
 }
 .footerKoteiAds2 {
    animation-name: footerKoteiAdsSlide2;
 }
 .footerKoteiAds3 {
    animation-name: footerKoteiAdsSlide3;
 }
 .footerKoteiAds4 {
    animation-name: footerKoteiAdsSlide4;
 }
 .footerKoteiAds5 {
    animation-name: footerKoteiAdsSlide5;
 }
 .footerKoteiAds6 {
    animation-name: footerKoteiAdsSlide6;
 }
 /*1枚目*/
 @keyframes footerKoteiAdsSlide1{
0% {left: 110%;}
1% {left: 0%;}
16% {left: 0%;}
17% {left: -110%;}
100% {left: -110%;}
 }
 @keyframes footerKoteiAdsSlide2{
0% {left: 110%;}
16% {left: 110%;}
17% {left: 0%;}
33% {left: 0%;}
34% {left: -110%;}
100% {left: -110%;}
 }
 @keyframes footerKoteiAdsSlide3{
0% {left: 110%;}
33% {left: 110%;}
34% {left: 0%;}
50% {left: 0%;}
51% {left: -110%;}
100% {left: -110%;}
 }
 @keyframes footerKoteiAdsSlide4{
0% {left: 110%;}
50% {left: 110%;}
51% {left: 0%;}
66% {left: 0%;}
67% {left: -110%;}
100% {left: -110%;}
 }
 @keyframes footerKoteiAdsSlide5{
0% {left: 110%;}
66% {left: 110%;}
67% {left: 0%;}
83% {left: 0%;}
84% {left: -110%;}
100% {left: -110%;}
 }
 @keyframes footerKoteiAdsSlide6{
0% {left: 110%;}
83% {left: 110%;}
84% {left: 0%;}
99% {left: 0%;}
100% {left: -110%;}
 }　⇒③
}

※ゲームブログにスライド広告を作るためのものなので、名前は微妙です。仕組みを知って頂ければ！

①画像表示エリアを作る

positionをfixedさせることで最下に固定させます。

画像スライドは後述のpostionを絶対位置に指定することでこのエリア内で動くことになります。

これを入れないとhtmlを入れた場所でスライドしてしまいます。

②アニメーション指定

 .footerKoteiAds1,
 .footerKoteiAds2,
 .footerKoteiAds3,
 .footerKoteiAds4,
 .footerKoteiAds5,
 .footerKoteiAds6 {
    left:0;
    position:absolute;
    overflow: hidden;
    animation-duration: 16s;
    animation-iteration-count:infinite;
    animation-fill-mode: both;
 }

~~positionはrelativeにして相対的に位置を変えていきます。~~

⇒ウソです。absoluteにすることで親div内での配置扱いにします。

これにて積み上げからの位置を頑張って合わせるなんて必要がなくなります！

※これがないとスライドしません！

そしてキモとなる「animation-duration」、16sは16秒を意味します。

1つの画像が表示されて消えるまで16秒かかる、という意味になります。

何故こんなことしてるのかは次の項で説明します。

JavaScript&CSS関連リンク

anime.js	CSSとデベロッパツール	文字ふわっと浮き出る	画面外から	ふわっと追従	追従ふわっと消す
ランダム表示	JavaScriptデバッグ	SmtpJS	メール送信問合せフォーム	スライド	文字列を改行
プルダウン複数頁に	ボタン×ダイアログ

anime.js	CSSとデベロッパツール	文字ふわっと浮き出る
画面外から	ふわっと追従	追従ふわっと消す
ランダム表示	JavaScriptデバッグ	SmtpJS
メール送信問合せフォーム	スライド	文字列を改行
プルダウン複数頁に	ボタン×ダイアログ

③順に画像を出す

 /*1枚目*/
 @keyframes footerKoteiAdsSlide1{
0% {left: 110%;}
1% {left: 0%;}
16% {left: 0%;}
17% {left: -110%;}
100% {left: -110%;}
 }

①～④を永遠に繰り返します（前項で「animation-iteration-count」をinfinite指定しているため）。

まず位置ですが、0は画面左端の座標です。

そこから110％（ちょっと余裕持たせました。100％でも問題なしです）、画面外に画像を配置させます。

スタートしたら直ぐに画面左端に位置させます（画像も幅ピッタリに収まるのでleft0でオッケー）。

約2.56～2.72秒程停止させ、画面外で大人しくさせます。

この数字は「16秒で6枚の画像をスライドさせて一時停止させられる秒数」のことです。

※18秒だったら3秒一時停止できる計算です

座標を110％⇒0％にする地点を16～17％ずつズラすと画像のようになります。

スライド「しているように見せる」ウルテクです。

勿論、画像にリンクを貼ることもできますよぉ。

JavaScript

const gameAdsArrayFooterSample = [
  '<img border="0" alt="" src="https://nakayama-tech.com/wp-content/uploads/2023/11/blog-20231114-01.jpg">',
  '<img border="0" alt="" src="https://nakayama-tech.com/wp-content/uploads/2023/11/blog-20231114-02.jpg">',
  '<img border="0" alt="" src="https://nakayama-tech.com/wp-content/uploads/2023/11/blog-20231114-03.jpg">',
  '<img border="0" alt="" src="https://nakayama-tech.com/wp-content/uploads/2023/11/blog-20231114-04.jpg">',
  '<img border="0" alt="" src="https://nakayama-tech.com/wp-content/uploads/2023/11/blog-20231114-05.jpg">',
  '<img border="0" alt="" src="https://nakayama-tech.com/wp-content/uploads/2023/11/blog-20231114-06.jpg">'
];
  // DIVの数は固定で
  const footerDivNum = 6;
  document.getElementById('koukoku_bottom_slide').insertAdjacentHTML('afterbegin', bottomKoukokuTojiruyo);
  for(let i=0;i<footerDivNum;i++) {
    // ランダム
    var rand;
    // フッタ固定ID名
    var footerKoteiName = 'footerKotei' + (i+1);

    document.getElementById(footerKoteiName).insertAdjacentHTML('beforeend', gameAdsArrayFooterSample[i]);
  }

JavaScriptは至ってシンプル。

imgのリストを作成し、ループで回してHTMLの各div要素に配置します。

まとめ

ソースコードが長い割には説明するところが対してありませんでした（汗

ということは、改善の余地がありまくりなコードということです。⇒修正しました

が、この回は（特に自分が）原理を理解するためのものなのでご了承をば・・・

もし「ええのあったわ！」と思って頂けたら幸いです。

最後までご覧頂き、ありがとうございました。

参考になった・面白いと思って頂けたらクリックお願いします！

にほんブログ村

中山テックのお仕事

ご依頼事項	内容
システム開発	SESの業務委託詳しくはこちらをご覧ください
WEB制作	新規ご依頼時は・ドメイン取得・WEBサーバ契約レクチャからスタート。 PHP(Wordpress)でサーバ制御。 HTML/CSS/JavaScriptでフロント制御。ご料金はこちらをご覧ください
ブログ執筆	取材＆執筆のご依頼承っております。主なジャンルは・ゲーム・地域の名所、観光・グルメ・その他ご依頼事項(要相談) 詳しくはこちらをご覧ください