1. <div id="wrapper">
  2. <input type="radio" id="switch1" name="slideshow" checked>
  3. <input type="radio" id="switch2" name="slideshow">
  4. <input type="radio" id="switch3" name="slideshow">
  5. <input type="radio" id="switch4" name="slideshow">
  6. <input type="radio" id="switch5" name="slideshow">
  7. <div id="slideshow">
  8. <div class="slideContents">
  9. <section id="slide1">
  10. <div class="contents">
  11. <h1>奥行きがある感じ</h1>
  12. <p>スライドする距離を変えれば、やんわりパララックス。</p>
  13. </div>
  14. <img src="../img/slide_01.png">
  15. </section>
  16. <section id="slide2">
  17. <div class="contents">
  18. <h1>遅れて出てくる</h1>
  19. <p>スライドするタイミングをずらして、さりげなくアクセント。</p>
  20. </div>
  21. <img src="../img/slide_02.png">
  22. </section>
  23. <section id="slide3">
  24. <div class="contents">
  25. <h1>要素を立体的に</h1>
  26. <p>3Dtransformを使って、さらに立体感。</p>
  27. </div>
  28. <img src="../img/slide_03.png">
  29. </section>
  30. <section id="slide4">
  31. <div class="contents">
  32. <h1>アニメーションする</h1>
  33. <p>animationプロパティを使って、ほんのりアピール。</p>
  34. </div>
  35. <img src="../img/slide_04.png">
  36. </section>
  37. <section id="slide5">
  38. <div class="contents">
  39. <h1><span>いろいろアニメーション</span></h1>
  40. <p>飛んだり跳ねたりブルブルしたりして、賑やかし。</p>
  41. </div>
  42. <img src="../img/slide_05.png">
  43. </section>
  44. </div>
  45. <p class="arrow prev">
  46. <i class="ico"></i>
  47. <label for="switch1"></label>
  48. <label for="switch2"></label>
  49. <label for="switch3"></label>
  50. <label for="switch4"></label>
  51. <label for="switch5"></label>
  52. </p>
  53. <p class="arrow next">
  54. <i class="ico"></i>
  55. <label for="switch1"></label>
  56. <label for="switch2"></label>
  57. <label for="switch3"></label>
  58. <label for="switch4"></label>
  59. <label for="switch5"></label>
  60. </p>
  61. </div>
  62. </div>
  1. /* 略 */
  2. /* :::::: contents :::::: */
  3. .slideContents section {
  4. opacity: 0;
  5. }
  6. .slideContents section .contents {
  7. position: absolute;
  8. top: 0;
  9. left: 50%;
  10. width: 600px;
  11. height: 200px;
  12. margin-left: -300px;
  13. padding: 20px;
  14. box-sizing: border-box;
  15. }
  16. .slideContents section h1,
  17. .slideContents section p {
  18. color: lightseagreen;
  19. opacity: 0;
  20. }
  21. .slideContents section h1 {
  22. margin: 0;
  23. font-size: 16px;
  24. }
  25. .slideContents section p {
  26. font-size: 12px;
  27. }
  28. /* :::::: slideshow mechanism :::::: */
  29. #switch1:checked ~ #slideshow .slideContents #slide1,
  30. #switch2:checked ~ #slideshow .slideContents #slide2,
  31. #switch3:checked ~ #slideshow .slideContents #slide3,
  32. #switch4:checked ~ #slideshow .slideContents #slide4,
  33. #switch5:checked ~ #slideshow .slideContents #slide5 {
  34. z-index: 1;
  35. position: relative;
  36. -webkit-transform: translateX(0);
  37. transform: translateX(0);
  38. }
  39. #switch1:checked ~ #slideshow .slideContents #slide1,
  40. #switch2:checked ~ #slideshow .slideContents #slide2,
  41. #switch3:checked ~ #slideshow .slideContents #slide3,
  42. #switch4:checked ~ #slideshow .slideContents #slide4,
  43. #switch5:checked ~ #slideshow .slideContents #slide5 {
  44. opacity: 1;
  45. }
  46. #switch1:checked ~ #slideshow .slideContents #slide5,
  47. #switch1:checked ~ #slideshow .slideContents #slide4,
  48. #switch2:checked ~ #slideshow .slideContents #slide1,
  49. #switch2:checked ~ #slideshow .slideContents #slide5,
  50. #switch3:checked ~ #slideshow .slideContents #slide2,
  51. #switch3:checked ~ #slideshow .slideContents #slide1,
  52. #switch4:checked ~ #slideshow .slideContents #slide3,
  53. #switch4:checked ~ #slideshow .slideContents #slide2,
  54. #switch5:checked ~ #slideshow .slideContents #slide4,
  55. #switch5:checked ~ #slideshow .slideContents #slide3 {
  56. -webkit-transform: translateX(-100%);
  57. transform: translateX(-100%);
  58. }
  59. #switch1:checked ~ #slideshow .slideContents #slide3,
  60. #switch2:checked ~ #slideshow .slideContents #slide4,
  61. #switch3:checked ~ #slideshow .slideContents #slide5,
  62. #switch4:checked ~ #slideshow .slideContents #slide1,
  63. #switch5:checked ~ #slideshow .slideContents #slide2,
  64. #switch1:checked ~ #slideshow .slideContents #slide4,
  65. #switch2:checked ~ #slideshow .slideContents #slide5,
  66. #switch3:checked ~ #slideshow .slideContents #slide1,
  67. #switch4:checked ~ #slideshow .slideContents #slide2,
  68. #switch5:checked ~ #slideshow .slideContents #slide3 {
  69. transition-duration: 0s;
  70. }
  71. /* :::::: arrows :::::: */
  72. /* 略 */
  73. /* 奥行きがある感じ
  74. * 遅れて出てくる
  75. * 要素を立体的に
  76. * アニメーションする
  77. * いろいろアニメーション
  78. *
  79. * それぞれ、以下項のソース参照。
  80. */

奥行きがある感じ

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

遅れて出てくる

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

要素を立体的に

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

アニメーションする

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

いろいろアニメーション

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