日別アーカイブ: 2022-05-03

画像のスクロール描写法

静止画像から動画風へ

 

静止画像をスクロールするにはjQueryを使う方法があります。ネオンサインのように限られた横幅を有効に利用する方法です。1枚または数珠つなぎにした複数の静止画像を繰り返しスクロールする場合、余白が生じます。

余白なしにスクロールするには同じ画像をもう1枚用意して時間差表示する方法があります。詳しくは大きな古時計で画像を使って説明しています。

動作コード

<div id="d0" data-direction="left" data-duration="12000" style="width:1000px; height:344px; z-index:30; overflow:hidden;">
  <img src="https://aidesign.lolipop.jp/wp-content/uploads/2022/05/koinobori5A.png" width="1000" height="344">
</div>
<div id="d1" data-direction="left" data-duration="12000" style="width:1000px; height:344px; margin-top:-344px; z-index:30; overflow:hidden;">
  <img src="https://aidesign.lolipop.jp/wp-content/uploads/2022/05/koinobori5A.png" width="1000" height="344">
</div>
<div id="d2" data-direction="right" data-duration="48000" style="width:1000px; height:120px; z-index:30; overflow:hidden;">
  <img src="https://aidesign.lolipop.jp/wp-content/uploads/2022/05/picture30C.png" width="1000" height="120">
</div>
<div id="d3" data-direction="right" data-duration="48000" style="width:1000px; height:120px; margin-top:-120px; z-index:30; overflow:hidden;">
  <img src="https://aidesign.lolipop.jp/wp-content/uploads/2022/05/picture30C.png" width="1000" height="120">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.6.0/jquery.marquee.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$('#d0').marquee({delayBeforeStart: -12000});			//鯉のぼり
$('#d1').marquee({delayBeforeStart: 0});
$('#d2').marquee({delayBeforeStart: -48000});			//ビルディング
$('#d3').marquee({delayBeforeStart: 0});
</script>

おまけ

画像の背景色や部分個所の色を変更するのにフリーソフトのペイントを使っています。このソフトは境界部分にどちらともとれない白い箇所残るのが難点です。この処理は別のフリーソフトのpaint.netが得意です。操作はpaint.net-編集画像をロード-ツール-魔法の杖-許容範囲10%-カーソルで透過箇所選択-DELETE と指定して透明色にして画像を保存します。その後、ペイントで画像ロード-色選択-塗りつぶし箇所選択-塗りつぶし 以上で境界部分であやふやさのない色変更が可能です。