JavaScript アニメーションのデザインパターン

2012/05/13 955 users アニメーション JavaScript デザインパターン 変色

JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() ... 続きを読む

IDを使わないCSSの設計｜Web Design KOJIKA17

2013/09/10 524 users CSS header 設計 clearfix Logo

CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <... 続きを読む

画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！

2014/11/28 267 users lightbox onclick マク コピペ 昨今

2014-11-29 画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" ... 続きを読む

[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch | コリス

2010/11/23 257 users コリス フェード example スクロール スクリプト

デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="http://coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Examp... 続きを読む

[CSS]JavaScriptを使わずに、Pinterest風レイアウトにするスタイルシートのテクニック | コリス

2012/08/22 160 users コリス columns wrapper CSS テクニック

昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns... 続きを読む

react-railsでサーバーサイドレンダリングしつつクライアントでsetStateできて最高になった - Qiita

2015/08/09 126 users Qiita React サーバーサイド pushState

土日でreact-railsとturbolinksを勉強してみた成果です やりたいこと 画面遷移するときは<div id='content'></div> の中身だけ入れ替えて、pushStateで行き来できるようにしたい reactを使ったリッチなページでも、イニシャルロードやSEOの為にサーバーサイドでレンダリングしておきたい サーバーサイドレンダリングした要素を破棄することなくReactで初... 続きを読む

Collection & Copy - 画像 CSSを使った角丸

2005/11/11 125 users Copy Collection CSS 角丸 HTML

画像 + CSSを使った角丸 技術 wg:Introducing DomCorners 上記ページを読んだ。 Nifty Corners 作者はCSSのみで角丸を実現する記事を書いている。当ブログでも、これを利用している。 その上で異なるアプローチの角丸を紹介している。 上のような画像を、1コマずつずらしながらCSSを利用して貼りこんで行く。 対象となる領域のHTMLは以下。 <div id="b... 続きを読む

上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー｜Webpark

2013/05/23 113 users jQuery Webpark Facebook お供 マウス

タイトルのとおりjQueryを使ったクリックで開閉するメニューを作ってみました。先日マウスを乗せると開くメニューを紹介しましたが、用途によって使い分けるといいと思います。 facebookにも同じようなのがありますね。それではHTMLから解説していきます。 HTML まずはHTMLです。コンテンツの部分は省略しています。 <div id="fixed-menu"> <div id="fixed-m... 続きを読む

Lucky bag::blog: リモートロールオーバーを CSS だけでやってみる

2005/08/26 98 users CSS Lucky Bag Blog Roll ロールオーバー

この記事が属するカテゴリー CSS リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は、JavaScript を使わずに CSS だけででも可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。 remote.html サンプルの (X)HTML コードは下記の通り。 <div id="roll... 続きを読む

これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス

2012/01/18 89 users コリス NAV Container ナビゲーション Opera

デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a h... 続きを読む

Backbone.jsでつくるMVPなUIパターン【リスト】 ｜ クラスメソッド開発ブログ

2013/03/04 79 users Backbone.js クラスメソッド開発ブログ リスト

今回はBackbone.jsを使ってフォームから追加し、削除できるリストを作ってみたいと思います。デザインは前回同様Twitter Bootstrapで作成しました。 htmlはこちら！ <div id="ui-list"> <div class="list-controls"> <form> <div class="input-append"> <input type="text" placeh... 続きを読む

[JS]文字にアニメーションを使った面白いエフェクトを与えるスクリプト -Text Effects | コリス

2012/04/01 75 users コリス TypeWriter jquery.js スクリプト

Scrambled Writer 文字をごちゃまぜにし、アニメーションで元通りにします。 Text Effectsの使い方 Text Effectsの使い方は簡単で、「jquery.js」と当スクリプトを外部ファイルとして記述し、スクリプトを実行するだけです。 「Typewriter」を例にすると、下記のようになります。 HTML <div id="my-container"> Lorem ips... 続きを読む

[JS]ごく普通の画像を立体的にスライスしてアニメーションで切り替える画像ギャラリー -Slicebox | コリス

2011/09/06 73 users コリス class title div要素 アニメーション

デモページ：垂直スライスでウェーブ状 Sliceboxの実装 HTML 画像をdiv要素で内包します。 <div id="sb-slider" class="sb-slider"> <img src="images/1.jpg" title="Creative Lifesaver"/> <img src="images/2.jpg" title="Honest Entertainer"/> <im... 続きを読む

[CSS]拡大表示する際、CSS3でぼよよ～んとしたアニメーションを加えるチュートリアル | コリス

2012/05/29 71 users コリス div チュートリアル CSS アニメーション

十字ボタンをクリックすると、パネルがスライド表示され、各アイテムをクリックすると、バウンドのアニメーションを伴って、ぼよよ～んと拡大表示されます。 デモページ 実装 HTML 中央に配置する領域をdiv要素で確保し、スライドするパネルはdiv要素で、各アイテムはリスト要素で実装します。 <div id="item-receiver"></div> <div id="thumbnail-wrappe... 続きを読む

[JS]ブラウザでiPhoneのような滑らかスクロールを実現するスクリプト -Overscroll | コリス

2011/08/29 65 users iPhone Overscroll コリス Overlay

デスクトップのブラウザでもiPhoneのような滑らかなアニメーションでコンテンツをスクロールさせるjQueryのプラグインを紹介します。 デモページ Overscrollの実装 デモを例に実装方法を紹介します。 HTML スクロールするコンテンツに必要な箇所は「div id=screen」です。 デモでは初期状態ではオーバーレイ（div id=overlay）が表示され、フォーカスされるとスクリー... 続きを読む

[CSS]あらゆる背景上で美しく機能する半透明なエレメントを実装するスタイルシート | コリス

2012/01/22 64 users コリス shelf エレメント 半透明 CSS

まるでガラスで作られた棚のように、美しい半透明な3Dのエレメントを実装するCSS3のテクニックを紹介します。 デモページ：Firefoxのキャプチャ 実装 HTML HTMLはシンプルで、各アイコンはa要素、ガラス棚はdiv要素で実装されています。 <div id="shelf"> <!-- Add icons here --> <a class="icon" href="#"></a> <a c... 続きを読む

ブラウザ上でサインを書けるjQueryプラグイン「jSignature」:phpspot開発日誌

2012/06/11 51 users jQueryプラグイン phpspot開発日誌 scrip

jSignature ブラウザ上でサインを書けるjQueryプラグイン「jSignature」。 CanvasかFlashで描画出来るので多くのブラウザに対応。ウェブサイトにサインを導入したい場合に使えるかも 実装は以下のように超簡単です <script src="libs/jSignature.min.js"></script> <div id="signature"></div> <scrip... 続きを読む

prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法:phpspot開発日誌

2006/12/14 50 users prototype.js phpspot開発日誌 Ajax

Ajax.PeriodicalUpdater - Ajaxで指定エレメントの内容を定期的に書き換える - prototype.jsリファレンス prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法。 prototype.jsのAjax.PeriodicalUpdaterとは、指定のDIV要素(例えば <div id="content"></div>)を指... 続きを読む