【jQuery】特定の数値までカウントアップさせるプラグインの使い方 | Neganin(ネガニン)
サイトをみてると数字がカウントアップして表示されてるのを見たことありませんか？ 保険の見積もりや、ECサイトでの合計金額、不動産での物件数、サイトでのPV数にポートフォリオサイトでのスキルを数値化したもの・・・今回は簡単にカウントアップできるプラグイン「animateNumber」を紹介したいと思います。 ちなみにカウントダウンや計算はできるか試していないのでわかりません！ まずはデモをご覧ください。 「jquery.animateNumber」のダウンロード 「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。 ここで使用する「jquery.animateNumber」のバージョンは0.0.12です。下記サイトから「jquery.animateNumber.min.js」をダウンロードし、使用します。 jQuery jquery.anima
何を使えばよいか分かった！コーポレートサイトの各ページを制作する前にみておきたいこと
作成：2015/02/9 更新：2016/06/29 Web制作 > 企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。今回はWordPressで構築した固定ページを見やすくするために、どういったjQuery・WPプラグインを使えばよいのか、またレスポンシブに対応させるための小技もメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．ギャラリーページ ２．サービス／会社概要ページ ３．各ページの背景画像をクライアントさん側で変更可能に ４．問い合わせページ ５．CRM ６．商品を管理画面から操作 ７．アクセスページ ８．お知らせページ ９．SNS/TEL/GAアカウント変更管理 １０．Q&Aページ １１．ブログページ １．ギャラリーページ 以前、クライアントさんにギャラリーページを「ランダムにしてほしい」と言われたこと
WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる！
やっと見つけた！ LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。 [speech_bubble type=”fb-flat” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]こんにちは。WordPressではこんな便利なプラグインがあるんですね。[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さん、”毎年平社員”っていう肩書がつけられてますよ。チョー似合う。 [/speech_bubble] 今回は、こんなふうに漫画風や会話風にブログを進行することができるようになるワードプレスのプラグイン『Speech Bubble』というプラグ
便利で簡単！Webサイトのプロトタイプが本当に数クリックで作成できてしまうPhotoshopの無料の機能拡張 -Velositey v2
Webサイトのプロトタイプやワイヤーフレームなどに使えるページレイアウトを数クリックで作れてしまうPhotoshop CS6/CC/CC2014対応の機能拡張を紹介します。 今時のコンポーネントが数多く用意されているので、デザインの勉強にもいいですよ。 Velositey v2 Velositey v2とは Velositey v2のインストール Velositey v2の使い方 Velositey v2とは Velositeyをは「Photoshopでの作業がはかどる便利な機能拡張・プラグインのまとめ (1,000 Pocket Thanks!)」で紹介した時からバージョンアップし、機能も大幅に強化されました。このバージョンからCC2014対応です。 Photoshopにインストールすると、最近のWebページで見かけるさまざまなコンポーネントが1クリックで簡単に利用できます。 左上から、
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」:phpspot開発日誌
MixItUp アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 これはなかなか汎用性があって便利そう。デモサイトではレスポンシブにもなっていて、タッチデバイスでも快適に使えそうです。 ブログ、ポートフォリオサイトなど、実装すればよりモダンでクールなサイトに仕上がりそうです。 関連エントリ 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブサイト用レイアウトフレームワーク「Grid」 レスポンシブかつフラットなソーシャルボタンを実
要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌
Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou
多機能でスタイリッシュなギャラリーを簡単に実装できる！jQueryプラグイン「MixItUp」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 今回は多機能でスタイリッシュなギャラリー用jQueryプラグイン「MixItUp」をご紹介します。 「容量は軽いけれど力強く、美しいアニメーション、ソートやカテゴライズ、フィルタリング、レスポンシブレイアウト対応」…と、プラグインの説明ページから目についた英単語を並べただけでも機能の豊富さが分かって頂けると思います。 各機能の詳細は3パターンのDEMOサイトが用意されていますので、そちらをご参照ください。 MixItUpのDEMOサイトを見る ちなみに商用、非商用問わず使用可能です。 対応ブラウザはGoogleChrome4.0以上、Firefox4以上、IE10以上など最新の状態での閲覧を推奨しています。 スマートフォン、タブレットでもスムーズに動くようです。 IE9で試しに閲覧したところエフェクトは付きませんが、ソートなど機能面は問題なく使えました
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
要素の上にクールに表示できるCaption実装jQueryプラグイン「HCaptions.js」:phpspot開発日誌
Hover Captions (HCaptions.js) 要素の上にクールに表示できるCaption実装jQueryプラグイン「HCaptions.js」 画像等にカーソルを合わせるとCaptionが出る、というのをカッコよく実現できるプラグインです。 キャプションの上にボタンなんかも表示できて、編集画面等でつかえそうです アニメーションが色々とカスタマイズでえらべるのでサイトの特徴に併せて動きを調整できます 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなアナログ時
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
今このブログで使ってるオススメWordPressプラグイン24個の備忘録。
最近、WordPressの 事もあまり書く機会がなくなっていたので、たまには書いてみようかと思いまして、とりあえず、今このブログで使っている『WordPress プラグイン』をすべて挙げてみようと思います。 …というか、改めて挙げると、ぼくはやっぱり WordPress のことなんかちっともわかっちゃいないな…(･_･; まぁ、いっか。 ということで、今この『ノリロウ戦記』で使っているプラグインはこんなものたちです。 合わせて、参考にさせていただいた記事を掲載しておきます。ありがとうございます。(○´―`)ゞ｡o ○ WordPressでまずは最初に入れておきたいプラグイン なんだかよくわからないけど、WordPressをインストールしたら、まずはとりあえず入れとけと言われた（誰ともなく）ので入れているプラグインたち。 1. Akismet WordPress › Akismet « Wo
[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
jQuery スライダーの中にスライダーが設置できるプラグイン【 jQuery slideinslide 】 | Stronghold Archive
どうもこんばんは。今回のTipsは【jQuery スライダーの中にスライダーが設置できるプラグイン jQuery slideinslide】です。今回のプラグインは自作です。機会は少ないですが何度かスライダーの中にスライダーを設置したいという場面がありました。これまでは都度スクリプトを書いていたのですが…ちょっと面倒だなぁとプラグイン化しました。この謎なプラグイン…自分用にとっておいてもいいのですが、存在自体忘れる可能性もあるので…備忘録としてメモしておきます。 DEMO & DOWNLOAD 更新情報 ・2013 3/8 水平方向へのスライド機能を追加。詳しくはOptionをご確認ください。上下左右のキーボートにも対応しております。DEMOはこちらから 実装方法 実装は至ってシンプルです。スライドの中にスライドの入るHTMLを用意し、プラグインを読み込みます。 読み込みファイル（jQue
スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」
twitter facebook hatena google pocket スマホで画像やコンテンツをスワイプさせて見せられると多くのコンテンツを遷移も少なくて良いかもしれません。 jQueryプラグインのslideToucherなら水平、垂直の両方向にスワイプさせられ便利です。 sponsors 使用方法 Yuripetusko/slideToucher ? GitHubからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="slideToucher.js"></script> <script type="text/javascript"> $("document").ready(function(){ $
jQueryの可能性は無限大！？プラグインまとめ番外編 - Webデザイン初心者向けのあれこれ
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」:phpspot開発日誌
Toolbar.js - jQuery plugin to create tooltip style toobars 吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」 次のように、初期化位置にカーソルを合わせるとポップアップするツールバーを設定でき、そこからアクションを選べます。 ありそうであまり無かったプラグインかもしれませんね。 縦バージョンにもできます これは便利に使えそう 関連エントリ UIがカッコいいオートコンプリート実装jQueryプラグイン「Ajax AutoComplete」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「Par
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
WordPressで会員制サイトをつくるのに利用したプラグイン
