You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()(.bind())で使うのはどうやるんだろう?とかわかるようでわからなかったので、ちょっと調べてみた。 .hover()を利用してみる とりあえず、.hover()の使い方からおさらいしてみたいと思います。 .hover()メソッドは、マウスを乗せた時とはずした時の2つの処理を入れておくことで、実現できます。 $('#demo1 p').hover(function(){ $(this).fadeTo('fast',.3); },function(){ $(this).fadeTo('fast',1); }); マウスを乗せると、少し透明になり、はずすともとに戻るという機能です。 以前は乗せた時とはずした時の2つの処理を入れておかなければエラーだったのですが、現
ヘッダにID指定させる方法 ブログで一般的に書かれている方法は $(“#cancel”).click(function(){ parent.$.fn.colorbox.close(); return false; }); ※↑はjsに上記を追加し、閉じるボタンにid=”cancel”を追加する方法。 でもこれってちょっと面倒くさくない? 閉じるボタン一個だけの場合は、シンプルにその場だけでcloseさせたいんですけどー! ・・・・そういう場合は下記で出来ました。 閉じるボタンの要素に直接リンク指定をする 方法。 リンクに直接書く方法 <a href='#' onclick="$.colorbox.close(); return false;">画像やテキスト</a> 上記普通にcolorbox.jsに元々あるcolorbox.close();を呼び出してるだけ。 シンプルですね。
perfect-scrollbar 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 要素にフォーカスするとスクロールバーが現れて、コンテンツの邪魔にならない程度に表示されるスクロールバー。 どんな大きな要素も指定の範囲に収めてスクロールバーを使ってコンテンツは閲覧可能という状態にできます。常にスクロールバーが表示されていたら邪魔ですが、フォーカスを外すと消えるのがいい感じ。 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 クールなスクロールバーを実装するためのjQueryプラグイン集
星の数ほどあるたくさんのjQueryのプラグインから、目的にあったものを探すのはなかなか大変ですよね。そんな時に役立つ便利なサイトをまとめました。 まずは手前ミソで自分がまとめたものから。 これは本当に多大な労力と実際の動作確認もしているので自信をもってオススメできます。 jQueryのプラグイン100選 -2013年総集編 日々チェックしているスクリプトから厳選して一年単位でjQueryのプラグインをカテゴリごとに選出しています。プラグインの半分近くは個別に記事も書いてあります。 jQueryのプラグイン100選 -2012年総集編 jQueryのプラグイン100選 -2011年総集編 jQueryのプラグイン100選 -2010年総集編 jQueryのプラグイン100選 -2009年総集編 jQueryのプラグイン100選 -2008年総集編
ページのコンテンツをランダムに表示する機能をjQueryを使って作成しました。最初にHTMLには要素の記述が全部書いてある状態なので、JavaScriptがオフでも順序が入れ替わらないだけで表示はされます。 HTML サンプルに例として以下のHTMLを用意しました。 <ul class="contentBox"> <li> <div class="box"> <h2>見出し1</h2> <p class="img"><a href="http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%81%E3%82%B4" target="_blank"><img src="01.jpg" width="220"height="150" alt="いちご"></a></p> <p>イチゴ(苺、莓、Fragaria)はバラ科の多年草。食用として供されている部分は花托(
phpとかjavascriptとかgolangとかreactを中心につらつら適当に書いてたりなんだり。 パララックスサイトを最近作る機会があり、 普通にjsでscrollを取って諸々計算する方法でもいいかなと思ってたんだけど、 メンテナンスとかを考えると面倒だと思ってScrollTween.jsというのを使った。 もちろんパララックス系のライブラリはいくつもあったりはするんだけれども、 自由度が低いというかシーンが限られてるというか…みたいな感じであった。 その点ScrollTween.jsは直感的にいける感じのライブラリで中々良い。 ちなみにダウンロードはこちらから。 <script src="js/jquery-1.8.1.min.js"></script> <script src="js/ScrollTween.js"></script> <script src="js/jquery
JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法 2006年08月17日- Mouse wheel programming in JavaScript Web applications are becoming more and more like “normal” desktop applications. Of course, they are more and more functional, but smooth user interface acts the primary role. So we have drag and drop, autocompletition, and much more. Many of those nice features got possible only with help of AJAX. JavaScriptで
Fancybox #Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content. This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is ea
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か?【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワーアップしたjQueryのプラグインを紹介します。
twitter facebook hatena google pocket いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollToを駆使しています。 URL:http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ demo:http://ianlunn.co.uk/plugins/jquery-parallax/ #2 JoelBesada/scrollpath GitHub 見えないパスにそってスクロールしていって気持ちいい感じです。 こんな記述が必
jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる 通常はマウスホイールでのスクロールするとピタッと止まりますが、止まるときに余韻が残ったりするとなんだかリッチな感じがしますよね。 ということでjQueryで、その動きを作ってみました。 投稿日2011年08月10日 更新日2011年08月10日 プラグインのダウンロード jQueryはもちろんのことですが、ここではマウスホイールを検出するために「MOUSE WHEEL EXTENSION」と、かっこよくスクロールするために「jquery.easie.js」というプラグインを使用します。 MOUSE WHEEL EXTENSION jquery.easie.js javascript javascriptのコードは以下のようになります。 javascript <script type="text/javascript"
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 (注:スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。) jarallax.jsとは? パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら: http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く