パララックスを簡単実装！オススメのjQueryプラグインまとめ！ | 札幌・東京のホームページ制作・ウェブ制作会社monomode
絶賛パララックス記事祭り開催中です！！ パララックスのサイトを作る際は、背景の動きをずらしたりなどの全体の動きの設定とタイトルをスライドインさせたりといった各要素の動きを考え制作を行うことが多いのではないかと思います。最近、パララックスについて調べることが多かったということもあり、今回は、それぞれの用途に分けて簡単にパララックスのサイトを作ることができるプラグインをまとめてみたので、ご紹介したいと思います。 サイト全体の動きを設定するプラグイン skrollr URL：http://prinzhorn.github.io/skrollr// タグごとに色を変えたり、さまざまさアニメーションを簡単に実装することができるプラグイン。 Create a Parallax Scrolling Website Using Stellar.js URL：http://cdn.tutsplus.com/
【jQuery】要素をタイル状に並べるプラグイン［Freetile.js］の使い方。
グリッドに沿って要素をタイル状に並べる jQueryプラグインとして、これまでにも［Masonry］や［Isotope］を紹介してきました。 今日紹介する［Freetile.js］も、前者２つと同じような機能を備えたプラグインです。 まずはサンプルをご覧ください。 Freetile.js：サンプル 導入方法や使い方も［Masonry］や［Isotope］とまったく同じ。 まずは公式サイトからプラグイン本体をダウンロードしてきましょう。 Freetile.js 公式サイトダウンロード サイトまた、忘れずに［jQuery.js］もダウンロードしてきてください。 手に入れた２つのファイル、［jQuery.js］と［Freetile.js］は、html の<head>〜</head>内で読み込みます。 <script src="../js/jquery.js"></script> <script
WordPressユーザーなら絶対チェック！あなたの知らない最新プラグイン6つ
古いやり方や面倒な作業を一気に変えてくれそうな最新のWordPressプラグインを厳選して紹介。WordPressユーザーなら要チェックです！ プラグインが好きな人もそうでない人も、たくさんの魅力的なプラグインがWordPressにたくさんあることを認めざるを得ないでしょう。豊富な機能を備えたEコマースWebサイトの構築からWebサイトへの小さな変更の追加に至るまで、Webサイト作成者にとってWordPressのプラグインは非常に役立つものです。 WordPressの人気は堅調なので、毎日のように新しいプラグインが開発・ローンチされています。しかし、常にこれらのプラグインを最新の状態に保つのは大変です。この記事ではWebサイトのトラフィックや売上を急増できる新しいプラグインを紹介します。 1. Duplicate Page 似たようなページや投稿を作成する時間を短縮する方法を探していません
Web開発を爆速にする！Sublime Text 用のすごい拡張プラグイン厳選15個まとめ
Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。 詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。 詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの
Q&Aのページを簡単にきれいに更新できるようにするプラグインFlexible FAQ | ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)
昨日のことですがコワーキングスペース8Beatの「よくある質問」ページが更新されたというお知らせを見て、どれどれ…と見に行ったところ、ちょっと見づらいなぁ…と思いました。 以前からQ&A(もしくはfaq)のプラグインに興味があって使ってみたいなと思っていたのでこの機会にプラグインをいれてページをきれいにしてみました(^^)/ 8Beatでは会員様は1日100枚まで印刷無料！というお知らせ(^^)/ それは、 というすばらしいお知らせでした(^^)/。これは月額会員になるメリットが大きいですよね！ サイトを見てみると、 うーん、残念。画像の周りの文字回り込みや、改行がうまくいってないところがあります。 固定ページで書いているのですが、こういうQ&Aページは追加や削除が多くあると思うので、プラグインを利用した方が使い勝手が良いと思われます。ということでプラグインを入れる事にしました。 Q&A(
WordPressでページごとに自由なレイアウトを作成できる便利なプラグイン「Elementor」 -レスポンシブ対応で高性能、しかも無料！
WordPressのどんなテーマファイルでも、どんなページでも、どんなデザインでも、ページごとに自由なレイアウトを作成できる便利なプラグインを紹介します。 これ系のプラグインは有料が多いですが、レスポンシブ対応で高性能、そして無料というのはありがたいですね。 Elementor Elementor -wordpress.org Elementorの特徴 Elementorのインストール・使い方 Elementorの特徴 Elementorは、どんなテーマファイルを使っていても、どんなページでも、どんなデザインにでも適用できます。 大きな特徴はコードの知識は不要、ドラッグ&ドロップで要素やコンポーネントを配置し、簡単に調整できます。 自身のブログやポートフォリオに使ってもよし、クライアントが自由にレイアウトをしたい時にもいいですね。
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
WordPressでメガメニューを実装出来るプラグイン・「JQuery Mega Menu Widget」
JQuery Mega Menu WidgetはWordPressでメガメニューを実装できるプラグインです。ECサイトのような大量のコンテンツを持つWebサイトでもユーザーが迷いにくいナビゲーションとして多用されているメガメニューを実装出来る、というもの。動作デモもあるので興味のある方はご覧になってみては如何でしょう。 JQuery Mega Menu Widget
jQueryのanimateを高速化した「Velocity.js」:phpspot開発日誌
Velocity.js jQueryのanimateを高速化した「Velocity.js」 7kbと軽量でCSSアニメーションよりも高速に動作し、標準のanimate全ての互換性があるそうです スマホやタブレットではまだ非力なCPUも存在するので、そういった端末でもスムースにアニメーションできるかも。 関連エントリ タイピングアニメーションを作れるjQueryプラグイン「Typed.js」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 美しいアニメーションを使ったフィルタ＆ソートが可能なjQueryプラグイン「MixItUp」 html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」
Googleカレンダー対応の、シンプルなイベントカレンダーを実装出来るjQueryプラグイン・kalendar
Googleカレンダーで設定したイベント等に対応したカレンダー実装スクリプト・kalendarのご紹介です。勿論、普通にイベント設定も可能。jQueryに依存しています。 イベント対応のカレンダーを手軽に実装出来る、というスクリプトです。 こんな感じのカレンダーです。日付を押すとその日のイベント一覧に切り替わります。 Sample events: [ { title: "hoge", start: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, end: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, location: "huga", url: "http://example.com", color: "string" } ],イベントは上記の要領で設定すればいいみたい。 他、Google
WordPressにメール配信機能を付ける「Subscribe2」が凄い！
最近ではブログにWordPressと呼ばれるオリジナルブログが作れるシステムを導入する人が増えて来ました。もちろんトラベルハックもWordPressで作られています。 ブログにメール通知機能を追加する ブログを本格的に始動し始めて6ヶ月スマートフォンからのアクセスがPCからのアクセスを超えました。定期的にブログの新着記事を知らせる方法としてRSSが主流ですがモバイルではまだまだRSSが根付いていないのが現状だと思います。 もちろんSNS経由で新着記事を知る方法もありますがタイムラインが流れてしまい気がつかない事も多いですよね。 理想はブログを書いたら一斉に新着記事のお知らせがユーザーに配信されるようにしたい。という事でWordpressの「Subscribe2」を導入してみました。 Subscribe2の導入 トラベルハックではブログの更新時に新着配信する機能を追加致しました。今回はWor
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
jQueryプラグインを探すときに便利なサイト
jQuery Clip - jQueryのプラグ... / jquer.in / jQueryスニペット - かちびと.net他...全6件
要素をランダムにフェードインさせていくjQueryプラグイン「champagne.js」
twitter facebook hatena google pocket 画像などの要素をただ並べていくだけだとなんだか寂しい。 そんな時は徐々にフェードインさせてみてはいかがでしょうか？ champagne.jsはランダムに要素をフェードインさせてくれます。 sponsors 使用方法 champagne.jsからファイル一式をダウンロード。 下記のように要素が記述されているとします。 <ul class="class名"> <li><amp-img src="画像パス"></li> <li><amp-img src="画像パス"></li> <li><amp-img src="画像パス"></li> <li><amp-img src="画像パス"></li> </ul> これに対しCSSを適用。 .class名 div.hidden { display: none; } 最後にJav
jQueryプラグイン サンプル（画像系）：skuare.net
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider
WordPressのプラグイン・Contact Form 7で使える「特別なメールタグ」の普及に貢献してみる
今まで機会が無かったんですが、最近必要になって改めて便利だったので今更ながらご紹介です。WordPressでコンタクトフォームと言えば、Contact Form 7が定番になっていますが、このCF7にある機能に「特別なメールタグ」っていうのがあります。 フォーラムによく顔を出すような方はご存知の方も多いですが、ググってみると案外紹介されていなかったので普及活動してみます。 まずはContact Form 7のご紹介。WPユーザーなら大抵はご存知ですよね。柔軟性と操作性に優れたコンタクトフォーム用プラグイン。日本製ですが、世界中で愛用されています。 CF7は管理画面内でフォームを作成し、ショートコードで実装します。そのフォーム作成もショートコードを発行する形ですので、HTMLの知識は無くとも作成する事が出来ますが、PHPであるテンプレートタグなどは直接使用できません。 ただ、場合によっては、
WordPressに必要不可欠な6つのソーシャルプラグイン - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ WordPressでブログはもちろんサイトを運営している個人や企業、日本でも大分増えてきたと思います。ブログやWordpressがSEOに効果的という話は良く聞きますが、もちろんソーシャルにも効果的。今回は特にソーシャルメディアマーケティングに役立つ6つのプラグインを紹介します。どれも英語版ですが、日本語でも使えるものもあるので是非。 — SEO Japan Jess Ostroffは、Convince & ConvertのManaging Editorであり、バーチャルソーシャルメディアアシスタントエージェンシー、Don’t Panic Managementも経営している。@jessostro
jQueryプラグインで背景画像をスライドショー「Backstrech」
twitter facebook hatena google pocket 背景画像全面に画像を置いて、切り替えるとインパクトがあります。 また写真さえよければ、その上にテキストを載せるだけでも良いデザインにすることができちゃいます。 jQueryプラグインのBackstretchはもともと画像をウィンドウ幅にあわせて背景ぴっちりに表示してくれるスクリプトですが、これをスライドショーにも活用できます。 sponsors 使用方法 Backstretchからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.backstretch.js"></script> <script> var ima
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まるで辞書!探したいWordPressおすすめプラグインがすぐに見つかるページ【厳選39個】
