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

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

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


【使い方】

<div id="s1" class="is"><a href="http://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051102.jpg" target="_blank"><img src="http://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051102-1.jpg" /></a><a href="http://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051114.jpg"><img src="http://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: '20px', steps: -1, speed: 20, mousestop: false });
$("#s3").endlessScroll({ width: '100%', height: '25px', steps: -2, speed: 60, mousestop: false });
});
width :
height : 高さ
steps : スクロールの移動ピクセル マイナス(‐)値の場合は左方向へ移動、プラス(+)値の場合は右方向へ移動
speed : 移動スピード 「0」が一番速く、数字が大きくなるとゆっくり移動
mousestop : 「ture」の場合はマウスを乗せると動きが止まり、「false」の場合はマウスを乗せても止まらない




各数字を変更したサンプル

» 続きを読む…

AndroidスマートフォンからFAX送信『PC-FAXcom FreeFax』

3年ほど前にiPhoneからFAX送信『FAX.de FreeFax International』という記事でiPhoneから無料でFAXが送れるアプリの紹介をしましたが、そのAndroid版もありましたので、今回記事にしておきます。

PC-FAXcom FreeFax「PC-FAX.com FreeFax」というアプリです。
このアプリもiPhone版同様、1日1ページ無料でFAX送信ができます。

起動させると最初にEメールアドレスを入力する画面が出ますのでアドレスを入れます。
パソコンアドレスでもスマートフォンのアドレスでもOKです。

2014071201.gif入力したアドレスにこのようなメールが届きますので、「Activation Link」をクリックしてください。

以上で使えるようになります。

以下使い方です。

» 続きを読む…

一部だけ動く動画を作る「Cliplets」

おもしろいソフト発見!

うまく使いこなせないんだけど、静止画の一部だけ動かすソフト………
いえ、動画の一部以外を止めてしまって一部だけ動く動画にするソフトです。

↓この動画の真ん中の二人以外は動いておりません。
2014070901.gif

元動画はこちら↓


自分が撮った動画を元に作ってみたので、素材不足(動画をほとんど持っていない)ため、こんな感じのものしか作れませんでしたが、動画をうまく使うと面白いのができそうですよ。

例えば…
ソフトの提供元・Microsoft Researchさんのサイトから拝借してきました。
水だけが動いています。

» 続きを読む…

Photoscape ブログヘッダー画像の作り方

ブログヘッダーの画像をフォトスケープで作る方法について質問がありましたので記事にしておきます。

例として現在のヘッダー画像で説明します。
ajisai06.jpg

【準備編】

それぞれのパーツを準備しましょう。
ここではバックのコルク画像、白枠をつけた画像、文字の入った画像を作ります。

今回「フリーテクスチャ素材」様からコルク素材をお借りしてきました。
(フリー素材をお借りするときは規約をよく読んで違反のないように使用してください。)

2014070604.jpgここでちょっと一手間…。

コルク画像はそのまま1枚貼り付けて伸ばすだけでは間延び(?)した画像になりますので、フォトスケープの「結合」を使って大きめのコルク画像を作っておきます。

「結合」タブ→使いたい画像を複数並べる→(ここでは)「側」→「外側の余白」「写真の間隔」を「0」にする→保存

2014070606-1.jpg写真に枠をつけましょう。

「画像編集」画面でフレームを付けたい画像を表示し、「ホーム」タブの「フレーム」から(ここでは)「Border」を選択しました。

10082501.jpg 10082502.jpg
フレームを選ぶ際、ちょっと注意しておかなければならないことがあります。
影付きのフレームを選んだ場合、白い背景で見ると影しか見えませんが(画像左)、色つきの背景で見たり画像を重ね合わせたら影以外に白い部分があるのがわかります(画像右)。
そのためちょっとおかしな感じになりますので、背景が白色以外の場合は、フレームを選ぶときはよく見て影のないものを選ぶようにしてください。

2014070607.jpgまたは「フレームライン」を使って枠を作ることもできます。

フレームラインを使うと好みの色、好みの幅で枠が付けられるので、選択肢が広がります。

これらの方法で、フレームをつけたり文字を入れたりして、貼り付ける写真を加工してください。


» 続きを読む…

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
06 | 2014/07 | 08
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ