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. <div id="slideshow">
  6. <div class="slideContents">
  7. <section id="slide01">
  8. <div class="contents">
  9. <h1>奥行きがある感じ</h1>
  10. <p>スライドする距離を変えれば、やんわりパララックス。</p>
  11. </div>
  12. <img src="../img/slide_01.png">
  13. </section>
  14. <section id="slide02">
  15. <div class="contents">
  16. <h1>奥行きがある感じ</h1>
  17. <p>スライドする距離を変えれば、やんわりパララックス。</p>
  18. </div>
  19. <img src="../img/slide_02.png">
  20. </section>
  21. <section id="slide03">
  22. <div class="contents">
  23. <h1>奥行きがある感じ</h1>
  24. <p>スライドする距離を変えれば、やんわりパララックス。</p>
  25. </div>
  26. <img src="../img/slide_03.png">
  27. </section>
  28. </div>
  29. <p class="arrow prev">
  30. <i class="ico"></i>
  31. <label for="switch1"></label>
  32. <label for="switch2"></label>
  33. <label for="switch3"></label>
  34. </p>
  35. <p class="arrow next">
  36. <i class="ico"></i>
  37. <label for="switch1"></label>
  38. <label for="switch2"></label>
  39. <label for="switch3"></label>
  40. </p>
  41. </div>
  42. </div>
  1. /* 略 */
  2. /* :::::: action mechanism :::::: */
  3. .slideContents section,
  4. .slideContents section h1,
  5. .slideContents section p {
  6. -webkit-transition: opacity 1s, -webkit-transform 1s;
  7. transition: opacity 1s, transform 1s;
  8. }
  9. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  10. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  11. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  12. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  13. #switch3:checked ~ #slideshow .slideContents #slide03 h1,
  14. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  15. opacity: 1;
  16. }
  17. /* 奥行きがある感じ */
  18. .slideContents section,
  19. .slideContents section h1,
  20. .slideContents section p {
  21. transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
  22. }
  23. #switch1:checked ~ #slideshow .slideContents #slide01,
  24. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  25. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  26. #switch2:checked ~ #slideshow .slideContents #slide02,
  27. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  28. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  29. #switch3:checked ~ #slideshow .slideContents #slide03,
  30. #switch3:checked ~ #slideshow .slideContents #slide03 h1,
  31. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  32. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  33. }
  34. .slideContents section h1 {
  35. -webkit-transform: translateX(400px);
  36. transform: translateX(400px);
  37. }
  38. .slideContents section p {
  39. -webkit-transform: translateX(200px);
  40. transform: translateX(200px);
  41. }
  42. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  43. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  44. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  45. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  46. #switch3:checked ~ #slideshow .slideContents #slide03 h1,
  47. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  48. -webkit-transform: translateX(0);
  49. transform: translateX(0);
  50. }
  51. #switch2:checked ~ #slideshow .slideContents #slide01 h1,
  52. #switch3:checked ~ #slideshow .slideContents #slide02 h1,
  53. #switch1:checked ~ #slideshow .slideContents #slide03 h1 {
  54. -webkit-transform: translateX(-400px);
  55. transform: translateX(-400px);
  56. }
  57. #switch2:checked ~ #slideshow .slideContents #slide01 p,
  58. #switch3:checked ~ #slideshow .slideContents #slide02 p,
  59. #switch1:checked ~ #slideshow .slideContents #slide03 p {
  60. -webkit-transform: translateX(-200px);
  61. transform: translateX(-200px);
  62. }

奥行きがある感じ

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

奥行きがある感じ

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

奥行きがある感じ

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