PAGE TOP

Top Page > スポンサー広告 > ○え!?jQueryでページトップへ行けるちらり演出(FC2ブログ版)▽FC2blog > HTML関連 > ○え!?jQueryでページトップへ行けるちらり演出(FC2ブログ版)

スポンサーサイト

--------  編集する スポンサー広告 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

○え!?jQueryでページトップへ行けるちらり演出(FC2ブログ版)

2015-04-15  編集する コメント数:4  HTML関連 


○そーにゃ


最近、ここのサイトを下にスクロールするとき左下にでる「ムラサキのヤツ」は一体何なんだ・・・

どうやら、クリックでページトップに飛ぶみたいだが、不気味で仕方ない・・・




○マジョ


あー、それって「jquery」で動かしてる演出効果ですな。




○そーにゃ


jquery」?




○マジョ


気になりますな!?「jquery」での演出法?
いいでしょ~、伝授して差し上げましょ~。





○そーにゃ


いや、jquer・・・




○jQueryで画像を動かすページトップ演出方法

①:下準備(ダウンロード)&全部アップロードしておくこと。
1:jquery-1.11.0.min.js
2:pagetop.js
3:pagetop.css
4:画像(縦265PX・横340PX)
②:タグをHTMLのhead内に組み込む。
<script type="text/javascript" src="(ここにアップしたjquery-1.11.0.min.js)"></script>
<link href='(ここにアップしたCSS)' rel='stylesheet' type='text/css'>

③:タグをHTMLのbody内に組み込む。
<p id="page-top"><a href="#wrapper">PAGE TOP</a></p>
<script type="text/javascript" src="(ここにアップしたpagetop.js)"></script>

○マジョ


以上ですよ~
レッツ、演出!





○そーにゃ


いや、だから、そもそもjquery・・・



コメントの投稿   コメント入力へ


ツヴァイさん(2015-04-15|17:20) コメント入編集へ


どうやら、画像は何PXでもよさそうだな・・・。

2:pagetop.js
3:pagetop.css
の2つ内にある【170px】を変更すればいい。
縦の変更は「265px」か・・・




長渡さん(2015-04-15|17:24) コメント入編集へ


なるほど・・・

画像は縦265横170の画像を2つ合わせたものを使っているんですな。
しかも背景透過処理済みのPNG画像。

透過処理だったら、下記の記事にいいことが書いてありますな。
http://geme271.blog.fc2.com/blog-entry-106.html




ベッキーさん(2015-04-15|17:26) コメント入編集へ


画像は何PXでもよさそうって・・・

あんまりデカイと邪魔だぞ、この演出。




長渡さん(2016-01-24|00:14) コメント入編集へ


今さらですが、画像の変更は【pagetop.css】から行うみたいですな。







◎表情







カテゴリ
プロフィール

Jackman

管理人:Jackman
名前:Jackman
担当:管理人
趣味:ネタ収集


◇登場人物・・・

名前:アザズゥー
担当:ツッコミ
趣味:人間観察


名前:クロウェー
担当:情報収集
趣味:占い・絵


名前:穂坂
担当:独断行動
趣味:森羅万象


名前:カク
担当:Android
趣味:潜入捜査


名前:くのいち
担当:PC
趣味:戦国無双


名前:AGIRI
担当:難問解答
趣味:密偵


名前:そーにゃ
担当:研修生
趣味:読書


名前:やすぅーな
担当:サイト拡張
趣味:日々発見


名前:長渡
担当:ユーロB
趣味:エレクトロ


名前:脳筋Ash
担当:筋肉活動
趣味:肉体覚醒


名前:片阜
担当:隠遁の術
趣味:火遁の術

No.
最新記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。