マウスオーバーでアニメーションするボタン（その2）
人様のソースコードを読み解くシリーズです。ものすごい忙しいというわけではないのですが、PCを開くのがちょっと億劫になっています…。 今回は、前回の続きです。「3.マウスオーバーした画像に何かが追尾するナビゲーション」「4.拡大するナビゲーション」「5.横からぐいんって伸びるナビゲーション」を見てみます。 3.マウスオーバーした画像に何かが追尾するナビゲーション Java Script...
View Articleスクロールしたら「トップへ戻るボタン」を表示するjQuery
人様のソースコードを読み解くシリーズです。今回もいつも参考にさせてもらっているwebOpixelさんのブログから。 jQueryでスクロールすると表示する系いろいろ | webOpixel 今回は5回にわたって勉強してみようと思います。 1.ちょっとスクロールしたら「トップへ戻るボタン」を表示 最初のは以前やったとほぼおなじなので割愛。 人様の書いたjQueryコードを読み解く |...
View Articleスクロールしたらヘッダーにメニューを固定表示するjQuery
人様のソースコードを読み解くシリーズです。前回の続きです。 jQueryでスクロールすると表示する系いろいろ | webOpixel 2.スクロールするとヘッダーに固定表示（アニメーションバージョン） Java Script $(function() { var nav = $('.nav'); //表示位置 var navTop = nav.offset().top+500;...
View Article一番下までスクロールするとコンテンツが横からスライドして表示するjQuery
人様のソースコードを読み解くシリーズです。前回の続き、その3です。 jQueryでスクロールすると表示する系いろいろ | webOpixel 3.下部までスクロールすると横からスライドして表示 Java Script $(function() { var winWidth = $('body').outerWidth(true); var footer = $('#footer'); var...
View Article下部までスクロールすると右下に配置したコンテンツが開くjQuery
人様のソースコードを読み解くシリーズです。前回の続き、その4です。前回から随分、時間が空いてしまいました…。 jQueryでスクロールすると表示する系いろいろ | webOpixel 下部までスクロールすると右下に配置したコンテンツが開く Java Script $(function() { var slide = $('#slide'); var contents =...
View ArticlejQueryで同一ページで複数の画像ギャラリーを表示する
人様のソースコードを読み解くシリーズです。今回は、サムネイル付きのギャラリーです。スライドショー付きではありません。 同一ページで複数のスワップイメージ（ギャラリー）を見せたい – DEPTHCODE 共通のHTMLはこちら。 <div class="swap"> <p><a href="img/img1_b.jpg"><img...
View Article1行テキストをフェードインしながら切り替えるjQueryスクリプト
人様のソースコードを読み解くシリーズです。1行テキストをフェードインしながら切り替えるjQueryです。 jQueryでApple風インフォメーション JavaScript（jQuery)は以下のとおりです。 Java Script $(function() { function headline() { setTimeout(function() { headline(); $("#news...
View ArticlejQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
人様のソースコードを読み解くコーナーです。今回は、画像をランダムに表示させる方法です。 jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法 | BlackFlag Java Script $(function(){ var setElm = $('#thumblist img'), delaySpeed = 100, fadeSpeed = 500;...
View Articleリサイズが完了したタイミングでjQueryコードを実行する方法
レスポンシブWebデザインのWebサイトを作る際、リサイズの処理をよくするのですが、処理回数が多いと、表示に負荷をかけてしまいますので、リサイズが完了したときだけ、処理をする方法がないか調べていたらありました。 jquery/js＜レスポンシブでウィンドウサイズを変えた時だけ何かするjs＞ – Qiita Java Script $(function() { var w =...
View ArticlejQueryを記述する際に、クリックの動作とホバーの動作をうまく制御する方法
ある要素に、クリックの動作とホバーの動作のふたつを設定したい時があります。その際、ホバーして、クリックして、ホバーアウトして、という動作をするとうまくいかないところが多々ありました。 これをどうにかならないかなーと思っていましたら、対処方法がありました！ jQuery – ボタンのマウスホバーとクリックを共存させる – Qiita Java Script $(function() { //...
View Article
