1. <!-- HTMLは「演出を加える」の項のソースを参照 -->
  1. /* 略 */
  2. /* :::::: arrow mechanism :::::: */
  3. .arrow label {
  4. z-index: -1;
  5. }
  6. #switch1:checked ~ #slideshow .prev label[for="switch5"],
  7. #switch2:checked ~ #slideshow .prev label[for="switch1"],
  8. #switch3:checked ~ #slideshow .prev label[for="switch2"],
  9. #switch4:checked ~ #slideshow .prev label[for="switch3"],
  10. #switch5:checked ~ #slideshow .prev label[for="switch4"],
  11. #switch1:checked ~ #slideshow .next label[for="switch2"],
  12. #switch2:checked ~ #slideshow .next label[for="switch3"],
  13. #switch3:checked ~ #slideshow .next label[for="switch4"],
  14. #switch4:checked ~ #slideshow .next label[for="switch5"],
  15. #switch5:checked ~ #slideshow .next label[for="switch1"] {
  16. z-index: 1;
  17. transition: z-index 0s;
  18. }
  19. #switch1:checked ~ #slideshow .prev label[for="switch5"],
  20. #switch1:checked ~ #slideshow .next label[for="switch2"] { transition-delay: 1s; }
  21. #switch2:checked ~ #slideshow .prev label[for="switch1"],
  22. #switch2:checked ~ #slideshow .next label[for="switch3"] { transition-delay: 1.2s; }
  23. #switch3:checked ~ #slideshow .prev label[for="switch2"],
  24. #switch3:checked ~ #slideshow .next label[for="switch4"] { transition-delay: 1s; }
  25. #switch4:checked ~ #slideshow .prev label[for="switch3"],
  26. #switch4:checked ~ #slideshow .next label[for="switch5"] { transition-delay: 1.5s; }
  27. #switch5:checked ~ #slideshow .prev label[for="switch4"],
  28. #switch5:checked ~ #slideshow .next label[for="switch1"] { transition-delay: 1s; }
  29. /* :::::: action mechanism :::::: */
  30. /* 略 */

奥行きがある感じ

スライドする距離を変えれば、やんわりパララックス。

遅れて出てくる

スライドするタイミングをずらして、さりげなくアクセント。

要素を立体的に

3Dtransformを使って、さらに立体感。

アニメーションする

animationプロパティを使って、ほんのりアピール。

いろいろアニメーション

飛んだり跳ねたりブルブルしたりして、賑やかし。