ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
CSS3を使った多彩なアニメーション用ライブラリ「magic」:phpspot開発日誌
magic css3 animations CSS3を使った多彩なアニメーション用ライブラリ「magic」 要素をフェードイン、アウトさせる等の多彩なアニメーションが詰まっています。 スマホやタブレットで要素にアニメーションエフェクトを付けたい際に使えるかもしれません 関連エントリ Flashみたいに美しいCSSテキストアニメーションデモ 美しいアニメーションを使ったフィルタ＆ソートが可能なjQueryプラグイン「MixItUp」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」 スプライトアニメーション作成用jQueryプラグイン「Phantascope」
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」｜クロノドライブ
ブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります（ここでは擬似フォームUIと呼びます）。 本コラムでは主にスマートフォン向けにCSS3とJavaScript（jQuery）を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。 ※PCではGoogle Chromeのみ動作確認をしています。 第01回目の今回はCSS3を使った装飾と後ほどjQueryで
A Creative Year: Distinctive Web Designs of 2012 | Codrops
An inspirational collection of the most impressive and distinctive web designs from the year 2012. 2012 was clearly an interesting year design-wise. The responsive boom in web design gave birth to brilliant redesigns; clever layouts emerged with a focus on clear typography and impactful, contrasty colors. Large background images with a mood-setting character and sharp edges on unusual shapes were
Fullscreen Pageflip Layout | Codrops
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to c
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
こんにちは、鴨田です。 今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。 春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。 とはいえ、最近は視差効果で奥行きを表現するというよりも、 単純にスクロールに連動してアニメーションさせることも含めて、 パララックスサイトと呼んでいるが多いのではとも思います。 何かと話題のスマホアプリ「comm」の紹介ページもそうですね。 そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。 今回ご紹介するのは、「ScrollTween.js」というプラグインです。 シーエーモバイル社のコーポレートサイトを作成するために開発され、 せっかくだからということで、公開されているようです。 経緯に関しては、下記スライドをご覧下さい。 パララックスでレスポンシブでJ query mobil
スタンドアロンで動作する5kb以下でクールな日付ピッカー「Pikaday」:phpspot開発日誌
Pikaday: JavaScript datepicker ? David Bushell ? Web Design & Front-end Development スタンドアロンで動作する5kb以下でクールな日付ピッカー「Pikaday」 次のようなカッコいいピッカーが実装できます。CSS3等も利用していますが、IEの古い物でも使えるようになっているようです デザイン的にシンプルでいて綺麗な物なので、１つの選択肢として覚えておいてもよいかもですね。 jQueryプラグイン、ではないため、次のようなコードで初期化を行います 関連エントリ Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 Android風の日付ピッカー実装用jQueryMobileウィジェット「Mob
日向徹ばりの斬新なインタフェースが実現できるjQueryプラグイン「Extremes」:phpspot開発日誌
Extremes jQuery plug-in 日向徹ばりの斬新なインタフェースが実現できるjQueryプラグイン「Extremes」 日向徹とはリッチウーマン、プアウーマンというドラマに出てくる小栗旬さん演じるＩＴ社長なのですが、その番組に出てきた個人管理プログラムのUIっぽいインタフェースを作る事ができるjQueryプラグインです。 恐らくこちらのライブラリ作者は日本のドラマ等は分からないとおもいますが偶然の一致であります。 他にも次のようなインタフェースをCSS3を使って実現出来ます。 リッチウーマン,プアウーマン、なかなかおもしろいですよ 関連エントリ 大きなパノラマ写真をGoogleMap風インタフェースで拡大縮小させられるライブラリ「PanoJS3」 オーディオ機器のボリュームを上げる風インタフェースを作るCSS3＆jQueryサンプル jQueryでページ送りのインタフェース
[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート
CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 デモページ イメージスライダー自体もキーフレームを使ったCSSアニメーションで実装されています。 [ad#ad-2] 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <div class="panel"> <h2>One</h2> <p>Lorem ipsum dolor sit amet...</p> </div> </a> ... </div> CSS まずは、スライダー自体のスタイルです。 画像をbackgroundで表示します。 .sli
Parallax Content Slider with CSS3 and jQuery | Codrops
A simple parallax content slider with different animations for each slider element and a background parallax effect. Today we want to share a simple parallax content slider with you. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself. The idea for this comes from the slider of the Kend
レスポンシブなPhotoギャラリーを作成できるCSS3＆jQueryな「Glisse.js」:phpspot開発日誌
Glisse.js - a simple, responsive and fully customizable jQuery photo viewer レスポンシブなPhotoギャラリーを作成できるCSS3＆jQueryな「Glisse.js」 デザイン性に嫌味がなく色々な場所で使えそうです。画像を送った際のアニメーションが選べるのもいい感じです ギャラリーページ 拡大 レスポンシブ レスポンシブが発明されなかったらどんな感じになってるんだろうっていう気がしますが、頭の良い人がいるもんですね。 そういう発明をしてみたいものです 関連エントリ 秀逸なレスポンシブWEBデザイン50のサンプル レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 レスポンシブなjQueryスライダー実装プラグイン８個
[CSS]テキストに面白いエフェクトを与えたデモと実装の注意点
Fun With Blurred Text デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 テキストにブラー効果を与える方法と注意点 テキストにブラー効果を与えたデモ テキストにブラー効果を与える方法と注意点 テキストにぼんやりとさせるブラー効果を与えるのは、簡単です。テキストのcolorを透明にし、text-shadowを使用します。 .blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); } しかし、このままでは危険です。colorには対応していて、text-shadowには対応していないブラウザでは、何も見えない状態になってしまいます。 これを解決するには、「modernizr」を使用して、対応ブラウザかどうか確認して適用します。 .textshadow .blurry-t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photobox – CSS3で作られたモーションの美しいギャラリー – creamu
HTML5 × CSS3 × jQueryを真面目に勉強してみる の記事一覧 | DevelopersIO
Chico UI