サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
pannyatto.firebird.jp
Roulette.js Roulette.jsは、画像をルーレット(スロット)のように回転させることができるjQueryプラグインです。 画像を数字に変更すれば、ビンゴっぽいのも作れるかも。 みてもらうのが一番早いと思うので、サンプルをご覧ください。 → ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。 ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。 使い方 こちらのサイトをご覧ください。公式のデモページになってます。回転スピードを調節したり、止まった時にでる画像を指定したりと、いろいろ試すことができます。 http://demo.st-marron.info/roulette/sample/dem
文章が長くなってしまったときなど、「続きを読む」などで文章を省略させて途中まで表示させたい場合があります。 その「続きを読む」が簡単に実装できて、リンクをクリックすると、残りの文章がアコーディオン式に表示されたり、非表示にしたりの動作を簡単に実装することができるのが、このjQueryプラグイン『jTruncSubstr』。 このjQueryプラグインは、『jTruncate』というjQueryプラグインをもとに日本語でもスムーズに使えるようにしてあります。ちなみに『jTruncate』は日本語ではダメ・・。 その動作はサンプルを見て頂いた方が早いと思います。 ⇒ アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』 使い方は続きをご覧下さい。 使い方 まずは、次のサイトからプラグインをダウンロードしてきます。 http://semooh.j
Text Opening Sequence with CSS Animations | Codrops 今回は、テキストを映画のトレーラーやオープニング風にアニメーションさせて表示させる「Text Opening Sequence with CSS Animations 」を紹介します。 サンプルをみていただいたほうがわかりやすいと思います。 映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」サンプル (古いInternet ExplorerなどのCSS3に対応していないブラウザでは作動しません。) まるでフラッシュを使っているような動きですね。使用されているのはCSSですので、テキストを簡単に変更できます。またフラッシュを使用するよりもSEO的に効果が見込まれそうです。 【使用方法】 まずは、Text Op
Portfoliojs 今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。 このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。 サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。 レスポンシブデザインにぴったりな横スクロールスライダー『Portfoliojs』サンプル スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。 【使用方法】 まずはこちらのサイトからZIPファイルを一式ダウンロードして解凍します。 <head>部分で最新の jQuery と Portfoliojsを設定しま
jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。 特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。 画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。 タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。 サンプルを作ってみました。 タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。 【設置方法】 こちらからファイルをダウンロー
WordPressの無料テーマ「Virtue」をご紹介します。 ビジネスサイト、個人サイト、ポートフォリオ、ギャラリーサイト、ブログ、オンラインショップ…などなど、このテーマを活用できるシチュエーションが幅広いのが特徴です。無料とは思えない機能の豊富さと美しいシンプルなデザインです。 【おもな機能】 ・レスポンシブ ・eコマース機能(Woocommerce) ・Retina対応 ・スライダー機能 ・カスタムポストタイプ ・カスタムウィジェット ・コントロールパネル ・150+ アイコン ネットショップに必要な機能も揃っているようです。 オンラインショップにはWordPress用のプラグインWoocommerceが利用されているとのこと。 ♦︎ WooCommerce公式サイト WooCommerce – a free eCommerce toolkit for WordPress WooC
スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。 メニューアイコンをクリックすると、にゅるっと動いて各メニューが現れます。スマホファーストのお洒落なサイトに良いのではないでしょうか。もちろん、パソコンでもいい感じです。 サンプルをご覧下さい。> にゅるっと出てくるスマホで便利なお洒落なメニュー「Animated Border Menus 」サンプル パソコンの古いブラウザでは動きません。スマホやタブレットでは大丈夫でしょう。 【設置方法】 まずは、こちらのAnimated Border Menusからソースを一式ダウンロードします。 <head>部分にCSSを指定します。 <link rel="stylesheet" type="text/css" href="css/normalize.c
SMINT メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。 スクロールさせても、ナビゲーションバーがページの上部に固定されます。 サンプルをご覧下さい。 → 超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル ワンページスクロールサイトの人気はまだまだ続いていますね。ワンページスクロールサイトは訪問者にとって迷いにくいデザインです。必要な情報を確実に見て貰いたいという場合には有効です。 一から作ろうとすると意外と手間のかかるナビゲーション付きワンページスクロールサイトですが、このjQueryプラグインを使用すると簡単です。 それでは、設置方法の説明をします。 こちらのサイトから一式ダウンロードしてきましょう。こちらのサイトもこのjQue
Pop Circle クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。 中央の円(トリガー)をクリックすると、それを囲む様にメニューが飛び出します。メニューの飛び出す方向は、円状の、半円、1/4円に変更することが出来ます。 まずはサンプルをご覧下さい。 → メニューが飛び出すjQueryプラグイン「Pop Circle」サンプル アニメーションするスピードや飛び出すときの効果などもカスタマイズできます。 メニューに使うのもよし、イメージギャラリーにするのもよし、アイデア次第ではサイトにユニークな演出を与えることができそうです。 設置方法は続きをご覧下さい。 【使用方法】 まずはこちらのサイトからjQueryプラグインをダウンロードします。 http://popcircle.vinmein.com/ <head>部
dbpas / dbpasCarousel カルーセルとは、画像やテキストなどのコンテンツを横にスライドさせながら表示させるWebデザインです。Amazonや楽天などのECサイトでもよく見られますね。 カルーセルを実装するjQueryプラグインやJavascriptはいろいろなサイトで多数紹介されていますが、ここではおなじみの<ul>要素を自動的にカルーセルに変換して表示してくれるjQueryプラグイン『dbpasCarousel』を紹介します。 サンプルをご覧下さい。 →「ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル」 設定もいたって簡単。jQueryを読みこませて、<ul>タグと<li>タグを利用してリスト表示で記述するだけです。 では使用方法をみてみましょう。 まずはこちらのサイト(dbpasCarousel)からファイルをダ
Responsive Multi-Level Menu | Codrops 今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。 限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。 まずは、サンプルをご覧下さい。 レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル 古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。 【設置方法】 こちらのResponsive Multi-Level Menuからソースをダウンロードします。このダウンロードしてきたソースファイルをもとに設置してみます。 <head>部分にCSS関連を読み込む記述をします。 <link rel="stylesheet" type="
Sidr スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。 FacebookのページやYouTubeでも使われていますね。画面の広さが限られたなかでは、必要となってくる機能です。 今回はこのメニューをjQueryプラグインを使って簡単に作ってしまいましょう。 サンプルを2つ作ってみました。 クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その1 クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その2 設置もとても簡単です。 まずは、Sidr – A jQuery plugin for creating side menusから、ファイルを一式ダウンロードしてきます。 そして、<head>部分でcssファイルを読み込ませます。あらかじめ用意されているデザインに、darkとli
<script type="text/javascript"> //入力変数 var scrapper_total_width = 400; // テキストボックスの幅 var scrapper_image_width = 100; // サムネイルの幅 var scrapper_image_height = 100; // サムネイルの高さ //出力変数 var scrapperLinkURL; //contains a URL if present in the scrapperText var scrapperLinkTitle; //contains the title of the URL webpage var scrapperLinkDescription; //contains a short desription of the URL var scrapperLinkIm
AD Gallery 今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。 最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。 設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。 サンプルを作ってみました。 シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」サンプル 各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。 Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。 【使用方法】 まず、こちらのAD Gall
FitText ブラウザのウィンドウズサイズ、またはiPhoneなどデバイスの画面の大きさに合わせてテキストの大きさを自動で調整してくれるのがこのjQuery「FitText」です。 ウィンドウズサイズにあわせて、文字が大きくなったり小さくなったりします。 サイトのタイトル表示に使えそうな機能です。 サンプルはこちらからどうぞ → ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」サンプル また、こちらのサイトではうまく「FitText」を使用されています。このように主にタイトルに使う機会が多そうですね。→ Trent Walton’s blog (http://trentwalton.com) 「FitText」の使用方法は続きをどうぞ。 まずは、githubからZIPファイルを一式ダウンロードします。 以下のコードを</body>の直前に記入します。 <sc
Jquery Interactive Animated Menu メニューがゆっくり回転するアニメーションになっています。 この「Jquery Interactive Animated Menu」を利用すれば簡単に実現できます。 CSSや画像を少し変更するだけでも、ユニークなトップページが作れますので、専門的な知識がなくても使われている画像を変更したりして利用できると思います。ポートフォリオ用のサイトにも適してそうですね。 サンプルを作ってみました。 → 観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」サンプル サンプルは使われている画像を変更しただけです。 最新のブラウザに対応していますので、古いブラウザでは動作しない場合があります。 この「Jquery Interactive Animated Menu」の入手方法と利用方法は
spritespin jQuery plugin ネットショップなどではいかに商品をお客様に伝えるかが大切になります。商品によっては360度全方向から商品のイメージをみせたい場合もあるでしょう。 このjQueryプラグイン「Spritespin」を利用すれば360度全方向からのビューが簡単に実現できます。FLASHを使用していないのでiPhoneなどでも表示されます。 サンプルはこちらになります。 → 商品画像を360度回転させてみせることができるjQueryプラグイン「Spritespin」サンプル 画像を準備すれば簡単に実装できます。ただ商品を回転させながら全角度からうまく撮影するにはちょっと工夫が必要になりますね。 【使用方法】 まずはこちらのsprite spinのサイトからダウンロードします。ちょっとわかりにくいですが、「You can download this project
Page Transitions with CSS3 ページを切り替えるときに効果を与える方法はいろいろありますが、ほとんどはjQueryなどのJavaScriptを使用したものがたくさん溢れているような気がします。 しかし今回はCSSのみを使用して、ひとつのページでコンテンツをスライドさせて切り替える『Page Transitions with CSS3』を紹介します。 <div>~</div>で囲んだdiv要素ごとにページを作成し、コンテンツをスライドさせてページを切り替えるワンページャーのウェブサイトを作ることができます。 とういうことで、サンプルページを作ってみました。こんな感じになります。 → 『Page Transitions with CSS3』サンプルページ jQueryを使用していないので、jQueryなどをダウンロードする必要はありませんが、『Page Transiti
jQuery.mb.YTPlayer メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。 本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。 参考:NEXT A-Class │ メルセデス・ベンツ日本公式サイト このサイトを一部再現してみたいと思います。(注意:現在リニューアルされています。2016/10) 今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。 サンプルページを作ってみました → YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル 過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で
サイドバー風のナビゲーションパーツをスクロールさせても一定の場所に固定してくれるのが、このjQueryプラグイン『stickyMojo』です。動作も軽くスムーズで、違和感がない固定のサイドナビゲーションが実装できるので便利です。 サンプルを作ってみました。 → 「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」サンプル フッターのコンテンツまでくると、フッターと重ならないように調整してくれますね。このように画面をリサイズしてもメインコンテンツと重ならない、またフッターコンテンツと重ならないように固定できます。 設置の仕方も簡単です。 【使用方法】 まずは、本家の「stickyMojo.js」のサイトからjsファイルをダウンロードします。 <head>の部分にJavascriptを呼び出すコードを記述します。
高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。 サンプルを作ってみました。ご覧下さい。 →「Camera slideshow」をフルスクリーンで背景にするサンプル フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。 【設置方法】 まずはこちらのCameraのサイトからファイル一式をダウンロードします。デモを含むZIPファイルを利用するとわかりやすいと思います。(デモにはサムネイルを利用したフルスクリーンのデモが含まれています。) <head>部分にcssを設定して、以下のスタイルのコードを記述します。#contentsのスタイルは自
Sliding Letters with jQuery 「Sliding Letters with jQuery」を利用すると、マウスオーバー(テキストにカーソルを合わせたとき)にお洒落にテキストがが変化します。 ちょっと大胆なメニューやリンクテキストを強調させるのに使えそうです。少しHTMLとCSSがいじれれば簡単にアレンジができます。 サンプルを作ってみました。 → テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル ポートフォリオサイトだけでなく、美容室やサロンなどのおしゃれ系なサイトに活用できそうです。背景画像も設定できるので、イメージに合わせて背景画像も変えてみて下さい。 【使用方法】 まずはこちらのSliding Letters with jQueryのサイトからファイルを一式ダウンロー
今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。 サンプルをみてもらうとわかりやすいと思います。 →「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』サンプル」 レスポンシブ対応のドロップダウンメニューですので、スマホなどでも綺麗に表示されます。jQueryプラグインは使用していません。 【設置方法】 まずはcssファイルを作成します。ソースは以下の通りです。 CSS .top { background: #212121; color: #fff; position: absolute; left: 0; top: 0; right: 0; z-index: 2; overflow: hidden; } .drawer { -webkit-tr
BlocksIt.js jQueryのサンプル by ぱんにゃっと/H&Y
Fullscreen Pageflip Layout 本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は、こちらの「Fullscreen Pageflip Layout 」を利用すると良さそうです。 ぺらぺらの紙をめくるというよりは、絵本のような厚みのある紙をめくっているような感じが実現されています。 サンプルを作ってみました。 → 絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」サンプル ※IE8など古いブラウザではアニメーションは動作しません。 次のライブラリーやjQueryプラグインを組み合わせて作ってあります。 BookBlock by Pedro Botelho Custom jQuery++ by Bitovi jScrollPane by Kevin Luck
Animated Responsive Image Grid 画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。 レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。 サンプルを見て頂くとわかりやすいと思います。 → タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその1 → タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその2 オプションを変更することで、多彩なエフェクト効果が可能になっています。 【使用方法】 まずはこちらのAnimated Responsive Ima
Camera slideshow 「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。 デフォルトの状態でも十分に機能しますが、スキンやエフェクト、メーターの種類やナビゲーション、画像別に見せる時間を変えるなど様々な設定が可能です。 また、レスポンシブ対応しています。設定によってはフルスクリーンでのスライドショーを背景に設定することもできます。動画を組み込むことも可能です。 サンプルを作ってみました。 →「高機能過ぎるjQueryスライドショー『Camera slideshow』サンプル」 (追加記事:jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法) 軽くて使いやすいですので、どの画像ギャラリースライダーを使おうか迷った時の選択肢のひとつに良いと思います。 【使用方法】 まずはこち
人気記事ランキング div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」 105.2k件のビュー 高機能過ぎるjQueryスライドショー「Camera slideshow」 74.5k件のビュー ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」 70.4k件のビュー シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」 67.4k件のビュー ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」 41k件のビュー クリックすると横からメニューが現れるjQueryプラグイン『Sidr』 40.4k件のビュー レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」 38.7k件のビ
jQuery Slider2 サンプル divで囲んだ部分がスライドします。 マウスを乗せるとスライドがストップします。外すと再びスライドが始まります。
次のページ
このページを最初にブックマークしてみませんか?
『ぱんにゃっとTutorial │jQuery,Wordpress』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く