読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

CSS3とjQueryで回転するフォトギャラリーを作った

どうも!chuckです。

タイトルの通り。CSS3の勉強がてら、回転するフォトギャラリーを作りましたのでお披露目ヽ(=´▽`=)ノ

 

 

完成品

まずは完成品を。こちらになります。

f:id:chuck0523:20150710220120p:plain

http://chuck0523.github.io/front-end-coding/rotateToSpread/rotateToSpread6.html

 

スクロールに応じて回転します。

また、マウスオーバーで写真が目立ちます。

 

f:id:chuck0523:20150710220255p:plain

 

スマホ対応

申し訳程度のスマホ対応もしています。って言っても画像サイズを縮小しただけですが(ヽ´ω`)

f:id:chuck0523:20150710220425p:plain

 

 

技術的な話

CSSjQueryで実装しています。

CSS的にはtransformのお世話になりました。

transform : rotateZ(xxxdeg);  (画像の回転)

transform-origin : 30px 150px; (回転の軸の位置)

 

また、スクロールはお得意のjQueryで。スクロールした量を回転角度に充てています。

 

課題とか

transform-originの扱いにまだ慣れていないかなあ。スマホ版でも回転軸の位置を変えませんでした。なので、画面の小ささに対して画像の回転領域が広すぎますねヽ(´Д`;)ノ

この回転軸をjQueryでゴリゴリ動かせたら表現の幅がぐっと広がりそう…!

 

 

コードなど

gist21b6d64a1b369fd1a796

 

github.com

 

参考にしたサイト様

www.htmq.com

 

www.htmq.com

 

unformedbuilding.com