【jQuery】本を作る

2020年12月27日jQuery

はじめに

前回調べた"matrix3d"。結局使いませんでした。コード書いてるうちに自然に問題が解決した感じです。「あれ？できてるじゃん」って。というワケでできました。web"ページ"と言うからには、めくらなければ。

できた

See the Pen
XWjeJyZ by AtsushiNakata (@nakata999)
on CodePen.

な～んか…。ちょっとアレですね。チープ過ぎやしませんかねぇ。まぁ作ってる途中で気づいてましたけど。紙のペラペラ感が無いせいでしょうか。あとは、画面の幅が狭いと読みにくい。

解説

まずはCSSです。

.front {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: pink;
  backface-visibility: hidden;
}
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
  background-color: lightgreen;
  backface-visibility: hidden;
}

1ページを表面(.front)と裏面(.back)で構成して両面印刷にしています。エコ。裏面は"transform: rotateY(-180deg)"であらかじめひっくり返しておきます。そして、裏側を非表示にするために"backface-visibility: hidden"を指定します。これを指定してあげないと裏側から透けているように見えてしまいます。次はjQueryを見てみましょう。

//ページをめくっている途中だったら何もしない
if(openDeg !== 0 || closeDeg !== -180){
  return false;
}

↑これが無いと、矢印を連打された時に挙動がおかしなことに。ページがぐるぐる回っていました。

//90度まで開いたらz-indexを変更
if(openDeg < -90){
  page.css("z-index",cnt * -1);
}

↑そしてコレ。1ページ目はめくる前は重なり順が1番上になっていますが、めくった後は1番下にしないといけません。そうしないと、全てのページをめくり終わった時に1ページ目の裏側が見えている状態になってしまいます。

あとがき

動きとしては面白いと思うんですけど、見やすさを考えるとダメですね。苦労したんですけどねぇ…。あと、レイアウトをなんとかしようとしてるうちにCSSがゴッチャゴチャになってしまいました。ホント位置調整が難しい。そこら辺ももっと勉強しようと思います。ありがとうございました。

おしゃれ度

★★☆☆☆