パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」:phpspot開発日誌
FractionSlider: jQuery parallax Slider Plugin | jacksbox.design パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 最近よく見る縦スクロールするとパララックス効果、ではなく横にスライドしてアニメーションっぽいスライダーが作れるプラグインです 単なる画像をペラペラ紙芝居っぽくめくるのではなくて、よりアニメっぽい表現が可能です。 <div>をリストにして定義し、中身を記述していけば作れるようです Flashでやってたようなことも、どんどん置き換わっていますね 関連エントリ ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可
[JS]入力するのが楽しくなるアニメーションを備えたフォーム -Fancy Input
フォームにテキストを入力する際、ちょっと面白いアニメーション（5種類）を与えるjQueryのプラグインを紹介します。 colissと入力、そして削除すると、こんな感じです。 Fancy Input Fancy Input -GitHub Fancy Inputのデモ Fancy Inputの使い方 Fancy Inputのデモ デモはFirefox, Chrome, Safari, Operaでご覧ください。 IEはゴメンナサイとのことで、通常通りに入力できるだけです。 デモページ デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。 ※日本語の入力は対応していないようです、残念。 Fancy Inputの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」:phpspot開発日誌
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」 2013年01月29日- scrollNav.js ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」。 ページの見出しを<h1〜6>のタグで定義しているとして、見出しを自動でサイドバーに固定で出してくれて、カレント位置の見出しを太字にしてナビゲーションしてくれます。 当然、ナビ部分をクリックすれば指定位置までアニメーションしながらスクロールしてくれます。 コンテンツを追加した際も、ナビゲーションを変えなくていいので、とっても便利ですね jQueryプラグインなので初期化するだけで利用もとっても簡単。 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「j
アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」:phpspot開発日誌
Sly - jQuery plugin アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」。 通常スクロールバーを動かすとブラウザがスクロールしますが、Slyで初期化したエレメント上でホイールを動かすとアイテムが横にスクロールする、みたいなUIが作れます。 ホイールだけではなくて、横に長いコンテンツのスクロールやページ送り、アイテムの追加等ができます。 応用して面白いインタフェースが作れそうです。 文書を入れてみた例。自動でスクロールさせたり、メインのコンテンツをハイライトしたりすることも出来るみたい 関連エントリ スクロールすると巻物風にコンテンツが回転するUIを作れる「FoldScroll」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ラ
素敵なエフェクトが複数用意されたイメージスライダー・jq-tiles
画像の切り替え時のエフェクトが とっても素敵なjQueryのイメージ スライダー・jq-tilesのご紹介で す。クロスブラウザという訳では 無いのでこのままだと用途は限ら れますけど・・ 素敵なエフェクトが用意されたスライダー。CodeCanYouにあるような有料のスクリプトでたまに見かけるタイプです。OSSで公開されてるのはちょっと珍しいかも。 タイル状に画像が切り取られながらフェードアウトします。他にもいろいろ。 目を惹く事は出来そうです。 $('.foo').tilesSlider()本体とプラグインを読み込んで初期化すれば動作します。 { x : 4, // x軸にタイルを動かす数値。最大20 y : 4, // y軸にタイルを動かす数値。最大20 effect : ‘default’,//エフェクト指定 fade : false, // フェードさせるかどうか auto : f
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
jQueryで使い勝手の良さそうなイメージギャラリー
htmlに直接書き込んでいる以下の部分についても若干説明。 <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: false, numeric: true }); }); </script> autoは自動的に次の画像に移動するかどうか、continuousは自動的に次の画像に移動して最後までいった場合、最初に戻るかどうかです。 たいした説明ではないですが、サンプルもあるので問題ないと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
