Float sections縦スクロールで次のセクションを表示
3D表現ぽくしつつ、スクロールでスライドが切り替わるようなスタイルを作成
section#1
基本的に031と同じ仕組み。CSSで3Dっぽく表現しているだけ。(z-indexに気をつけなければaタグをクリックできなくなったりするので注意)
座標の計算などは、センスがないとできないと思うので、これを実際に使えるかどうかはそこ次第。
ページを表示したときは各セクションの位置が設定されておらず一瞬位置が不正表示になるので、初回の位置設定が終わってから画面を表示するなど工夫した方が良い。(今回は入れないが)
section#2
031でも同じことが言えるが、JSで "el.style.left = 'xxx%';"
と言ったようにスタイルを設定するようにしているが、
セクションの最大個数が決まっている場合は、data属性に「このセクションは中心から何番目か」を示す値をセットするようにしてCSSでスタイルを当てるのも良い。
section#3
Ea enim est aliqua ex reprehenderit nisi amet et aliqua ut. Exercitation dolor fugiat ex ex ad eu occaecat. Et esse laborum incididunt deserunt. In nulla irure occaecat nostrud culpa ut velit eu laboris. Ut enim proident velit culpa amet adipisicing magna laborum reprehenderit anim nostrud excepteur ipsum.
Ea enim est aliqua ex reprehenderit nisi amet et aliqua ut. Exercitation dolor fugiat ex ex ad eu occaecat. Et esse laborum incididunt deserunt. In nulla irure occaecat nostrud culpa ut velit eu laboris. Ut enim proident velit culpa amet adipisicing magna laborum reprehenderit anim nostrud excepteur ipsum.
section#4
Velit eu nisi proident laboris sunt aliqua ut in ut duis. Aliqua in cupidatat labore reprehenderit aute. Magna nisi sit incididunt culpa occaecat. Adipisicing est exercitation aliqua sit voluptate. Exercitation adipisicing ipsum culpa tempor voluptate. Deserunt id velit ullamco reprehenderit do ipsum ex sint deserunt velit id. Aute id aliquip ut proident duis sit incididunt excepteur et sunt veniam nostrud consectetur.
Velit eu nisi proident laboris sunt aliqua ut in ut duis. Aliqua in cupidatat labore reprehenderit aute. Magna nisi sit incididunt culpa occaecat. Adipisicing est exercitation aliqua sit voluptate. Exercitation adipisicing ipsum culpa tempor voluptate. Deserunt id velit ullamco reprehenderit do ipsum ex sint deserunt velit id. Aute id aliquip ut proident duis sit incididunt excepteur et sunt veniam nostrud consectetur.
section#5
Ea enim est aliqua ex reprehenderit nisi amet et aliqua ut. Exercitation dolor fugiat ex ex ad eu occaecat. Et esse laborum incididunt deserunt. In nulla irure occaecat nostrud culpa ut velit eu laboris. Ut enim proident velit culpa amet adipisicing magna laborum reprehenderit anim nostrud excepteur ipsum.
Ea enim est aliqua ex reprehenderit nisi amet et aliqua ut. Exercitation dolor fugiat ex ex ad eu occaecat. Et esse laborum incididunt deserunt. In nulla irure occaecat nostrud culpa ut velit eu laboris. Ut enim proident velit culpa amet adipisicing magna laborum reprehenderit anim nostrud excepteur ipsum.
section#6
Velit eu nisi proident laboris sunt aliqua ut in ut duis. Aliqua in cupidatat labore reprehenderit aute. Magna nisi sit incididunt culpa occaecat. Adipisicing est exercitation aliqua sit voluptate. Exercitation adipisicing ipsum culpa tempor voluptate. Deserunt id velit ullamco reprehenderit do ipsum ex sint deserunt velit id. Aute id aliquip ut proident duis sit incididunt excepteur et sunt veniam nostrud consectetur.
Velit eu nisi proident laboris sunt aliqua ut in ut duis. Aliqua in cupidatat labore reprehenderit aute. Magna nisi sit incididunt culpa occaecat. Adipisicing est exercitation aliqua sit voluptate. Exercitation adipisicing ipsum culpa tempor voluptate. Deserunt id velit ullamco reprehenderit do ipsum ex sint deserunt velit id. Aute id aliquip ut proident duis sit incididunt excepteur et sunt veniam nostrud consectetur.
section#7
Ea enim est aliqua ex reprehenderit nisi amet et aliqua ut. Exercitation dolor fugiat ex ex ad eu occaecat. Et esse laborum incididunt deserunt. In nulla irure occaecat nostrud culpa ut velit eu laboris. Ut enim proident velit culpa amet adipisicing magna laborum reprehenderit anim nostrud excepteur ipsum.
Ea enim est aliqua ex reprehenderit nisi amet et aliqua ut. Exercitation dolor fugiat ex ex ad eu occaecat. Et esse laborum incididunt deserunt. In nulla irure occaecat nostrud culpa ut velit eu laboris. Ut enim proident velit culpa amet adipisicing magna laborum reprehenderit anim nostrud excepteur ipsum.