週刊Webテク通信

2014年6月第1週号1位は、背景画像が全画面表示されるイントロエフェクトいろいろ、気になるネタは、楽天、厳選スイーツなどを扱うリアル店舗「楽天カフェ」開設、無料Wi-Fiや全席コンセント完備

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2014年5月26日~6月1日の間に見つけた記事のベスト5です。

1. Inspiration for Article Intro Effects | Codropshttp://tympanus.net/codrops/2014/05/22/inspiration-for-article-intro-effects/

全画面の背景画像+タイトル(テキスト)がまず表示され、スクロールするとちょっとした効果とともに背景画像が消えていく(あるいは小さくなる)といった、最近よく見かける効果のデモです。ここでは、⁠イントロエフェクト」と呼んでいますね。効果のパターンが数種類用意されています。

Mediumでもおなじみの、全画面の背景画像+タイトルですが、これはスマートフォンでの表示の際に収まりがいいことも流行っている理由なのでしょう。

なお、コメント欄で、⁠すばらしいけど、プリントアウトできないよね」⁠プリント用のCSSを作れば大丈夫よ」といったやり取りがなされていました。

このデモを作るにあたって参考にしたという、Jam3のイントロエフェクトは、全画面の動画が背景になっていて面白いです。短いループの動画なのですが、クオリティも高く印象に残ります。

図1 背景画像が全画面表示されるイントロエフェクトいろいろ
図1 背景画像が全画面表示されるイントロエフェクトいろいろ

2. Hide your header on scroll - Headroom.jshttp://wicky.nillia.ms/headroom.js/

不要なときは隠れて、必要なときに出現するヘッダーを実現するスクリプトです。ある程度スクロールするとヘッダが隠れ、上へスクロールするとヘッダが出現するようになっています。

固定ヘッダは便利な一方、コンテンツの表示される領域を狭めてしまうという欠点もあります。その問題を解決するうえで、このアプローチはなかなかよくできていると思いました。

ヘッダが隠れるタイミングや、隠れたり出現するときのアニメーション効果をカスタマイズできるようになっています。

図2 スクロールによって表示・非表示が切り替わるヘッダ
図2 スクロールによって表示・非表示が切り替わるヘッダ

3. Cody - Free HTML/CSS/JS resourceshttp://codyhouse.co/

HTML/CSS/JSのライブラリをまとめたサイトです。Amber CreativeというWebデベロッパーとUI/UXデザイナーとのユニットが作っているようで、二人の作ったライブラリをまとめて提供する場所のようです。

どのライブラリもレスポンシブ対応で、フラットデザインで作られています。このサイト自体もレスポンシブ&フラットデザインで、シンプルできれいにデザインされています。

図3 HTML/CSS/JSのライブラリをまとめたサイト
図3 HTML/CSS/JSのライブラリをまとめたサイト

4. Tutorials for Creating 3D Effects in CSS3 and JavaScripthttp://www.webresourcesdepot.com/3d-effects-in-css3-javascript/

CSS3とJavaScriptを使って立体的効果を加えるための、チュートリアルやライブラリをまとめた記事です。

立体的なエフェクトを使ったスライドショーや、レストランのメニューや本など現実の紙の動きをマネした3D効果などが、Codropsなどからピックアップされています。

図4 立体的効果を加えるためのチュートリアルやライブラリ
図4 立体的効果を加えるためのチュートリアルやライブラリ

5. Tools, jQuery Plugins And Resources For Web Designershttp://www.designyourway.net/blog/resources/freebies-jquery-plugins-and-resources-for-web-designers/

Webデザインに役立つjQueryプラグインやライブラリ/ツールなどの情報で、最近公開されたものを中心にまとめた記事です。

レスポンシブなテーブル、CSSだけで作ったローディングアニメーション、PhotoshopでWebデザインするときに役立つツールなどが紹介されています。

図5 Webデザインに役立つjQueryプラグインやライブラリ/ツールの最新まとめ
図5 Webデザインに役立つjQueryプラグインやライブラリ/ツールの最新まとめ

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

Minimalist Online Markdown Editorhttp://markdown.pioul.fr/

「Minimalist Online Markdown Editor」は、マークダウン形式のテキストを編集できるWebサービスです。

画面が左右に2分割されていて、マークダウンを編集しながら、リアルタイムにプレビューできます。また、プレビューではなくHTMLに変換したコードを表示できるのも便利なところです。

日本語は特に問題なく表示できました。URLを指定して画像を入れた場合、プレビューで画像を表示できます。ちなみに、文字の大きさの設定はありませんが、単純にブラウザの設定で文字サイズを変えれば反映されます。

ログインなどは不要ですぐに使うことができ、非常にシンプルなので、人のマシンでマークダウンの概要を説明するときにも活躍できそうです。

ソースコードはGitHubで公開されています。

図6 オンラインで使えるマークダウンエディタ
図6 オンラインで使えるマークダウンエディタ

おすすめ記事

記事・ニュース一覧