StickyUI

10876 ワード
sticky テキストリンク 
<body>
    <div class="card-background">
      <div class="card-box">
        <img src="card1.png" alt="" />
      </div>
      <div class="card-box"><img src="card2.png" alt="" /></div>
      <div class="card-box"><img src="card3.png" alt="" /></div>
    </div>
  </body>
CSS
.card-background {
  height: 3000px;
  margin-top: 800px;
  margin-bottom: 1600px;
}

.card-box img {
  display: block;
  margin: auto;
  max-width: 80%;
}

.card-box {
  position: sticky;
  top: 200px;
  margin-top: 100px;
  /* transform: scale(1); */
  transition: all 0.2s;
}
  • をスクロールするために高さを長くします.
  • 2position:sticky効果でスクロールすると固定されます.
    この場合、位置座標のプロパティも同時に指定する必要があります.( top:200px )
    • JS
    $(window).scroll(function () {
      var 높이 = $(window).scrollTop()

      // console.log(높이)

      // 650~1150까지 스크롤바를 내리면, 첫째카드의 opacity를 1~0으로 서서히 변경해라
      // var y = a * 높이 + b
      // 높이가 650일때는 y가 1
      // 1 = a * 650 + b;
      // 0 = a * 1150 + b;

      // a = -1 / 500
      // b = 115 / 50

      var y1 = (-1 / 500) * 높이 + 115 / 50
      var y2 = (-0.1 / 500) * 높이 + 1.13
      // console.log(y2)
      $(".card-box").eq(0).css("opacity", y1)
      $(".card-box").eq(0).css("transform", `scale(${y2})`)
    })

    高さ(650～1150)の変化に伴い、opacityの属性が変化する必要があります.
    スクロールバーを650~1150まで下にスクロールし、1枚目のカードの透明度を徐々に1~0に変更します.var y = a * 높이 + b高さ650の場合、y(不透明)は1であり、
    高さ1150の場合、y(不透明)は01 = a * 650 + b; 0 = a * 1150 + b; a = -1 / 500 b = 115 / 50 var y1 = (-1 / 500) * 높이 + 115 / 50 $(".card-box").eq(0).css("opacity", y1)
    CK 031 | Week3 - Day5
    Python+requestsのurlencode符号化と復号化