用交叉观察者更改内容

以下示例是关于Javascript中包含用交叉观察者更改内容用法的示例代码,想了解用交叉观察者更改内容的具体用法?用交叉观察者更改内容怎么用?用交叉观察者更改内容使用的例子?那么可以参考以下相关示例代码来学习它的具体使用方法。

文件名:main.js[英]:Change content with Intersection Observer源码类型:Javascript
  // Optimized resize function
  (function() {
    var throttle = function(type, name, obj) {
      obj = obj || window;
      var running = false;
      var func = function() {
        if (running) {
          return;
        }
        running = true;
        requestAnimationFrame(function() {
          obj.dispatchEvent(new CustomEvent(name));
          running = false;
        });
      };
      obj.addEventListener(type, func);
    };

    /* init - you can init any event */
    throttle("resize", "optimizedResize");
  })();

  const stickyEl = document.querySelector(".room-info_sticky");
  const stickyContent = stickyEl.querySelector(".room-info__inner");
  const roomsContainer = document.querySelector(".rooms__inner");
  const rooms = [...document.querySelectorAll(".room")];

  // Update sticky position on window resize
  const setStickyPosition = function() {
    let stickyStart = Math.trunc((window.innerHeight - stickyEl.offsetHeight) / 2);
    stickyEl.style.top = `${stickyStart}px`;
  };
  setStickyPosition();
  window.addEventListener("optimizedResize", function() {
    if (window.matchMedia("(min-width: 768px)").matches) {
      setStickyPosition();
    }
  });

  // Update sticky content
  const updateSticky = function(element) {
    stickyEl.querySelector(".room__heading").textContent = element.querySelector(".room__heading").textContent;
    stickyEl.querySelector(".room__text").textContent = element.querySelector(".room__text").textContent;
    stickyEl.querySelector(".room__btn").href = element.querySelector(".room__btn").href;
  };
  updateSticky(rooms[0]);
  // Room sections observer
  const obsOptions = {
    root: null,
    //rootMargin: "50px 0px",
    threshold: 0.5,
  };
  /* Create the observer */
  const roomObserver = new IntersectionObserver((entries) => {
    let prevOrder = stickyEl.dataset.current || "0";
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        stickyEl.dataset.current = entry.target.dataset.order;
        if (prevOrder !== stickyEl.dataset.current) {
          stickyContent.style.opacity = 0;
          setTimeout(() => {
            updateSticky(entry.target);
            stickyContent.style.opacity = 1;
          }, 300);
        }
      }
    });
  }, obsOptions);
  rooms.forEach((room, i) => {
    roomObserver.observe(room);
    room.dataset.order = i;
  });
文件名:style.css[英]:Change content with Intersection Observer源码类型:Javascript
/* Box sizing rules */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}

@font-face {
  font-family: "Roos";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roos"), url("./fonts/RoosStRegisDisplay-Regular.woff2") format("woff2"), url("fonts/RoosStRegisDisplay-Regular.woff") format("woff");
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: "Suisse";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local("Suisse"), url("./fonts/SuisseBPIntl-Regular.woff2") format("woff2"), url("fonts/SuisseBPIntl-Regular.woff") format("woff");
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: "Suisse";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Suisse"), url("./fonts/SuisseBPIntl-Medium.woff2") format("woff2"), url("fonts/SuisseBPIntl-Medium.woff") format("woff");
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: "Suisse";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Suisse"), url("./fonts/SuisseBPIntl-Light.woff2") format("woff2"), url("fonts/SuisseBPIntl-Light.woff") format("woff");
  unicode-range: U+000-5FF;
}

body {
  background-color: #efe8e3;
}
.placeholder {
  height: 100vh;
  background-color: orange;
}
.rooms {
  margin: 17.361vw 11.111vw;
  position: relative;
}
.rooms__sticky {
  left: 0;
  top: 5.556vw;

  height: 100%;
  z-index: 5;
  position: absolute;
  will-change: transform;
}
.room {
  width: 61.111vw;
  position: relative;
  margin: 0 0 17.361vw 16.667vw;
}
.room-info {
  background: #fff;
  color: #3a3636;
  font-family: "Suisse";
  position: relative;
  z-index: 1;
}
.room-info__inner {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.room-info_sticky {
  padding: 5.556vw;
  position: sticky;
  top: 0;
  width: 33.333vw;
  min-height: 42.708vw;
}
.room__content {
  display: none;
}
.room__heading {
  font-family: "Roos";
  font-size: 3.472vw;
  font-weight: normal;
  letter-spacing: -0.061vw;
}
.room__heading::after {
  content: "";
  display: block;
  height: 1px;
  width: 8.33vw;
  margin: 2.8vw 0;
  background: #ff4338;
}
.room__text {
  font-weight: 300;
  font-size: 1.042vw;
  line-height: 1.875vw;
  letter-spacing: 0.05vw;
}
.room__btn {
  height: 2.778vw;
  line-height: 2.778vw;
  color: #ff4338;
  display: block;
  cursor: pointer;
  position: relative;
  padding-left: 3.5vw;
  font-weight: 500;
  font-size: 0.764vw;
  letter-spacing: 0.208vw;
  text-transform: uppercase;
  text-decoration: none;
  margin: 2.8vw 0 0;
}
.room__btn svg {
  top: 0.95vw;
  left: -0.95vw;
  width: 2.153vw;
  height: 0.556vw;
  fill: #ff4338;
  z-index: 1;
  position: absolute;
  transition: all 0.25s ease-out;
}
.room__btn svg rect {
  will-change: transform;
  transform-origin: right center;
  transition: transform 0.25s ease-out;
}
.room__btn:after,
.room__btn:before,
.room__btn span {
  display: block;
  will-change: transform;
  transition: transform 0.25s ease-out;
}
.room__btn span {
  display: block;
  will-change: transform;
  transition: transform 0.25s ease-out;
}
.room__btn:after,
.room__btn:before {
  left: 0;
  top: 0.27vw;
  width: 1.944vw;
  height: 1.944vw;
  content: "";
  position: absolute;
  transform: rotate(45deg);
}
.room__btn::before {
  border: 1px solid #ff4338;
}
.room__btn::after {
  background: #ff4338;
  transform: scale(0.01) rotate(45deg);
}
.room__btn:hover:after,
.room__btn:hover:before {
  transform: rotate(-45deg) scale(1.2);
}
.room__btn:hover svg {
  fill: #fff;
  transform: translateX(0.3vw);
}
.room__btn:hover span {
  transform: translateX(0.5vw);
}
.room__btn:hover svg rect {
  transform: scaleX(0.5);
}
.room__figure {
}
.room__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media screen and (max-width: 980px) {
  .room__heading {
    font-size: 2.1em;
  }
  .room__text {
    line-height: 1.3;
    font-size: 0.8em;
  }
  .room__btn {
    font-size: 0.65em;
  }
}
@media screen and (max-width: 767px) {
  .rooms {
    margin: 17vw 8vw;
  }
  .rooms__sticky {
    display: none;
  }
  .room {
    margin: 0;
    width: auto;
  }
  .room__content {
    position: relative;
    display: block;
    min-height: auto;
    height: auto;
    width: 66.667vw;
    padding: 8vw;
    margin: -26.667vw 8vw 13.333vw;
    z-index: 1;
    overflow: hidden;
  }
  .room__heading {
    font-size: 7.467vw;
  }
  .room__heading::after {
    width: 16.533vw;
    margin: 6.667vw 0;
  }
  .room__text {
    font-size: 4vw;
    line-height: 6.4vw;
  }
  .room__btn {
    margin-top: 4vw;
    height: 8vw;
    line-height: 8vw;
    font-size: 2.933vw;
    padding-left: 9vw;
  }
  .room__btn svg {
    top: 2.2vw;
    left: -3vw;
    width: 6.667vw;
    height: 2.667vw;
  }
  .room__btn:before {
    top: 1vw;
    width: 5.333vw;
    height: 5.333vw;
  }
  .room__btn:after {
    top: 1vw;
    width: 5.333vw;
    height: 5.333vw;
  }
}
文件名:index.html[英]:Change content with Intersection Observer源码类型:Javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sticky section</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <!-- Custom section -->
      <div class="placeholder"></div>
      <div class="rooms">
        <div class="rooms__sticky">
          <div class="room-info room-info_sticky">
            <div class="room-info__inner">
              <h2 class="room__heading"></h2>
              <p class="room__text"></p>
              <a href="#" class="room__btn" target="_blank" style="opacity: 1">
                <svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
                  <rect y="3" width="30" height="1"></rect>
                  <polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
                </svg>
                <span>Read more</span>
              </a>
            </div>
          </div>
        </div>
        <div class="rooms__inner">
          <div class="room">
            <figure class="room__figure">
              <img src="https://cultivatingthevanguard.com/wp-content/uploads/2021/04/Table-for-2-A-1.jpg" class="room__img" alt="Room image" />
            </figure>
            <div class="room__content room-info">
              <h2 class="room__heading">Taste of Luxury</h2>
              <p class="room__text">Stay exquisite at Venice's best address. Each day begins with the pleasure of a full breakfast, and enjoy a 90 Euro dining credit per person daily.</p>
              <a href="#" class="room__btn" target="_blank" style="opacity: 1">
                <svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
                  <rect y="3" width="30" height="1"></rect>
                  <polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
                </svg>
                <span>Read more</span>
              </a>
            </div>
          </div>
          <div class="room">
            <figure class="room__figure">
              <img src="https://cultivatingthevanguard.com/wp-content/uploads/2021/04/Table-for-2-A-1.jpg" class="room__img" alt="Room image" />
            </figure>
            <div class="room__content room-info">
              <h2 class="room__heading">Suite Indulgence</h2>
              <p class="room__text">
                Gift yourself time and an extraordinary suite lifestyle, discreetly attended by a St. Regis Butler. Includes arrival transfer, private dining, champagne and Venice’s superb views.
              </p>
              <a href="#" class="room__btn" target="_blank" style="opacity: 1">
                <svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
                  <rect y="3" width="30" height="1"></rect>
                  <polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
                </svg>
                <span>Read more</span>
              </a>
            </div>
          </div>
          <div class="room">
            <figure class="room__figure">
              <img src="https://cultivatingthevanguard.com/wp-content/uploads/2021/04/Table-for-2-A-1.jpg" class="room__img" alt="Room image" />
            </figure>
            <div class="room__content room-info">
              <h2 class="room__heading">Romance in Venice</h2>
              <p class="room__text">Escape to The St. Regis Venice for the perfect romantic retreat. Embrace the city’s captivating spirit while we anticipate every precious detail of your stay.</p>
              <a href="#" class="room__btn" target="_blank" style="opacity: 1">
                <svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
                  <rect y="3" width="30" height="1"></rect>
                  <polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
                </svg>
                <span>Read more</span>
              </a>
            </div>
          </div>
          <div class="room">
            <figure class="room__figure">
              <img src="https://cultivatingthevanguard.com/wp-content/uploads/2021/04/Table-for-2-A-1.jpg" class="room__img" alt="Room image" />
            </figure>
            <div class="room__content room-info">
              <h2 class="room__heading">A Family Affair</h2>
              <p class="room__text">Engage in extraordinary family moments discovering the wonders of the city and staying at The St. Regis Venice with 50% off a second room for children.</p>
              <a href="#" class="room__btn" target="_blank" style="opacity: 1">
                <svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
                  <rect y="3" width="30" height="1"></rect>
                  <polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
                </svg>
                <span>Read more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="placeholder"></div>

      <!-- // Custom section -->
    </main>
    <script src="main.js"></script>
  </body>
</html>

本文地址:https://www.itbaoku.cn/snippets/789800.html