cman.jp > パーツ作成メニュー > 画像のデザイン > 画像をスクロール・スライドする

画像スクロールのCSS作成

画像をスクロールしたい場合は、CSS3で追加された「animetion」を利用すると、簡単にできます。画像のスクロール用に「MARQUEE」タグがありましたが、一部ブラウザしか対応していないため、HTML5で廃止されました。

当ページでは、簡単な操作で画像スクロールのCSSを自動で作成できます。「横スクロール」「縦スクロール」「折返し」に対応していますので、是非お試しください。

画像をスクロールさせ見よう

クロース速度

スクロールの動き

右→左上→下下→上折返し

使用したhtml

<div class="scroll">
  <img src="../img-sample.png" alt="サンプル画像">
</div>

生成したCSS

.scroll {
  margin     : auto;
  border     : 1px solid #666;
  background : #fff;
  overflow   : hidden;
}
.scroll img{
  display     : inline-block;
  padding-left: 100%;
  line-height : 1em;
  animation   : scrollAnime 3s linear infinite;
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}

「animation」の使い方は以下を参照ください。
animation 「アニメーション」の構文

ページTOP

色々なスクロール

CSSの「animation」を使用することで、色々なスクロールを作成することができます。

ブリンクしながらスクロール

ブリンクのCSS生成も行えます。以下をご確認ください。
blink 「ブリンク・点滅」のCSS生成

<style type="text/css">
.scroll_s1 {
  margin     : auto;
  padding    : 1%;
  border     : 1px solid #666;
  background : #fff;
  overflow   : hidden;
}
.scroll_s1 img{
  display     : inline-block;
  padding-left: 100%;
  animation   : scrollAnime_s1 3s linear infinite;
}
@keyframes scrollAnime_s1{
    0% { transform: translateX(0);    opacity : 1.0;}
   20% { transform: translateX(-20%); opacity : 0.2;}
   40% { transform: translateX(-40%); opacity : 1.0;}
   60% { transform: translateX(-60%); opacity : 0.2;}
   80% { transform: translateX(-80%); opacity : 1.0;}
  100% { transform: translateX(-100%); opacity : 0.2;}
}
</style>

ページTOP

回転しながらスクロール

画像回転のCSS生成も行えます。以下をご確認ください。
画像回転のCSS生成

<style type="text/css">
.scroll_s2 {
  margin     : auto;
  padding    : 1%;
  border     : 1px solid #666;
  background : #fff;
  overflow   : hidden;
}
.scroll_s2 img{
  display     : inline-block;
  padding-left: 100%;
  animation   : scrollAnime_s2 3s linear infinite;
}
@keyframes scrollAnime_s2{
    0% { transform: translateX(0)     rotateX(360deg)}
   25% { transform: translateX(-25%)  rotateX(0deg)  }
   50% { transform: translateX(-50%)  rotateX(360deg)}
   75% { transform: translateX(-75%)  rotateX(0deg)  }
  100% { transform: translateX(-100%) rotateX(360deg)}
}
</style>

ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？