ズームインしながらフェードで切り替わるスライダーをjQueryとプラグインなしで実装してみた | WEMO
よくある画像スライダーですが、先日、ズームインしながらフェードで切り変わるという少し特殊なスライダーを実装する必要があったのでその時の備忘録として。 スライダー系のプラグインは様々ありますが、プラグインを使用して実現する方法がパッと浮かばなかったので、1から自分でスクリプトを組みました。 と言いっても、スクリプトの処理自体はタイミングを合わせてクラスを付け外しするだけのシンプルもので、アニメーション部分はCSSに任せてあります。 また、jQueryは使わずに実装してみました。 動作デモ まずは完成したスライダーの実物を載せておきます。 See the Pen ズームインしながらフェードで切り替わるスライダー by ddryo (@ddryo-the-encoder) on CodePen. スクリプトとそれに対応するHTML・CSS まず、HTML側はスライダーの親要素に slide_wr
jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法｜BLACKFLAG
Webページ上の要素が一定時間の間隔でスライドしてループし続けるカルーセルパネルUI。 単純に並べられた要素がスライドするカルーセルはよくありますが 並べられた要素の中央に位置する要素のみを拡大表示させるという 少し変わった演出を加えたカルーセルパネルUIを jQueryを使って作ってみたので紹介してみます。 「jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法」サンプルを別枠で表示 画面の端から端までめいっぱいに並べられた要素が 一定時間の間隔でスライド移動します。 並べられた要素の中央にあたる要素のみが拡大されていて スライド移動するごとに拡大する要素が入れ替わります。 サンプルでは要素を画面の端から端まで めいっぱいに並べていますが全体を囲う要素の幅を指定することにより 決められた幅の中でスライドさせることも可能になります。 全体構成についてまずはHTMLから。 ◆
複数の画像を表示したりスライドしたりできるスライダー「miSlider」 – bl6.jp
miSliderは複数の画像やスライドの表示を可能にするスライダーを実装することができるjQueryプラグインです。いくつかの画像を見せながら、そのなかで効率よく見たいものをスライド表示させることができます。 以下、miSliderの実際のデモになります。 デモ デモでは、複数の画像が水平に並べられており、右から左へ順番に自動スライドされるようになっています。表示された各アイテムのなかから、好きなものをクリックすると、そのアイテムが真ん中にくるようにスライドされる仕組みにもなっています。 一般的なスライダーのように、画像を1枚ずつ表示・スライドさせるのではなく、いろんな画像を見せながらスライドできるスライダーを実装したいときにはピッタリのjQueryプラグインですね。 プラグイン自体が軽量なところもうれしいポイントの一つです。 また、レスポンシブにも対応しており、実際にデモページのブラウザ
軽量でシンプルで依存性のないカルーセルを実装できる「Siema」 – bl6.jp
Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルーセルを実装することができるスクリプトです。マークアップ、使い方ともにシンプルなので、手軽にカルーセルを設置したいという人にピッタリです。 Siemaの具体的な使い方や実際のデモ動作は以下のページから見ることができます。チュートリアルの動画も用意されていますよ。 Siema カルーセルのデモでは、prev、nextのボタンが設置されており、ここからアイテムを前後移動させることができます。スライドでサクサク切り替わっていきます。 シンプルがゆえに、いろんなシーンで活用できそうですね。 サポートしているブラウザは、IE 10、Chrome 12、Firefox 16、Opera 15、Safari 4、Android Browser 4.0、iOS Safari 6.0になります。 また、Siemaにはオプションもいくつか用意
デザインで効果を最大化！資料作成時、参考にしたいデザイン関連のオススメ記事16選
資料作成において最も重要なことは、「相手に伝えたい情報が伝わるか」どうかです。 情報を伝えやすくする際、デザインは重要な役割を担っています。 ちょっとしたデザインのコツを押さえるだけで情報伝達速度が変わってきます。 今回は、提案資料等を作成する際に役立つ、参考にしたいデザイン関連のオススメ記事をご紹介します。 すぐに実務に活かせるテクニックが学べますので、日頃の業務で資料作成機会が多い方はぜひ目を通してみてください。 デザインの参考記事 1.プレゼン資料・企画書のデザインを超簡単にオシャレに見せる９つのコツ｜Literally http://tsukuruiroiro.hatenablog.com/entry/2014/09/08/110000 初心者でもできる、デザインを綺麗に見せるためのルールやコツを解説している記事です。 9つのポイントを意識するだけで、資料の質が劇的に変化します。
[JS]背景画像にスライドやフェードの動きを付与できる「jQuery.BgSwitcher」｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
jQuery.BgSwitcher ファイルのダウンロード 以下のページより、jQuery.BgSwitcher のファイルを一式ダウンロードします。 <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.bgswitcher.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".contents").bgswitcher({ images: [ "./images/image_1.jpg", "./images/image_2.jpg", "./images/image_3.jpg", "./images/image_4.j
![[JS]背景画像にスライドやフェードの動きを付与できる「jQuery.BgSwitcher」｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/947f267df1652001f6a9dc518880e30941db13e4/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2013%2F04%2Fjavascriptjquery.png)
スクロールでフッターメニューを表示させる「footerMenu」 – bl6.jp
footerMenuはスクロールするとフッターメニューを表示させることができるシンプルなjQueryプラグインです。スクロール時にヘッダーではなく、フッターを固定させて表示させたいという方にはピッタリのプラグインですね。 以下はfooterMenuのデモになります。 デモ デモでは、下にスクロールしていくとフッターメニューが滑らかなスライドアップとともに表示されます。逆に一番上までスクロールすると、今度はスライドダウンしながらフッターメニューが非表示になります。 自然な感じでさりげなくメニューが表示・非表示されるので、煩わしく感じることも少ないのではないでしょうか。 スクロールでメニューが固定表示されるので、いつでも各メニュー項目にアクセスできるのが便利ですね。シンプルで利便性も高い機能だからこそ、活用してみたくなります。 というわけで、スクロールでフッターメニューを表示させたい方は、ぜひ
Sketchが使い物になるかPhotoshopユーザが検証してみた（スライド付） | ベイジの社長ブログ
弊社では数年前にWebのデザインツールをFireworksからPhotoshopにしました。Photoshopには非常に多くの機能が搭載されていながら、一方でWebに最適化されているかというとそうではない側面も多々あります。 そんな中、最近気になっているのが、新たなデザインツールとして徐々に広まりつつあるSketch。海外ではPhotoshop並みに使われているという調査もありします。そこでPhotoshop歴10年（途中3年ほどFireworks）の弊社アートディレクター兼デザイナーの荒砂が、PhotoshopとSketchの機能を比較し、最終的にどう判断すればいいか、スライドにまとめてくれました。 詳細はスライドを見ていただくとして、特に異なっている点だけを表にまとめて比較すると、以下のような感じになります。 ○：機能として存在し、優れている △：機能として存在するが、やや劣っている
スライドがカッコいいシンプルなポートフォリオ「Sliding Panels Template」 – bl6.jp
Sliding Panels Templateはシンプルでスライドがカッコいいポートフォリオを実装することができます。CSSとjQueryが使われているとのこと。 アイテムを選択するとスライドアニメーションが実行され、そのアイテムの詳細ページに移り変わります。スムーズでサクサクと動作するのでストレスもなくとても快適です。 以下からSliding Panels Templateの実際のデモを確認することができます。 デモ デモではProject 1〜Project 4まで並んでおり、各Projectを選択するとスライドして詳細ページへ移動します。 右上にある「×」をクリックすると元の一覧ページに戻ります。 アニメーションも自然な感じで、煩わしくないので快適にポートフォリオを見ることができますね。 デモページはレスポンシブになっており、ブラウザ幅を縮小すると横並びのレイアウトから縦並びのレイア
jQuery基礎講座：するっと動くドロワーメニューの作り方（ZIP付） | 株式会社パナレア
東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。jQuery基礎講座[第１０回] どーも＠PNRAです！ 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 以前ハンバーガーナビゲーションに関する記事をいくつかあげましたが、そこの応用版のお話。最近スマートフォン向けのホームページで何かとよくみるドロワーメニューです。スマートフォンというブラウザサイズの制限を見事に克服したこのドロワーメニュー。ドロワー（引き出し）のように普段はしまっておいて、必要な時に出すというものです。 実装するにあたって、様々なjQueryプラグインもあるのですが、動きだけを考えるとそんなに複雑な仕組みではないため、自身で動作を定義してあげた方が表示速度やカスタマイズするにあたって便利だろ
デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ
Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ
シンプルなスライディングメニューを実装できる「Sliiide」 – bl6.jp
Sliiideはシンプルなスライディングメニューを実装することができるjQueryプラグインです。上下左右と好きな位置からメニューをスライド表示させることができるので、自分のサイトにも合わせやすそうですね。 Sliiideのデモは以下で確認することができます。 デモ Left、Top、Right、Bottomのアイコンからスライドさせる位置を選択することができます。 例えば、Topを選択して左上にあるメニューアイコンをクリックすると、上からスライドしてきます。ちょっとした遊び心があって操作していて楽しいですね。 一般的なナビメニューじゃつまらないっていう�方は、ぜひ一度チェックしてみてはいかがでしょうか。 こんな感じでオプションもいろいろと揃っています。placeでスライドさせる位置を指定することができます。 var settings = { toggle: "#sliiider-togg
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーインターフェイス解剖学（公開版）
レスポンシブで横幅いっぱいに表示できるjqueryカルーセルいろいろ | バニデザノート