二枚の画像を少しずつフェードでブレンドして切り替える画像ギャラリーのスクリプトをblog.olicio.usから紹介します。 Floom demo デモはまるでフラッシュのように、進捗のバーが表示され、画像を切り替えると共にテキストも変更し、次々と画像を表示します。 オプションでは、アニメーションのスピード、ブレンドの方向、キャプションの有無などが変更できます。 FloomはMooToolsのプラグインのため、実装にはmootoolsが必要です。
画像の切り替えやパネルの表示にフェード効果を使用したスライドショーのスクリプトをDynamic Driveから紹介します。
パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーをjQueryとCSS3で実装するチュートリアルを紹介します。 実装 実装方法はポイントを説明します。 HTML 各パネルは「sl-slide」のclassを持ったdiv要素で実装されており、カラーは「sl-slide-dark」で管理されています。 <section id="sl-slider" class="sl-slider"> <div class="sl-slide"> <div class="sl-deco" data-icon="6"></div> <h2>A bene placito</h2> <blockquote> <p>You have just dined, and however scrupulously the slaughterhouse is conceale
画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。 Awesome Cufonized Fly-out Menu with jQuery and CSS3 デモページ デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。 HTML HTMLは非常にシンプルです。 <textarea name="code" class="html" cols="60" rows="5"> <div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div
作成:2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー 1.スライドを立体的に切り替え 2.クリックで滑らかにページ遷移させる 3.背景にスライド、フルスクリーンで固定させる 4.横に移動するフルスクリーンスライド 5.キューブ系のスライドを表示 6.下方向へドラッグするとページを再読み込みする 7.要素を上下にフワフワ動かす 8.外部要素をクリックで表示 9.タイピングエフェクト 動作 10.サーチボックスを画面全体にオーバーレイさせる 11.デイトピッカー 12.ドラッグ&ドロップ 画像をアップロードする
はじめに この連載では、プログラムはあまり知らないという方に向け、今話題のJavascriptライブラリの一つであるjQueryのプラグインを用いた、ワンランク上のWebサイト制作方法を解説します。 第1回では「プラグインをどのように見つけるか」について、その方法を紹介していきます。今後も増加の傾向にあるjQueryプラグイン。インターネットの海の中から自分に必要なプラグインを効率よく探すテクニックは、jQueryを使いこなす上での重要なポイントとなるはずです。 jQueryプラグインの見つけ方 インターネットの海から必要なプラグインを探す方法は、ざっと次の3パターンに分けることができます。 検索エンジンで探す リスティングサイト/ブログから探す RSS/ML購読など 当然、それぞれの探索方法は一長一短であり、以下にそれぞれの方法に対し、詳しく紹介していくことにします。 検索エンジンで探す
jQuery Safari Searcher demo 検索ボックスのスタイルは通常用とインクリメンタルサーチ用が用意されており、ダウンロードできるファイルには画像やアニメーションgifなど一式が揃っています。 ボックスの幅の対応は画像が500pxのため、それより小さい幅まではそのまま対応できると思います。 Safari SearcherはjQueryのプラグインのため、実装にはjquery.jsが必要です。
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site. Required Files the jQue
サイトを彩る多彩なアニメーション フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。 ページトップにあるシンプルなボタンにマウスオーバーすると、上から矢印のアイコンがスライドして下りてくる。注目したいのは、マウスがボタンから離れたとき(マウスアウト時)の動きだ。 よくある:hoverで実装したマウスオーバーのアニメーションは、マウスオーバー時とアウト時の動きを別々に設定できないため、必ず逆の動きになる。マウスオーバー時に上からスライドしてきたら、マウスアウト時には上へ戻る、といった具合だ。 ところが、Omisenseのボタンは、マウスアウト時にそのまま下にスライドを続ける。細かな違いだが、最近ではこういったマウスオーバーのアニメー
Webでも裁ち落としでインパクトを出せる DTPでは、1ページ内に写真を裁ち落としでページいっぱいに載せ、その上に文字を置くのは定番のデザイン。でも、Webでそれを表現するのはなかなか難しいものです。ユーザーによってディスプレイの解像度や利用するブラウザが違うためです。 現在、多くの解像度やブラウザに対応できるように、widthを固定し、コンテンツをセンター配置にすることが多くなっています。その分、うまくフルスクリーンで表現できれば、することができれば、より一層かっこよさやインパクトを与えることができます。 今回ご紹介するのは、JavaScriptを使い、フルスクリーンで背景画像を表示する方法です。第6回「裁ち落としてインパクトのあるデザインを作るでも同じようなUIをご紹介しましたが、IE6で縦スクロールが出てしまうという欠点があります。オプションの充実度からも、今回のやり方のほうが使いや
作成:2014/10/14 更新:2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き 1.ジオメトリック 背景 2.フルスクリーンでスライドさせる 3.ドロアー風ライトボックス 4.動画を再生するタイプ3つ スクロール 5.スクロールでクロスフェード 6.スクロールで奥行きを表現 7.スクロールで分割 画像 8.APNG 9.Google 画像検索風ライトボックス 10.トイカメラ風のフィルター ポップアップ 11.おしゃれなアラート 12.
A seasoned design and product lead with nearly 30 years of experience across various fields. I bring together design management, product management, strategy, futures thinking, and systems thinking to help teams and organizations navigate an increasing uncertainty and design for the preferable future. More than 25 years of experience 8 years in building, managing, and scaling cross-functional team
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです! しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ:幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
Create an apple style menu and improve it via jQuerySince I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-in
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く