A website to showcase Carl Brenner's work about design and development.
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1:SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素(駅やルートなど)のテキストファイルを元に、Canvasで描画されています。 各要素のデータ(オレンジのルート)はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選:Webサイト作成手順を勉強するまとめ(3)(1/3 ページ) 新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWebアニメーション制作に役立つEdge AnimateやFlash の使い方について。エレメント、シンボル、モーションパスの使い方から、パブリッシュ方法、レスポンシブ対応、音の付け方、Flashからの変換まで、さまざまなテクニックを紹介します。 前々回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、前回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになったら、Webサイトに
こんにちは。 緑のにおいが気持ち良い季節になってきましたね。3月4月は花粉で涙をボロボロ流しながら生活していたのですが、やっと思う存分散歩ができそうです。 さっそくですが、デザイナー・クリエイターのみなさんは、自分の作品やスキルをアピールするために普段どのようなツールを使っているでしょうか? 現在さまざまなWebサービスが出ており、うまく利用できれば活動や交流の幅が広がるはず! そう思って今回はクリエイター向けのサービスをいくつかまとめました。 目次 UIアニメーションのヒントに ちょっとしたアニメーションを作るときに参考にしています。動きを眺めるだけでも面白く、インスピレーションがわきます。 CAPPTIVATE.co iPhoneアプリのUIアニメーションをカテゴリ別に紹介しています。マウスオンでアニメーションが確認でき、アプリのデザインやUIアニメーションなど、アプリ開発に大変役立ち
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
あちこちでお目にかかる水平型の多階層ナビゲーションで、子階層を表示する時のアニメーションのさまざまなバリエーションを紹介します。 通常時の見た目は同じですが、一手間加えてあると「おっ!」ってなりますよね。 Animated Navigation Examples ベースのHTMLは、非常にシンプルです。 HTML ナビゲーションの各アイテムはリストで実装し、nav要素で内包します。 <nav class="nav"> <ul> <li> <a href="#">Nav Item</a> <ul> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> </ul> </li> <li> ... ... </ul> </nav>
デザインの細かいところまでこだわりが! こんな発想はどこから生まれるの? そんな次のプロジェクトのヒントになるような面白いアイデア満載のウェブサイトを紹介します。 時間のある時にじっくり楽しんでください!
ふわっと下から浮き出るツールチップ:脱エンジニアっぽさ! クライアントの笑顔を引き出すCSS3アニメーション(3)(1/3 ページ) 今回は、アニメーションするツールチップ(吹き出し)をCSSだけで作ってみたいと思います。 ツールチップを使えば、説明文などが必要な場合も画面をスッキリとさせられます。特に、Webサイトの訪問者にアクションを求める入力フォーム画面などでその効果を発揮します。例えば、購入手続き画面においては、何度も注文したことがあるリピート客にとって、入力方法の説明はもはや分かりきった“ノイジー”な情報ですね。こうした「知りたい人は簡単に情報を得られ、知っている人は目に触れずに済む」ようにするために、ツールチップは非常に有効な手段となります。ただし、注釈文をきちんと認識させるべき会員登録画面などでは、ツールチップで説明を隠してしまうのは望ましくないので、安易な乱用は避けたいもの
いつか使いそうなのでメモ的にエントリー。 JavaScriptでアニメーションするゲージを作れるのがJustGageだ。 ちょっとしたダッシュボードなどに使えていいのではなかろうか。 もちろん色やアニメーション速度もカスタマイズすることができる。 マークアップも簡単なので覚えておいてもいいですな。
Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awesomeが使われており、アイコン、アカウント、蝶番をそれぞれspan要素で配置しています。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <a href="http://twitter.com/jonitrythall"> <span class="button"> <i class="fa fa-twitter"></i> </span> <span cl
CSS3アニメーションの基本:脱エンジニアっぽさ! クライアントの笑顔を引き出すCSS3アニメーション(1)(1/3 ページ) エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。 しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ!」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。
かっこいいの一言に尽きる、紙を折り畳むアニメーションを伴ったiOS用のUIコントロール -PaperFold
使うシーンは限られると思いますが、アニメーションが気持ちよかったのでご紹介。 ゲージと数字が連動して、クルマのメーターのようなアニメーションです。 Gauge.js -GitHub Gauge.jsの特徴 Gauge.jsのデモ Gauge.jsの使い方 Gauge.jsの特徴 アニメーションでゲージが変化します。 HTML5 Canvasを使ってJavaScript/CoffeScriptで作成。 画像や外部スタイルシートファイルは無し。 jQueryはサポートしてますが、特に必要ありません。 さまざまな設定が可能。 MITライセンス。 対応ブラウザ Chrome Safari 3.2+ Firefox 3.5+ IE 9 Opera 10.6+ Mobile Safari (iOS 3.2+) Android 2.3+ Gauge.jsのデモ デモでは右のオプションを変更すると、直ちに
最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右:ホバー時のアイテム、左:通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装です。 アイテム時を例に紹介します。 HTML 各円形のエレメントはリスト要素で、見出しやパラグラフをdiv要素で二重に内包します。 <ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>見出し</h3> <p>パラグラフ <a href="http://">リンク</a></p> </d
見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。 光点がアニメーションで移動 ラジオボタンの選択が移動するのは、分かりやすいですね。 実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> CSS body { padding: 50px; background-color: hsl(0,0%,20%); } input { -webkit-appearance:
JavaScriptは使用せず、CSS3アニメーションで画像を振り子のように揺らすスタイルシートを紹介します。 Swinging image with CSS animations 画像はネコの写真だけで、枠やピンや糸はスタイルシートです。 実装は下記のようになります。 HTML <figure class="swing"><img src="http://placekitten.com/g/200/200"></figure> CSS body {background: #9cf;} .swing { -moz-animation: swing linear 2s infinite; -moz-transform-origin: center -20px 0; -webkit-animation: swing linear 2s infinite; -webkit-transform-o
Demo 3 BookBlockの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト、そしてスワイプイベント用に「jquery++」を外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquerypp.custom.js"></script> <script type="text/javascript" src="js/jquery.bookblock.js"></script> Step 2: HTML 各ページはdiv要素で実装し、それらをdiv要素で内包します。 <div id="b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く