Posted on

用clip-path实现slider从左向右轮播效果

<style>
.post-item__eyecatch {
        width: 100%;
        padding-top: 60%;
        position: relative;
        overflow: hidden;
      }
.post-item img {
        display: block;
        position: absolute;
        width: 100%;
        top: 0;
        height: 100%;
        object-fit: cover;
        object-position: center;
        min-width: 100%;
        min-height: 100%;
        clip-path: inset(0 100% 0 0);
        z-index: 1;
        transition: clip-path 1.2s ease 2s;
      }
      .post-item img.current {
        z-index: 5;
        clip-path: inset(0 0 0 0);
        transition: clip-path 2s cubic-bezier(0.67, 0.16, 0.26, 0.95) 0s;
      }
</style>
<div class="post-item__eyecatch">
          <img src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M.jpg"
            alt=""
          />
          <img
            src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M2.jpg"
            alt=""
          />
          <img
            src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M3.jpg"
            alt=""
          />
        </div>
<script>
      class eyeCatchClass {
        constructor(element, interval = 3000) {
          this.element = element;
          this.images = this.element.querySelectorAll("img");
          this.currentIndex = 0;
          this.interval = interval;
          this.timer = null;
        }
        updateImages() {
          this.images.forEach((img, index) => {
            if (index === this.currentIndex) {
              img.classList.add("current");
            } else {
              img.classList.remove("current");
            }
          });
          this.element.setAttribute("data-current-slide",this.currentIndex + 1);
          this.currentIndex = (this.currentIndex + 1) % this.images.length;
        }
        startSlider() {
          this.updateImages();
          this.timer = setInterval(() => this.updateImages(), this.interval);
        }
      }
      const eyeCatech = () => {
        document.querySelectorAll(".post-item__eyecatch").forEach((element) => {
          const eyeCatechElement = new eyeCatchClass(element);
          eyeCatechElement.startSlider();
        });
      };
      eyeCatech();</script>
Posted on

Js判断页面滚动方向

const detectScrollDirection = () => {
  let lastScrollTop = 0;
  window.addEventListener("scroll", () => {
    const header = document.querySelector(".site_nav");
    const currentScrollTop =
      document.body.scrollTop || document.documentElement.scrollTop;
    if (currentScrollTop < lastScrollTop) { //<向下滚动，>向上滚动
      header.classList.remove("scroll");
    } else {
      header.classList.add("scroll");
    }
    lastScrollTop = currentScrollTop;
  });
};
detectScrollDirection();
Posted on

将文本拆成行，文本标题拆分多个字符的方法

////.split-lines文本拆成行
      const splitLines = (container) => {
        const spans = container.children;
        let top = 0;
        let tmp = "";

        container.innerHTML = container.textContent.replace(
          /\S+/g,
          "<n>$&</n>"
        );
        for (let i = 0; i < spans.length; i++) {
          const rect = spans[i].getBoundingClientRect().top;
          if (top < rect) {
            tmp +=
              "</div></div><div class='overflow-hidden'><div class='text_inner'>";
          }
          top = rect;
          tmp += spans[i].textContent + " ";
        }

        container.innerHTML = tmp + "</div></div>";
      };
      document.querySelectorAll(".split-lines").forEach(element => {
        splitLines(element);
      });
/*title文本拆多个字符*/
const splitLetters = () => {
        document.querySelectorAll(".title").forEach((title) => {
          title.innerHTML = [...title.textContent].map((letter) =>`<span class="${letter.trim() === "" ? "empty" : ""}">${letter}</span>`).join("");
        });
      };
      splitLetters();
//滚动过程中给隐藏的文本添加动态效果
      const showParaInviewport = () => {
        const observerCallbackFun = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const paraElement = entry.target;
              paraElement.classList.add("active");
              observer.unobserve(paraElement);
            }
          });
        };
        const observerOptions = {
          root: null, // Use the viewport as the root
          rootMargin: "0px 0px -20% 0px", // Trigger when 20% of the element is visible from the bottom
          threshold: 0.1, // Trigger as soon as any part of the element is visible
        };
        const observer = new IntersectionObserver(
          observerCallbackFun,
          observerOptions
        );
        document.querySelectorAll(".split-lines").forEach((paraElement) => {
          observer.observe(paraElement);
        });
      };
      showParaInviewport();

Posted on

用IntersectionObserver()的方法实现滚动加载

const showParaInviewport = () => {
        const observerCallbackFun = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const paraElement = entry.target;
              paraElement.classList.add("active");
              observer.unobserve(paraElement);
            }
          });
        };
        const observerOptions = {
          root: null, // Use the viewport as the root
          rootMargin: "0px 0px -20% 0px", // Trigger when 20% of the element is visible from the bottom
          threshold: 0.1, // Trigger as soon as any part of the element is visible
        };
        const observer = new IntersectionObserver(
          observerCallbackFun,
          observerOptions
        );
        document.querySelectorAll(".split-lines").forEach((paraElement) => {
          observer.observe(paraElement);
        });
      };
      showParaInviewport();