スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。 もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルをいくつか紹介しようと思います。 bxSliderについて 今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。 また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対

お仕事ではbxSliderをよく使うのですが、毎回似たようなカスタマイズを行うことが多いため、コピペで済ませられるようによく使っているカスタマイズをまとめてみました。 本家はこちら （最近Internal Server Error連発して超重い…）

ローディング画像といえば、くるくると回るアレですね。そうコレ。 実装するのは、もっと難しいんじゃないかと思っていて敬遠していましたが、jQueryであっさりと実装できたので、紹介します。 といっても、ローディング画像を使うというシチュエーションはなかなか無いのですが、僕の場合はMTで作っているサイトのページカウンターの表示に使っています。 静的生成のページの中で唯一カウンターだけ、プラグインで動的にSQLから呼び出して表示しているため、コンテンツ内で一番表示が遅い部分となってしまい、ページが表示されてから1～2秒ほどカウンター部分が空白表示になっているのがカッコわるかったので対応しました。参考にしたのは以下のサイト。 参考サイト：　[jQuery] ローディングのクルクルを瞬殺で実装する 実装自体は本当に簡単です。 1. ローディング画像を用意する。 以下のサイトがローディング画像を好みの

こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた

TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.

bxSliderは使い方簡単！オプションが豊富でカルーセル・レスポンシブ対応！ bxSliderの特徴は、画像のスライドショーやカルーセルイメージを、初心者でも簡単に設置でき、豊富なオプションでカスタマイズがしやすく、軽量設計でユーザーも多くとても人気のあるjQueryプラグインです。 さらにレスポンシブデザインにも対応しているので、スマートフォンやタブレットなど、どんな画面幅にも合わせてサイズを自動調整してくれる優れものです！ まずはオプション設定の前に、基本的な使い方のおさらいです。 bxSliderのダウンロード まずはbxSlider公式ダウンロードサイトから一式ダウンロードしてください。 bxSlider公式サイトの右上にある「Download」ボタンからダウンロードできます。 bxSliderの内包物 bxSliderの公式サイトよりダウンロードすると、以下のファイルが入ってい

4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。 ※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。（GPLやMITやCCなど主要ライセンスの内容と意味のまとめ） もくじ レスポンシブ対応！PCでも、スマホのフリック操作でも使えるスライダー サムネイル付きでページングもできるフォトギャラリー スクロールに合わせて表示させたい パララックスさせたい 背景画像を画面サイズにあわせて表示させたい フルスクリーンでスクロールさせたい スクロールするとヘッダーを固定させたい 順番にアニメーションさせたい テキストをアニメーションさせたい

<div class="menu"> <label for="menu_bar01">MENU01</label> <input type="checkbox" id="menu_bar01" class="accordion" /> <ul id="links01"> <li><a href="">Link01</a></li> <li><a href="">Link02</a></li> <li><a href="">Link03</a></li> <li><a href="">Link04</a></li> </ul> <label for="menu_bar02">MENU02</label> <input type="checkbox" id="menu_bar02" class="accordion" /> <ul id="links02"> <li><a href="">Li

ホーム / ハック / 圧縮されたJavascriptやcssを元に戻してくれるWebサービス

CSSを使って実装するローディングアニメーションを紹介します。以前はGIFアニメーションを使うことが多かったのですが、最近はCSSアニメーションで実装することが増えてきました。CSSでローディングアニメーションを実装する事で、細かな調整が簡単にできるようになりました。また、SVGを組み合わせることで、表現の幅も広がります。 1. SVG Loaders SVG Loaders | デモ | 紹介 SVGを使ったローディングアニメーションです。12種類のローディングエフェクトが用意されています。SVGを使った美しい表現が特徴です。 2. CSS Spinners CSS Spinners CSSライブラリを使って実装するローディングアニメーションです。全19種類のアニメーションが用意されています。どれもオリジナリティのある表現で、デザインアクセントとして使えます。 3. Loaders.cs

jQueryプラグインとは、jQueryの拡張機能のことです。jQueryプラグインを導入して使いこなすことができれば、Web開発のスピードは格段に早くなり、クオリティも高くなることは間違いありません。今回はそんなjQueryプラグインについて解説し、おすすめのプラグインを紹介してから、その基本的な実装方法なども解説していきます。 【目次】 ■jQueryプラグインとは ◆jQueryとは ◆プラグインとは ◆8つの用途別系統 ■用途別おすすめプラグイン47選 ■jQueryプラグインの基本的な使い方 ◆実装方法 ◆使用方法 ◆作り方 ■実例 ■おすすめ教材3選 ■まとめ jQueryプラグインとは jQueryプラグインとは冒頭で触れた通り、jQueryで用いられるJavaScriptライブラリ、及び拡張機能です。主にWebコンテンツを制作する際に力を発揮します。ところで、「そもそもjQ

毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え

2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン

Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第3回は、「Elements」パネル、「Sources」パネルでサイトを検証する方法を解説します。 他人のコードを効率よく調べたい！ ディレクターやデザイナーから、「このサイトみたいなデザインにしたいんだよね」と言われることってよくありますよね。また、海外のかっこいいサイトを見ていると、使われているインタラクションを真似したいと思うこともあります。 そこで、Chromeデベロッパーツールを使って、他のサイトのCSSやJavaScriptを効率的に調査する方法を解説します。 1.背景画像を100%表示しているCSSの実装方法を調べる 背景画像の比率を変えずに高さと幅をフィットさせるデザインのページを例に、Chromeデベロッパーツールの「Elements」パネルで実装を調べていきます。Elementsパネルは