画像や文字をスクロール jQuery「Endless Div Scroll」

jQueryで画像や文字をスクロールさせるプラグインを見つけましたので、備忘録として記事にします。
(読み込みに時間がかかります。画像が動かない場合はしばらくお待ちください。)

ダウンロード、その他詳細はこちら→Endless Div Scroll jQuery Plugin


【使い方】

<div id="s1" class="is"><a href="https://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051102.jpg" target="_blank"><img src="https://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051102-1.jpg" /></a><a href="https://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051114.jpg"><img src="https://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051114-1.jpg" /></a></div>


【CSS編集部分】
.is{
border-top:5px solid #555555;
border-bottom:5px solid #555555;
background-color:#555;
}
.is img{
border:0px solid #f00;
border-left:0px solid #00f;
}




画像や文字をスクロールして表示させるjQuery「Endless Div Scroll」。マウスオーバーで動きを止めたり、流れる方向を変えたり、スピードなどを変更することができます。

<div id="s2" class="es"><span style="color:#0000FF">画像や文字をスクロールして表示させるjQuery「Endless Div Scroll」。</span>マウスオーバーで動きを止めたり、流れる方向を変えたり、スピードなどを変更することができます。</div>


.es{
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',Osaka,sans-serif;
font-size:14px;
margin:0px auto 0px auto;
background-color:#ff9;
-moz-border-radius: 15px;
border-radius: 15px;
border:1px solid #cccc33;
padding:4px;
}




背景色、枠線、フォント、文字の大きさを変えてみました。abcdefghijklmn ABCDEFGHIJKLMN 

<div id="s3" class="es2">背景色、枠線、フォント、文字の大きさを変えてみました。abcdefghijklmn ABCDEFGHIJKLMN </div>


.es2{
font-family:Comic Sans MS,"MS P明朝","MS 明朝",serif;
font-size:18px;
color: #fff;
margin:0px auto 0px auto;
background-color:#666;
-moz-border-radius: 5px;
border-radius: 5px;
border:3px solid #f00;
padding:4px;
}



HTML編集部分

$(window).load(function () {
$("#s1").endlessScroll({ width: '100%', height: '100px', steps: 1, speed: 30, mousestop: true });
$("#s2").endlessScroll({ width: '100%', height: '30px', steps: -1, speed: 20, mousestop: false });
$("#s3").endlessScroll({ width: '100%', height: '40px', steps: -2, speed: 60, mousestop: false });
});
width :
height : 高さ
steps : スクロールの移動ピクセル マイナス(‐)値の場合は左方向へ移動、プラス(+)値の場合は右方向へ移動
speed : 移動スピード 「0」が一番速く、数字が大きくなるとゆっくり移動
mousestop : 「ture」の場合はマウスを乗せると動きが止まり、「false」の場合はマウスを乗せても止まらない




各数字を変更したサンプル
「width: '100%', height: '100px', steps: 10, speed: 200, mousestop: true」の場合
動きをカクカクさせてみました。


「width: '100%', height: '100px', steps: -2, speed: 30, mousestop: false」の場合
左方向へ移動、マウスを乗せてもスクロールは止まりません。





HTMLタグを使うとよく似た感じのことができます。


文字が右から左に流れる
文字が波打って動いたりとかもする……
 ( ↑safariでは動かず、Chromeでは波打たず流れるだけです。)

こちらの使い方は簡単
<marquee>文字または<img scr="画像のURL"></marquee>

「eWeb」様「文字の移動 <MARQUEE>」の説明がわかりやすいと思います。


関連記事

4 Comments

Eve@館長  

(>▽<)

れんさん、こんにちは♪

またまた面白いことを~(笑)
最後の波打ち文字お気に入りですi-278

実は昔、本館のほうでJavaやらFlashやらDynamicHTMLといった
ものを使ってTOPに季節の画像(Xmas等)なんかを流してましたi-179
今はこんなのが残ってるだけi-229

http://tljmuseum.fc2web.com/Works/worksmain.htm
http://tljmuseum.fc2web.com/Gallery/indexwipe-cannes.html
http://tljmuseum.fc2web.com/Gallery/filmflash.htm

もうやり方を忘れてしまってソースを見てもさっぱりi-238

本当はブログのTOPをこういう具合に動かしたいんですよね~
TOPは無理でも記事内に設置できるようトライしてみようかなi-237

って前回のClipletsもまだできないのに(笑)
なかなか動画が決められなくてi-230
さくさくっと出来てしまうれんさんが羨ましいです~

いつも色々教えていただきありがとうございます。
過去記事にあった、画像表示でお聞きしたいことがあったのですが
これはまた次の機会にi-228

2014/07/22 (Tue) 14:47 | EDIT | REPLY |   

れん  

Eve様

Eveさん、こんにちは♪
返信が遅くなりましたm(__)m

こういうの、楽しいですよね~(#^.^#)
Flashも自在に使いこなせるようになりたいのですが、全くわからず…(T_T)
でもFlashのなめらかな動きが好きなので、そういう意味で、jQueryは私にとっては楽しいのかも。

私も昔サイト持ってた時にハマってました!
メニューの表示方法とか、凝ってたしまってたわ~( *^艸^)
あとjavaアプレット使って画像にエフェクトかけたり(?)とか…♪
今はjavaアプレットはブラウザでブロッグされて表示されにくくなってしまってるみたいですが…(^^ゞ

Eveさんのスライドショー拝見してきました♪
3つ目のFlashのスライドショーみたいなの好きなんです♪
で、jQueryでもこんな感じに表示できるのがあったりして、ブログで使ってみようかな~とトライしてみたりするのですが、けっこう苦戦して、結局できなかったり…っていうのも多いです。
ブログはページごとではなく、全体でHTMLやCSSを組んでいるからかな…。
サイトだとそのページそのページでそれぞれ組めるからうまくいくんですが…。

たまにスライドショー設置してあるブログで、写真拝見したいんだけど、Firefoxでは動かなかったり(クリックしても変化なし)とかあるんです。
そういうのに出会うとちょっと悲しい…(T_T)
かと言ってIE嫌いだから、IEに変更して見に行く気にもならず……。

こんな悲しい(?)経験上、ちょっと変わったもの使った時はいろんなブラウザで動くかどうか確認必須にしております。
今回も確認してみると「文字の波打ち」は表示されるブラウザと表示されないブラウザがありました(T_T)

これからもjQueryのお気に入りで、上手く設置できたものは備忘録として記事にするつもりです。

いつもコメントありがとうございます♪

2014/07/23 (Wed) 12:47 | EDIT | REPLY |   

ケロケロ66  

おはようございます。
コメントいただけてとってもうれしかったので私も・・・^^

写真がスライドしたり文字が波打ったりスゴイですね!
私ブログはしていますがPCのことはほとんど素人ですので、紹介されていることが神業のように思ってしまいます。
リンクいただいてもいいですか~?

2014/08/01 (Fri) 09:30 | REPLY |   

れん  

ケロケロ66様

ケロケロ66様、お越しいただきありがとうございますm(__)m

ブログでもいろんなことできるんですよ!
で、自分で使っててもすぐに使い方忘れてしまうので、お気に入りのものに出くわすと備忘録として記事にしています(#^.^#)

リンクしていただけるのですか!
光栄です♪
私の方もリンクさせてくださいね。

けっこう放置気味で更新していませんが、これからもよろしければ遊びに来てくださいね!
よろしくお願いいたしますm(__)m

2014/08/01 (Fri) 21:23 | EDIT | REPLY |   

Post a comment