ズームインしながらフェードで切り替わるスライダーをjQueryとプラグインなしで実装してみた | WEMO
よくある画像スライダーですが、先日、ズームインしながらフェードで切り変わるという少し特殊なスライダーを実装する必要があったのでその時の備忘録として。 スライダー系のプラグインは様々ありますが、プラグインを使用して実現する方法がパッと浮かばなかったので、1から自分でスクリプトを組みました。 と言いっても、スクリプトの処理自体はタイミングを合わせてクラスを付け外しするだけのシンプルもので、アニメーション部分はCSSに任せてあります。 また、jQueryは使わずに実装してみました。 動作デモ まずは完成したスライダーの実物を載せておきます。 See the Pen ズームインしながらフェードで切り替わるスライダー by ddryo (@ddryo-the-encoder) on CodePen. スクリプトとそれに対応するHTML・CSS まず、HTML側はスライダーの親要素に slide_wr
「Shuffle.js」でソートした状態にURLを付与するjQuery | | それからデザイン スタッフブログ
簡単にソート機能を実装することができるjQueryプラグイン「Shuffle.js」。今回は、このプラグインを使用した時に「ソートされた状態」にURLを付与する方法をご紹介します。 デモはこちら。 html <div id="sortArea"> <div id="sort"> <ul> <li class="active"><a href="#all">全て</a></li> <li><a href="#red">赤</a></li> <li><a href="#blue">青</a></li> </ul> </div> <div id="itemList"> <div class="item red">赤</div> <div>青</div> </div> </div>
「background-size:cover」をjQueryで実現する方法 | それからデザイン スタッフブログ
cssのbackgroundプロパティで使用できる「cover」という値は、画像の縦横比を保ったまま背景領域を全て覆うように自動で拡大縮小する便利なプロパティです。 ただ、この値を使うには画像を背景に指定する必要があり、imgタグで画像を配置したい場合は使用できません。そこで今回は、imgタグでも同じ効果を再現できるjQueryを紹介します。 デモはこちら。実際のコードは以下です。 html <div class="box"> <figure><img src="https://sole-color-blog.com/manage/wp-content/uploads/2016/03/bgImg01.jpg" alt=""></figure> <p>サンプルです</p> </div>
フルスクリーンに最適なナビゲーションメニュー「Fullscrenn-Menu-Jquery-Plugin」 – bl6.jp
Fullscrenn-Menu-Jquery-Pluginは、フルスクリーンに最適なナビゲーションメニューを実装することができるjQueryプラグインです。サイドに表示するシンプルでコンパクトなナビゲーションメニューを取り入れたい人にオススメです。 メニューから目的のコンテンツの位置まで自動スクロール 以下のページから、Fullscrenn-Menu-Jquery-Pluginの詳しい使い方やダウンロードができます。ダウンロードしたファイルから実際のデモ動作もチェック可能です。 Fullscrenn-Menu-Jquery-Plugin デモではフルスクリーンによるコンテンツが全部で6つ用意されています。下へスクロールしていくことでコンテンツが切り替わっていきます。 画面右側にはシンプルなナビゲーションメニューが設置されていて、現在表示されているコンテンツがどの位置なのかが瞬時にわかるよう
Instagramの写真を取得して自動スクロールするウィジェットを作る - TOKYOからOKINAWAに移住したHOMME
インスタのAPI仕様変更になったので改めて学習。 自身のアカウントや人気タグのフィードから写真を取得し、グリッド表示して横方向に自動スクロールさせてみる。今回使用したのは、以下の2つのjQueryプラグイン。 jQuery simplyScroll 横方向に延々と自動スクロールしてくれるjQueryプラグイン http://logicbox.net/jquery/simplyscroll/ Instafeed.js Instagramで最新のfeedを取得してくれるjQueryプラグイン http://instafeedjs.com/ Instafeed.jsの主なオプション ハッシュキー用途 clientId (string) Instagram APIで取得したあなたのClient IDを指定します。 http://instagram.com/developer/ accessToke
ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」 – bl6.jp
jquery-stepsは、ステップ式のウィザードを実装することができるシンプルで軽量なjQueryプラグインです。ステップごとに内容を進めていくことができるので、ユーザーにとってはとてもわかりやすいのがいいですね。 jquery-stepsの実際のデモページは以下になります。 デモ デモページでは、Step 1〜Step 3まであるサンプルが設置されています。「Next」ボタンをクリックすると、Stepが進んで行く仕組みです。また、直接「Step」の部分をクリックしても、そのStepの内容に行くことができます。 Step 1を選んでいる場合は「Next」ボタンしか表示されていませんが、Step 2では「Next」ボタンの他に「Previous」ボタンも表示されます。前のステップに戻りたい場合は「Previous」ボタンからすぐに戻ることができます。 最後のStep 3では「Previou
Google画像検索っぽいイメージギャラリーを実装できる「jQuery Elastic Grid」 – bl6.jp
jQuery Elastic Gridは、Google画像検索っぽいイメージギャラリーを実装することができるjQueryプラグインです。レスポンシブ対応で軽量、そして使い方も簡単なところがグッドです。ホバーアニメーションもスタイリッシュでとてもかっこいいですね。 以下のページから、jQuery Elastic Gridの実際のデモやダウンロード、使い方などをチェックできます。 jQuery Elastic Grid たくさんのサムネイル画像が並んでいるデモでは、各サムネイル画像をホバーするとオーバーレイによるアニメーションでタイトルが表示されます。クリックすると、その画像の詳細が表示されます。 Google画像検索のようなレイアウトで表示されるので、使い慣れている人にとっては、違和感なく操作できますね。画像の詳細はクリックすることで表示されるので、余計なスペースを使う必要もなく有効的に活用
jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法｜BLACKFLAG
Webページ上の要素が一定時間の間隔でスライドしてループし続けるカルーセルパネルUI。 単純に並べられた要素がスライドするカルーセルはよくありますが 並べられた要素の中央に位置する要素のみを拡大表示させるという 少し変わった演出を加えたカルーセルパネルUIを jQueryを使って作ってみたので紹介してみます。 「jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法」サンプルを別枠で表示 画面の端から端までめいっぱいに並べられた要素が 一定時間の間隔でスライド移動します。 並べられた要素の中央にあたる要素のみが拡大されていて スライド移動するごとに拡大する要素が入れ替わります。 サンプルでは要素を画面の端から端まで めいっぱいに並べていますが全体を囲う要素の幅を指定することにより 決められた幅の中でスライドさせることも可能になります。 全体構成についてまずはHTMLから。 ◆
スムーズなアニメーションのスクロールトップ実装「ScrollPress」 – bl6.jp
ScrollPressは、スムーズなアニメーションによるスクロールトップを実装することができるjQueryプラグインです。スクロールトップボタンもアニメーションで表示されます。オプションもかなり豊富なので、カスタマイズ性にも優れています。 ScrollPressの実際のデモページは以下になります。 デモ デモでは下へスクロールしていくと、右下にトップへ戻るためのボタンがアニメーションとともに表示されます。ここをクリックするだけで、スムーズなアニメーションで画面上部までスルスルとスクロールされます。 ランディングページや長文記事が多いブログなど、縦長のページにはピッタリの機能ですね。 また、デモでは左側にID1〜ID5までの項目も設置されており、いずれかのIDをクリックするとその場所まで自動でスクロールされます。もちろん、こちらもアニメーション付きでのスクロールになります。 縦長でボリューム
エンジニア必見！Webデザイン・制作に役立つサイト26選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
マガンダング ハーポン！最近エンジニアに転職したひろゆきです。 詳しくはこの「フィリピンでプログラムと英語が学べる、ギークスキャンプがスゴイ！！」を読んでください。 今回はLIGエンジニアチームが普段情報収集の際に活用しているサイトをまとめてみました。俺のように最近エンジニアデビューした方は必見です！ WordPress関連（プラグインの検索、関数の解説など） ■WORDPRESS.ORG 日本語 http://ja.wordpress.org/ WordPress公式の日本語サイトです。フォーラム見たり、プラグイン検索に便利です。 ■WORDPRES.ORG 英語 http://codex.wordpress.org/ WordPressの公式リファレンスサイトです。WordPressの関数だったりフックを探す時に使います。英語ですが、情報量は日本語サイトよりも多いです。 ■WORDPR
プラグイン不要！ jQueryで複数のセレクトボックスの選択肢を連動させる
プルダウンに親子関係 select要素にjQueryを使って親子関係を持たせる方法をご紹介します。 まずは実際に下記にサンプルを用意しました。 実際のソース HTML 都道府県のoption要素にdata-valがあることに注目してください。 同じ地方に属する都道府県は同じ値になっています。 <select class="parent" name="foo"> <option value="" selected="selected">地方を選択</option> <option value="北海道・東北">北海道・東北</option> <option value="関東">関東</option> <option value="甲信越・北陸">甲信越・北陸</option> <option value="東海">東海</option> <option value="関西">関西</opt
jQueryでスクロール量に応じて拡大するヒーローイメージ
jQueryでスクロール量に応じて拡大するヒーローイメージ 最近はトップページでメインビジュアルを画面いっぱいに表示することが多いですよね。 ヒーローイメージというらしいですが、今回はjQueryを使用してスクロール量に応じて画像を拡大する方法をご紹介します。 投稿日2016年12月28日 更新日2016年12月28日 HTML 画像はCSSので配置するのでscale-bgというクラス名の空のdivを配置します。 fixedで固定表示するので他の要素とは別にしておきます。 HTML <div class="scale-bg"></div> <h1>Title</h1> <div class="contents"> ・・・ </div> CSS scale-bg に fixed、contents に relative を指定して位置を調節します。 CSS .scale-bg { backgr
複数の画像を表示したりスライドしたりできるスライダー「miSlider」 – bl6.jp
miSliderは複数の画像やスライドの表示を可能にするスライダーを実装することができるjQueryプラグインです。いくつかの画像を見せながら、そのなかで効率よく見たいものをスライド表示させることができます。 以下、miSliderの実際のデモになります。 デモ デモでは、複数の画像が水平に並べられており、右から左へ順番に自動スライドされるようになっています。表示された各アイテムのなかから、好きなものをクリックすると、そのアイテムが真ん中にくるようにスライドされる仕組みにもなっています。 一般的なスライダーのように、画像を1枚ずつ表示・スライドさせるのではなく、いろんな画像を見せながらスライドできるスライダーを実装したいときにはピッタリのjQueryプラグインですね。 プラグイン自体が軽量なところもうれしいポイントの一つです。 また、レスポンシブにも対応しており、実際にデモページのブラウザ
水っぽい動きのjQueryプラグイン3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ゆたろです。どうもです。 皆さんは案件などで「水っぽい動き」を求められたことはありませんか？ ゼロから実装するとかなり時間がかかってしまいますが、プラグインを使えば簡単に実装することができます。 というわけで今回は、水っぽい表現をするプラグインの紹介と、それを使用したsampleソースを紹介していきます。 ▼目次 ぷよぷよ動く水玉風 jquery.morphing.js 水たまりの波紋風 jquery.ripples.js フラットデザインと相性抜群 raindrops.js まとめ ぷよぷよ動く水玉風 jquery.morphing.js jquery.morphing.jsは、要素に対して、ぷよぷよと動く円形のクリッピングマスクを作ってくれるプラグインです。 https://github.com/ANTON072/jquery.morphing.js html ダウンロードしたファイル
【jQuery】ジオメトリックを実装できる「particleground.js」
有名なプラグインなので今さら感がありますが、Webサイトでちらほら見かけるジオメトリックを背景に実装できるparticleground.js。サイトにアクセントをつけたい時などに使用してみたいプラグインです。
Web制作でよく使うjQueryプラグイン4選。 | ネクストページブログ
こんにちは。デザイナーのこばやし氏に影響されてすみっコぐらしにハマってしまったアンドレです（ちなみにねこ推し）。 さて、前回はjQueryのメソッドについてお話ししましたが、今回はweb制作でよくお世話になっている、jQueryのプラグインを4つご紹介します。 スライドショー slick 以前はbxSliderをよく使っていましたが、最近はslickを使っています。 変えた理由は大きくは2つです。 1つはbxSliderの場合、1ページ中に複数のスライダーを設置すると、bxSliderオブジェクトの挙動が変化し、制御しづらいことです。 もう1つは、よりレスポンシブに強いことです（responsiveオプションにbreakpoint等を含むオブジェクトを渡してやることで簡単に制御できます）。 Tips スライド化される際にdivやbutton要素が挿入されるため、各画像をul>liでマークア
jQueryのaddClassで複数のclassを追加する方法
下記のようにスペースで区切れば、複数指定できます。 $('div).addClass('btn btn-default btn-lg'); 簡単ですが、使う機会もなかったので知りませんでした。。。Copyright © 2024 FEVDES BLOG All Rights Reserved.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
段落毎に設置した画像を、その段落が終わるまで固定させるスクリプト・「jquery-stopattop」
Bright英会話
画像やテキストを特定日時に自動更新するタイマーjs | 福岡・東京のWEBデザインスタジオAIMERS CREATE（エイマーズクリエイト）