www_tacaのブックマーク / 2016年5月19日

www_taca id:www_taca

2016年5月19日のブックマーク (4件)

スクロールに合わせてヘッダーを変化させる - JavaScriptテックラボ - [SMART]
概要ヘッダを上部に固定しつつ、スクロールに合わせて拡大・縮小させる方法を紹介します。デモダウンロード ※ファイルの場所は上記サイトの resize-header-on-scroll フォルダです。 HTMLマークアップはヘッダー部のHEADER要素とH1要素、コンテンツ部のMAIN要素のみです。 HTML <header> <h1 id="site-logo">smart</h1> </header> <main id="main"> </main> スクロールの位置によるヘッダーの拡大・縮小の仕掛けは簡単で、スクロール位置によってHEADER要素に拡大・縮小用のクラスを追加・削除します。あとはCSSのアニメーションをHEADER要素に付けてあげるだけです。スクロール位置の取得は scrollTop() を使います。 $(window).scrollTop() CSSはHEADE
www_taca 2016/05/19
css

JavaScript

web制作
リンク
手段を切り離したら楽になったデザイナーの仕事のお話
元々デザインの仕事は広範囲だったここ数年でようやく Web・アプリの世界で「デザイナーは広範囲でいろいろ知っておかなければならない」という声が高まりましたが、元々デザイナーの仕事は範囲が広いものでした。例えばファッションデザイナーはデザイン力はもちろん、技術に基づいた設計、製造工場との交渉、流行や市場の動向の理解などが必要とされています。インダストリアルデザイナーや建築家も同じです。ただデザインができるというだけでは一人前として見なされない仕事がすぐそこにのあるにも関わらず、なぜ Web・アプリでは目新しく見えてしまうのでしょうか。ひとつの仮説として考えられるのが、DTP デザインなどに見られるデザインの分業化・効率化です。1984 年に登場した Apple Machintosh には Adobe の PostScript が実装されました。翌年に発売された PageMaker によっ
www_taca 2016/05/19
デザイン

仕事
リンク
最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ
ブラウザやウェブサイト体験が進化したことで、さまざまなアニメーションを実装したウェブサイトや、モバイルアプリへの注目が集まっています。今回は「気持ちの良い動き」がポイントとなった、最新UIデザインをまとめてご紹介します。余白スペースをたっぷり利用したミニマルなレイアウトから、アニメーションを加えることでよりユーザーの注目を集めるナビメニューや、ユーザーインターフェースを中心に揃えています。なかなか言葉で説明しにくい遷移フローが分かりやすく説明できるので、うまくクライアントの要望に応えることができるかもしれません。詳細は以下から。最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ Cima is Live 筆ブラシでペイントしたようなエフェクトを、各ページやコンテンツに活かした、さわやかな配色も素敵なウェブサイト用UIデザイン。 Birds of Paradise
www_taca 2016/05/19
webデザイン
リンク
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px　高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin
www_taca 2016/05/19
css

web制作

webデザイン

レスポンシブ
リンク
- 2016年5月21日
- 2016年5月19日
- 2016年5月18日