CSS3の「:target疑似クラス」を使い、CSSだけでテキストのテロップ(CSS2のmarqueeと同じ動き)の開始と停止を制御します。サンプルの開始ボタンをクリックすると、ボタンの下のテロップが動きだします。停止ボタンをクリックすると止まります。

仕組み:「CSS3 :target疑似クラスを使い、CSSだけでアニメーション(画像)の開始と停止」とほぼ同じですが、こちらではやや詳しく解説します。 (動作サンプルは最下段です

サンプルのhtmlソース

<div class="btn" id="stop">
	<a class="mmm" href="#start">テロップ開始</a> 
  <a href="#stop">テロップ停止</a>
</div>
<div class="telop">
	<div id="start"></div> /*兄のdiv要素*/
	<div class="static"> /*弟のdiv要素(1)*/
		<p> </p>
	</div>
	<div class="marquee"> /*弟のdiv要素(2)*/
		<p>経費を削減しながら顧客満足度アップ 百万石&nbsp;WEB受注システム</p>
	</div> 
</div>

サンプルのCSSソース

テロップ(アニメーション)部分のCSSは省略します。省略部分はtest-css3-marquee.htmlのものとほぼ同じです。

#start ~ div {
	display:none;
	}
#start + div {
	display:block;
	}
#start:target ~ div { 
	display:block;
	}
#start:target + div { 
	display:none;
	}

 

テロップ開始  テロップ停止

 

経費を削減しながら顧客満足度アップ 百万石 WEB受注システム

戻るボタン