Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Javascript

[Web Design] BigPicture – 軽快に動作するModal画像ビューアー

  • Pocket
  • このエントリーをはてなブックマークに追加

サクサク動くLightbox亜種。他のJSライブラリなどは必要とせず、これ単独で動くようです。クリック or タップで画像だけがフレームレスで開いて、再度クリックで収納。とってもシンプル。スマホページではわりと敬遠されるModal表示も、こういうシンプルなものなら使いやすそうです。ロードに時間かかる場合はローディングスピナーが出て、リンク切れしてる場合にはダイアログ出してくれるあたりが新設。また画像以外にビデオもイケます。構成がシンプルなだけに導入も簡単そうです。

[Web Design] 19 Mind-Blowing CodePen Experiments – CodePenのぶっ飛んだ作例まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

CodePenに上がっているぶっ飛んだ作例をまとめた記事。全部で19の作例が紹介されてるけど、どれもスゴいです。よくこんなの作るなーと感心するものばかり。各作例はEmbededされた形で掲載されているので、動くものをこの1ページで全部見る事ができます。BB-8超かわいい。

[Web Design] WebSlides – 縦方向のWebスライダー

  • Pocket
  • このエントリーをはてなブックマークに追加

縦方向にコンテンツをつなげるWebスライダー。スクロールを100vh(ウィンドウサイズの縦幅いっぱい)ごとに固定する、と言った方が伝わるかも。キーボードの十字キーの上下を使ってコンテンツを閲覧します。ちょっと残念なのが、スクロールホイールが効かないという点。スライドの1ページに当たるコンテンツは、sectionごとに区切って記述するようです。個人的にはスクロールの挙動を制御する系の見せ方ってあんまり好きではないんだけど、最近こういう見せ方流行ってますしね。LPやプレゼン資料作る時なんかに使えるかもしれません。

[Web Design] AOS – Animate On Scroll Library – スクロール芸のライブラリ

  • Pocket
  • このエントリーをはてなブックマークに追加

スクロールイベントをきっかけに、アニメーションしながら要素を出現させるという、いわゆるスクロール芸のライブラリー。JSとCSSを導入して、あとはブロック要素にゴニョゴニョ書けば実装できるようです。フェイドやフリップ、ズームなどの各種アニメーションが用意されています。こういうの流行ってるしちょっとやってみたい、的なノリでもサクっと導入できそうでナイスです。

[Web Design] Snazzy Maps – Google Mapsのデザインテーマ配布サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

最近Google Mapsをサイトに埋め込んだ時に、「そういやマップのテーマ変える方法あったなー」と思って探してみたところ見つけたのがこのサイト。テーマがいくつか紹介され、また導入方法についても掲載されています。JSぶち込んでテーマ適用するんですねこれ。色指定の変更程度ならCSSイジくるだけなのでカスタマイズもできそうです。サイトのデザインにマップのデザインを合わせたい時なんかに使えそうです。

[Javascript] Granim.js – グラデーションのアニメーションJS

  • Pocket
  • このエントリーをはてなブックマークに追加

グラデーションのアニメーションってなんか変な日本語っぽいですね。イケませんね。けどまぁアレです、動くグラデーションを描画できるJSです。ただのグラデーションだけでなく、イメージと組み合わせたもの、マスクを使ったもの、クリックでグラデーションを変更できるものなど色々あります。けどグラデをアニメーションさせるだけ、というならPure CSSでもできるんですよね。なのでちょっと手の込んだ事をしたい場合とかにイイかもしれません。

[Javascript] Textures.js – マンガのトーンっぽいテクスチャを描画できるJS

  • Pocket
  • このエントリーをはてなブックマークに追加

マンガで使われるトーンのような印象のテクスチャを描画できるJS。テクスチャの種類は、ストライプ、ドット、網目、波、スクエアなど色々あり、自分で作る事もできるようです。ダウンロードはこちらから。画像ファイルを使わずに描画するため、サイズを増やさずに装飾できるのがとってもナイス。

[Javascript] Grade.js – 画像から最適なグラデーション背景を生成してくれるJS

  • Pocket
  • このエントリーをはてなブックマークに追加

1枚の画像から、その画像に合ったグラデーション背景を生成してくれるJSライブラリ。画像内に含まれる色情報の中から、多く使われている2色を抽出してグラデーションにしているようです。この手法最近Apple製アプリケーションでよく見ますよね。iTunesでアルバムを選択している時のヘッダ色とか。Webでもこの手法が使えるというのはナイスですな。