ガジェットとWebデザインの備忘録

  1. CSS

(※超簡単)ポートフォリオに最適な画像をスライドできるJavaScriptを実装してみた。

なかの(@nkn12104)です。

コリスさんで紹介されてたBeer JSを実装してみたところ簡単に実装できるうえに結構ギミックがあってサイト作成に活用できそうなので紹介します。

まずはこちらの実装したサイトをご覧ください。

https://sat0512.sakura.ne.jp/tnv/index.html

サンプルサイト

こちらの写真は同じ構図で撮った写真2枚、lightroomでそれぞれ編集して

ホワイトバランス等が違うものとなります。

以下は上記の実装サイトからcodeを一部抜粋&編集したものとなります。

(それにしてもCodePenは本当に便利だな・・・)

手順で言うとまずBeer.jsをDLします。
githubに落ちてるので拾ってきましょう。

あとは指定したidに対してjs発動させます。

CSSはflexboxにしたほうが良さげです。
他でやろうとしたら崩れました。

みなさんもポートフォリオを作る際に使用してみてはいかがでしょうか。

スポンサード・リンク

CSSの最近記事

  1. (※超簡単)ポートフォリオに最適な画像をスライドできるJavaScriptを実装してみた。…

  2. CSSのみでパララックス風に試みた。

関連記事