[Web Design] CSS & JS Sliders From CodePen – CodePenからスライダーを紹介したまとめ記事
CodePenにあるCSS & JSスライダーを紹介したまとめ記事。稼働するものをEmbedしてるのでちょっと重いですが、各作例右上にある「CodePen」ロゴをクリックすると単独で表示する事ができます。様々な手法のスライダーが多数紹介されているので、スライダー選びの時に役立ちそう。
Tag Archives: Javascript
[Web Design] BigPicture – 軽快に動作するModal画像ビューアー
サクサク動くLightbox亜種。他のJSライブラリなどは必要とせず、これ単独で動くようです。クリック or タップで画像だけがフレームレスで開いて、再度クリックで収納。とってもシンプル。スマホページではわりと敬遠されるModal表示も、こういうシンプルなものなら使いやすそうです。ロードに時間かかる場合はローディングスピナーが出て、リンク切れしてる場合にはダイアログ出してくれるあたりが新設。また画像以外にビデオもイケます。構成がシンプルなだけに導入も簡単そうです。
[Web Design] 19 Mind-Blowing CodePen Experiments – CodePenのぶっ飛んだ作例まとめ
CodePenに上がっているぶっ飛んだ作例をまとめた記事。全部で19の作例が紹介されてるけど、どれもスゴいです。よくこんなの作るなーと感心するものばかり。各作例はEmbededされた形で掲載されているので、動くものをこの1ページで全部見る事ができます。BB-8超かわいい。
[Web Design] WebSlides – 縦方向のWebスライダー
縦方向にコンテンツをつなげるWebスライダー。スクロールを100vh（ウィンドウサイズの縦幅いっぱい）ごとに固定する、と言った方が伝わるかも。キーボードの十字キーの上下を使ってコンテンツを閲覧します。ちょっと残念なのが、スクロールホイールが効かないという点。スライドの1ページに当たるコンテンツは、sectionごとに区切って記述するようです。個人的にはスクロールの挙動を制御する系の見せ方ってあんまり好きではないんだけど、最近こういう見せ方流行ってますしね。LPやプレゼン資料作る時なんかに使えるかもしれません。
[Web Design] AOS – Animate On Scroll Library – スクロール芸のライブラリ
スクロールイベントをきっかけに、アニメーションしながら要素を出現させるという、いわゆるスクロール芸のライブラリー。JSとCSSを導入して、あとはブロック要素にゴニョゴニョ書けば実装できるようです。フェイドやフリップ、ズームなどの各種アニメーションが用意されています。こういうの流行ってるしちょっとやってみたい、的なノリでもサクっと導入できそうでナイスです。
[Web Design] Snazzy Maps – Google Mapsのデザインテーマ配布サイト
最近Google Mapsをサイトに埋め込んだ時に、「そういやマップのテーマ変える方法あったなー」と思って探してみたところ見つけたのがこのサイト。テーマがいくつか紹介され、また導入方法についても掲載されています。JSぶち込んでテーマ適用するんですねこれ。色指定の変更程度ならCSSイジくるだけなのでカスタマイズもできそうです。サイトのデザインにマップのデザインを合わせたい時なんかに使えそうです。
[Javascript] Granim.js – グラデーションのアニメーションJS
グラデーションのアニメーションってなんか変な日本語っぽいですね。イケませんね。けどまぁアレです、動くグラデーションを描画できるJSです。ただのグラデーションだけでなく、イメージと組み合わせたもの、マスクを使ったもの、クリックでグラデーションを変更できるものなど色々あります。けどグラデをアニメーションさせるだけ、というならPure CSSでもできるんですよね。なのでちょっと手の込んだ事をしたい場合とかにイイかもしれません。
[Javascript] Textures.js – マンガのトーンっぽいテクスチャを描画できるJS
マンガで使われるトーンのような印象のテクスチャを描画できるJS。テクスチャの種類は、ストライプ、ドット、網目、波、スクエアなど色々あり、自分で作る事もできるようです。ダウンロードはこちらから。画像ファイルを使わずに描画するため、サイズを増やさずに装飾できるのがとってもナイス。