CSSを駆使して画面外から文字をスライドさせる方法～JavaScriptやHTMLも解説～

中山テックです。

以前ホームページのTOP下に動きを持たせたいと思い構想を練っていました。
その中でCSS+Javascript(jQuery)で画面外からテキストと背景をスライドできないかと色々試してみました。

今回は作り方と解説をしていきたいと思います。
最下にローカルで動くファイルも置いておきます。

完成した動き

コンセプトは最上と最下に目的を文字で出力。
真ん中には弊社ロゴを出力させてます(グルグル回転)。

こちらのHTMLは表示を、JavaScriptはCSSを表示させるための簡単なプログラムです。

問題はCSS、現在位置から画面外の座標を割り出し、画面内に表示させるのがちょっと長いプログラムになります。

html

<div class="container">
  <div class="yokokara1-1">
    <span class="yokokara1-2">ホームページ制作</span>
  </div>
  <div class="yokokara1-3">
    <span class="yokokara1-4">SEO対策</span>
  </div>
  <div class="yokokara1-5">
    <img src="画像のURL">
  </div>
</div>

先述しましたが、動画にある真ん中の画像はくるくる回っているだけです。
「yokokara1-1」「yokokara1-5」のCSSがわかれば問題ないと思います。
※今回は画面外から文字を出すというテーマのため