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"
JavaScript で要素のクラス属性を操作してスタイルを変更するような場合、IE8 には :before/:after 擬似要素のスタイルが再描画されないというバグがある。 <p> <a href="#" class="selected">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> </p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $('p').each(function () { var $links = $(this).find('a'), i = $links.filter('.selected').eq(0).index(), len =
あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。 「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト（list-style-type: decimal）のような感じですね。「counter-increment」で番号を付ける対象を指定して、疑似要素を使って表示することになります。 疑似要素を使っているため、IE7以下は非対応ですのでご注意ください。 今回サンプルを２つ用意しました。 ではHTMLから順番に解説していきます。 HTML HTMLはどちらのサンプルも同じで以下のようになっています。 <div class="divCount"> <h4><a href=
WPSHOUTというサイトで、WordPressをカスタマイズするTipsが紹介されています。 いくつかご紹介しますね。 ・カスタムフィールドを使わずにトップページにリサイズされたサムネイル画像を表示する WebDeveloperPlusを参考に実装 ・ピックアップコンテンツギャラリーをjQueryで実装 雑誌のようなデザインの要素の一つに、画像を使った特集コンテンツがある。 WebDeveloperPlusをWordPress用に書き直している ・エントリーの下にソーシャルメディアへのリンクを配置する ソーシャルメディアアイコンはA quick Googleから探せる。 DeliciousやDiggへ追加するパラメータの付け方を紹介 ・人気のあるエントリーを表示する WP-PostViews pluginが便利 結構いい感じのが揃っていると思うので、一度見てみてください。 » 10 Ti
eBiz Facts is reader-supported. When you buy with our links, we may earn a commission. Learn more. Welcome to my concise website slider guide. If you want to know: The pros and cons of using a slider on your website If your website already has built-in slider capability How to “roll your own” slider What happened to the original jQuery Coda Slider plugin Then you’ve come to the right place. Let’s
devSnippetsで、WordPressをこじゃれたものにするためのテクニックが紹介されています。 ざっといくつかご紹介。 » Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+ ログインパネルをスライディングパネルにして短いWelcomメッセージを表示 » jBreadCrumb パンくず要素が長すぎる場合にスマートに折り畳んでくれる » Sliding Boxes and Captions with jQuery マウスオーバーするとスライドして画像が切り替わるインターフェース » Fantastic News Ticker Newsvine-like using Mootools mootoolsを使って縦にスクロールするニュースティッカー » J Post Slider 画像をローテーションしたりして記
今作成している案件で、結構ボリュームのある一覧表を載せるページがありまして…。 縦に長い表だと、視認性を上げるために１行おきに背景色を変更するなんてコトも常套手段となる訳です。 これまでは手作業で、tr要素にclass指定をして、CSSで背景色を変更したりしていたんですが、この方法だと表の途中で追加したり、削除したりという修正がとても手間…というか、ほとんどやり直しになってしまいます。 Javascriptを使えば、何か手軽な方法があるんだろうなぁとは思っていたモノの、なかなか必要に迫られずにサボっていました。 前置きが長くなりましたが、 調べた所、jQueryを使えばとても簡単だ！というコトが分かり、紹介してみます。 参考にしたのは、「sukechan.net」さんの「jQuery でテーブルの背景色を 1 行置きに変更する」というページです。 まず、jQueryから最新のスクリプトをダ
May 08, 2007 17,799 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
