Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
Re:jquery 1.xと2.x の違い、さらに動作を音速にするための設定
Re:jquery 1.xと2.x の違い、さらに動作を音速にするための設定 ネタ元 : jquery 1.xと2.x の違い、さらに動作を音速にするための設定 ちょっとツッコミどころが多いので突っ込んでおきます。 使い分ける <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <!-->![endif]--> jQuery 2.xのベータ版が公開されていた際にはjQueryは条件付きコメントで読み込むことを想定していました(上記コードはその時のオフィシャルのコードに
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
jQueryを使ってフォントサイズ変更ボタンを実装する方法 | TechMemo
WEBサイトにフォントサイズを変更するためのボタンを設置する方法を紹介したいと思います。よく見かける以下のようなやつですね。 非常に簡単に実装できるので、ボタンを設置したいとお考えの方は、ぜひ参考にしてください。 ステップ1. jquery.cookie.jsのダウンロードと設置今回、jquery.cookie.jsというCookieを操作するjQueryも利用します。なので、まずはjquery.cookie.jsをGitHubからダウンロードして、サーバー上の適当な場所に設置します。jQueryも自サーバーに設置したい場合は、ダウンロードしてサーバーにアップロードしておきます。ステップ2. フォントサイズ変更ボタンのマークアップファイルの設置が完了したら、ボタンをマークアップしていきます。以下は画像を使った場合のHTMLです。 <div id="font-size"> <a href="
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」:phpspot開発日誌
jellekralt/Responsive-Tabs GitHub レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」。 レスポンシブデザインでタブはわりと厄介で、いろいろなアプローチが取られていたりしますが、このアプローチはなかなかスマートかもしれません。 通常のタブUI 画面幅縮小で、タブが下に表示表示されます。スマホなどでは操作がし易いかも。 関連エントリ タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」 電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」 シンプルすぎるモバイルファーストなタブ実装jQueryプラグイン「Tabby」
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」:phpspot開発日誌
Rotate HTML elements by mouse in JavaScript - Propeller.js html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 自動で回転させることもできるし、ドラッグ＆ドロップによって回転させて加速度をつけたアニメーションをさせることもできます 汎用性はありませんが、ちょっとしたエフェクトとして使えそうですね 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 読み終わったらスライドアニメーションで他記事に誘導できるjQueryプラグイン「Promo Slide」 アニメーションするプログレスバーで達成度を視覚化できるjQueryプラグイン
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。 １．はじめに 「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。 同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。 ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。 利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」:phpspot開発日誌
Image Lightbox, Responsive and Touch?friendly ? Osvaldas Valutis レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 4kbと軽量で、画像だけLightbox風にしたいのであればこれはよさそうです。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 Medium風のシンプルなLightBoxが実装できるjQueryプラグイン「Fluidbox」 PhotoshopばりのフィルタをJSでかませるjQueryプラグイン「PhotoJShop」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」
SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」:phpspot開発日誌
SVGMagic - Great jQuery SVG fallback plugin SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」 ブラウザが対応していなければPNG画像に変換して出力ができます。これである程度は気兼ねなくSVGを使えるという感じでしょうか。 初期化を次のようにおこなっておけば、自動変換してくれます。ｊsファイル内に定義しちゃってもいいのかも 関連エントリ Snap.svgを使ったSVGアイコンアニメーションのデモがカッコいい 色々なデザイナーの高品質なSVGアイコンがDLできる「iconmelon」 SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」 美しいSVG背景パターンギャラリー「SVG Patterns Gallery」
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」