Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」:phpspot開発日誌
Smoke Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 フォームのバリデートや通知、モダンなプログレスバー、フルスクリーン機能、パネル等の機能を追加できます。 より今っぽいサイトを作るのに役立ちそうなプラグインなのでBootstrapを使う人は知っておいて損は無いと思います 関連エントリ Bootstrapのポップアップを強化する「WebUI Popover」 Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 Bootstrapなサイトでレスポンシブなタブナビゲーションを実現する「Responsive Tabs」 Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」 BootstrapのDropdownを使うなら必ず知っておきたい「Bootstrap Enhanc
サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！ 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。 では早速行きましょう！ オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
フルスクリーンでタッチデバイスでも使いやすいナビゲーションメニュー実装:phpspot開発日誌
Full-Screen Pushing Navigation in CSS and jQuery | CodyHouse フルスクリーンでタッチデバイスでも使いやすいナビゲーションメニュー実装。 PC時代はコンパクトにまとめるのがよかった気がしますが、タッチデバイス時代では画面上に大きく表示したほうがタッチもしやすくて使いやすいと言えそう。 こういう部分も自分含めた昔からWEBを作っている人は頭を切り替える必要がありますね 関連エントリ 美しいナビゲーションメニューを自動生成するjQueryプラグイン「MenuItems」 ページ自体のサムネイルを作ってナビゲーションにできる「Minimap」
スクロールするとふわっと現れる文字や画像 | UNORTHODOX WORKBOOK | Blog
書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみました。 最近良く目にするあれ とは、スクロールしていくと突然何もなかったところからふわっと現れる文字や画像のこと。何て言うのか知らないので「あれ」と表現しました。すみません。。。 つまりこれのこと そしてこれもそう さらにこれもです コード HTML <div> <p id="animation">ここの文字が現れる</p> </div> テキスト部分を画像(img)にすれば、画像をふわっとさせることができますね。divやpの装飾は適宜行ってください。 JS $('#animation').css('visibility','hidden'); $(window).scr
画像上などにスポットライトをあてた効果を作れる「Spotlight」:phpspot開発日誌
Spotlight 画像上などにスポットライトをあてた効果を作れる「Spotlight」。 次のようにリアルなスポットライトをあてる表現がつくれ、更にアニメーションも可能。 デモをみるとかなりリアルに近い表現ができているのが確認できます 関連エントリ 数値のカウント上昇をアニメーション表示できる「countUp.js」 複数の要素をなめらかに動かすアニメーションライブラリ「snabbt.js」 スムーズな色切替アニメーションが実現できる「sweep.js」
【WordPress】他のブログ記事をRSSで取得する - Qiita
WordPressにRSSを取得するfetch_feedという関数があるので、これを使う。 こんな感じ <?php include_once(ABSPATH . WPINC . '/feed.php'); $rss_url = array( 'RSS_url' ); $rss = fetch_feed($rss_url); if (!is_wp_error($rss)){ $maxitems = $rss->get_item_quantity(5); $rss_items = $rss->get_items(0, $maxitems); } foreach($rss_items as $key => $value){ $first_img = ''; if ( preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $value->g
jQuery リファレンス：slideToggle
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
jQuery Performance Tips – jQueryにおける高速化 -
リッチなWebアプリケーションに対するニーズの増加に伴い、JavaScriptで十分なパフォーマンスを担保することが難しくなってきています。とりわけ、スマートフォンのような非力なデバイスでは一層シビアなチューニングが求められるでしょう。本セッションでは、もっともポピュラーなJavaScriptライブラリである「jQuery」を中心とした、いくつかのパフォーマンス解決のためのヒントについてご紹介させていただきます。 http://frontrend.github.com/events/04/#pocotan001Read less
Wikipediaから指定したキーワードに該当するページの簡単な情報を手軽に取り出せるjQueryプラグイン・jQuery Wikipedia Plugin
Wikipediaから任意のキーワードに該当するページにある情報を手軽に取り出せる、というスクリプトのご紹介。地味に使いどころあるかもと思ったので備忘録です。 Wikipediaからキーワードの簡単な情報を表示する、みたいなやつです。 動作デモです。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> <script src="jquery.wikipedia.js" ></script>本体とプラグインを読み込む。 $('#foo').WikipediaWidget('東京');キーワードを指定する。 <div id="foo"></div>要素を用意する。これで読み込めます。 ただし、動作デモのように日本のページ
iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」:phpspot開発日誌
Catch My Fame New jQuery LightSwitch Plugin iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」。 次のようなUIで、チェックボックスやradioボタンと同じ働きをするUIを作ることが出来ます。 true, false で on/ off を切り替えるUIと、それらがDisabledになった例 radioボタンと同じ動きをする例。１個をyesにすると他がnoになります。 デモはこちら checkboxはありましたが、radioとして動くのは無かったかもしれませんね。 関連エントリ iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」 iPhoneスタイルのチェックボックスをjQueryで簡単実装 何を入力したかが分かるiPhoneスタイルのパスワ
Rocking and Rolling Rounded Menu with jQuery | Codrops
In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a […] In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タグによるフィルタリング機能を実装できるjQueryプラグイン