1. <input type="radio" id="switch1" name="slideshow" checked>
  2. <input type="radio" id="switch2" name="slideshow">
  3. <input type="radio" id="switch3" name="slideshow">
  4. <div id="slideshow">
  5. <div class="slideContents">
  6. <section id="slide01">
  7. <div class="contents">
  8. <h1>遅れて出てくる</h1>
  9. <p>スライドするタイミングをずらして、さりげなくアクセント。</p>
  10. </div>
  11. <img src="../img/slide_01.png">
  12. </section>
  13. <section id="slide02">
  14. <div class="contents">
  15. <h1>遅れて出てくる</h1>
  16. <p>スライドするタイミングをずらして、さりげなくアクセント。</p>
  17. </div>
  18. <img src="../img/slide_02.png">
  19. </section>
  20. <section id="slide03">
  21. <div class="contents">
  22. <h1>遅れて出てくる</h1>
  23. <p>スライドするタイミングをずらして、さりげなくアクセント。</p>
  24. </div>
  25. <img src="../img/slide_03.png">
  26. </section>
  27. </div>
  28. <p class="arrow prev">
  29. <i class="ico"></i>
  30. <label for="switch1"></label>
  31. <label for="switch2"></label>
  32. <label for="switch3"></label>
  33. </p>
  34. <p class="arrow next">
  35. <i class="ico"></i>
  36. <label for="switch1"></label>
  37. <label for="switch2"></label>
  38. <label for="switch3"></label>
  39. </p>
  40. </div>
  41. </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 h1,
  19. .slideContents section p {
  20. transition-duration: 1.2s;
  21. transition-timing-function: cubic-bezier(.1,1.3,.3,1); /* easeOutBackを緩めた感じ */
  22. }
  23. .slideContents section h1 {
  24. transition-delay: .3s;
  25. }
  26. .slideContents section p {
  27. transition-delay: .6s;
  28. }
  29. .slideContents section h1,
  30. .slideContents section p {
  31. -webkit-transform: translateX(600px);
  32. transform: translateX(600px);
  33. }
  34. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  35. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  36. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  37. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  38. #switch3:checked ~ #slideshow .slideContents #slide03 h1,
  39. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  40. -webkit-transform: translateX(0);
  41. transform: translateX(0);
  42. }
  43. #switch3:checked ~ #slideshow .slideContents #slide02 h1,
  44. #switch3:checked ~ #slideshow .slideContents #slide02 p,
  45. #switch1:checked ~ #slideshow .slideContents #slide03 h1,
  46. #switch1:checked ~ #slideshow .slideContents #slide03 p,
  47. #switch2:checked ~ #slideshow .slideContents #slide01 h1,
  48. #switch2:checked ~ #slideshow .slideContents #slide01 p {
  49. -webkit-transform: translateX(-600px);
  50. transform: translateX(-600px);
  51. }

遅れて出てくる

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

遅れて出てくる

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

遅れて出てくる

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