7

我一直在做一个网站，我决定给它添加一个暗模式功能，我使用了 darkmode.js 库来实现它，该库的工作原理是mix-blend-mode: difference. 但是，当我使用 IntersectionObserver 添加滚动动画并启用暗模式时，应该出现的 div 会变成白色，然后立即变成黑色。是的，它可能看起来很复杂，所以

这是我的代码

const targets = document.querySelectorAll('.animate');
const options = {
  threshold: 0.7
}

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    console.log(entries)
    entries.forEach(entry => {
      console.log('');

      if (entry.isIntersecting) {
        const img = entry.target;
        img.classList.add('fade');
        observer.disconnect();
      }
    }, options)
  }, options);

  io.observe(target)
};

targets.forEach(lazyLoad);
.quotes-layout {
	margin-top: 50px;
	display: flex;
	justify-content: center;
	margin-left: 10%;
	margin-right: 10%;
}

.quote {
	flex: 1;
	margin-right: 20px;
	text-align: left;
	background: #eee;
	padding: 20px 20px;
}

.quote svg {
	fill: rgba(0,0,0,0.5);
}

.quote .content::first-letter {
	font-size: 23px;
}

.quote .content::first-line {
	line-height: 16px;
}
<div class="quotes-layout">
    <div class="quote">
        <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
        <div class="content">
            <p>An eye for an eye ends up making the whole world blind.</p>
        </div>
    </div>
    <div class="quote">
        <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
        <div class="content">
            <p>The future depends on what you do today.</p>
        </div>
    </div>
    <div class="quote">
        <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
        <div class="content">
            <p>There is more to life than increasing its speed.</p>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.3/lib/darkmode-js.min.js"></script>

4

0 回答 0