滚动选择主题

下载代码

html

css

分享到微信朋友圈

html

<div class="phone">
  <div class="greeting">Welcome back!</div>
  <div class="tagline">Here's your topics for today</div>
  <div class="topics">
    <div class="topic topic1">
      <div class="topic-bg"></div>
      <div class="topic-title">
        <span class="topic-color topic-color1"></span>Javascript
      </div>
      <div class="topic-count">5 articles</div>
      <div class="articles">
        <div class="article article1">The spread operator</div>
        <div class="article article1">Demystifying scopes</div>
        <div class="article article1">JS or TS?</div>
        <div class="article article1">ES2030, what's new</div>
        <div class="article article1">NaN === NaN // false</div>
      </div>
    </div>
    <div class="topic topic2">
      <div class="topic-bg"></div>
      <div class="topic-title">
        <span class="topic-color topic-color2"></span>CSS
      </div>
      <div class="topic-count">4 articles</div>
      <div class="articles">
        <div class="article article2">The wonders of CSS</div>
        <div class="article article2">How to clamp</div>
        <div class="article article2">Centring objects</div>
        <div class="article article2">CSS arts</div>
      </div>
    </div>
  </div>
  <div class="topics">
    <div class="topic topic1">
      <div class="topic-bg"></div>
      <div class="topic-title">
        <span class="topic-color topic-color3"></span>Misc
      </div>
      <div class="topic-count">3 articles</div>
      <div class="articles">
        <div class="article article3">Imposter syndrome</div>
        <div class="article article3">Poster syndrome</div>
        <div class="article article3">Post office syndrome</div>
      </div>
    </div>
    <div class="topic topic2">
      <div class="topic-bg"></div>
      <div class="topic-title">
        <span class="topic-color topic-color4"></span>ReactJS
      </div>
      <div class="topic-count">6 articles</div>
      <div class="articles">
        <div class="article article4">React router in 5 min</div>
        <div class="article article4">Memoization in React</div>
        <div class="article article4">CSS-in-JS</div>
        <div class="article article4">5 brilliant hooks</div>
        <div class="article article4">JSX in depth</div>
        <div class="article article4">React Context vs Redux</div>
      </div>
    </div>
  </div>
  <div class="below-the-fold">
    <hr class="divider" />
    <div class="profile">Your profile</div>
    <div class="option">your subscription</div>
    <div class="option">settings</div>
    <div class="option">stats</div>
    <div class="footer">
      <div class="magazine">Tech stories??</div>
      <div class="copyright">1970-2021</div>
    </div>
  </div>
</div>

css

body {
  align-items: center;
  background-color: #303038;
  color: white;
  display: flex;
  font-family: sans-serif;
  justify-content: center;
  height: 100vh;
}
.phone {
  background-color: #181824;
  border-radius: 25px;
  box-shadow: 0 0.4px 0.8px rgba(0, 0, 0, 0.008),
    0 0.9px 1.9px rgba(0, 0, 0, 0.017), 0 1.6px 3.6px rgba(0, 0, 0, 0.031),
    0 2.9px 6.5px rgba(0, 0, 0, 0.058), 0 5.4px 12.8px rgba(0, 0, 0, 0.103),
    0 13px 36px rgba(0, 0, 0, 0.16);
  height: 520px;
  overflow: auto;
  padding: 32px;
  width: 260px;
}
.greeting {
  font-size: 48px;
  font-weight: 700;
  margin-top: 12px;
}
.tagline {
  margin-top: 16px;
  margin-bottom: 28px;
}
.topics {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  position: relative;
  width: 100%;
}
.topic {
  height: 160px;
  position: relative;
  width: 120px;
}
.topic-bg {
  background-color: #2d2d34;
  border-radius: 25px;
  height: 100%;
  position: absolute;
  transform-origin: 50% 0;
  width: 100%;
}
.topic-title {
  font-size: 14px;
  position: relative;
  margin: 20px 20px 0;
}
.topic-color {
  background-color: #f0f;
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  width: 12px;
}
.topic-color1 {
  background-color: #e4ca37;
}
.topic-color2 {
  background-color: #33ce79;
}
.topic-color3 {
  background-color: #ce3333;
}
.topic-count {
  color: #808189;
  font-size: 12px;
  margin: 8px 20px 0;
  position: relative;
}
.articles {
  margin: 15px 20px 0;
}
.article {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 8px;
  height: 18px;
  opacity: 0;
  position: relative;
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.article1:hover {
  text-decoration-color: #e4ca37;
}
.article2:hover {
  text-decoration-color: #33ce79;
}
.article3:hover {
  text-decoration-color: #ce3333;
}
.article4:hover {
  text-decoration-color: #f0f;
}
.below-the-fold {
  height: 268px;
  margin-top: 40px;
  width: 100%;
}
.below-the-fold.extra-margin0 {
  margin-top: 128px;
}
.below-the-fold.extra-margin1 {
  margin-top: 92px;
}
.below-the-fold.extra-margin2 {
  margin-top: 132px;
}
.below-the-fold.extra-margin3 {
  margin-top: 240px;
}
.divider {
  margin-bottom: 40px;
  margin-top: 48px;
}
.profile {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 12px;
}
.option {
  cursor: pointer;
  margin-bottom: 4px;
}
.option:hover {
  text-decoration: underline;
}
.magazine {
  margin-top: 92px;
  text-align: center;
}
.copyright {
  font-size: 14px;
  margin-top: 4px;
  text-align: center;
}

JavaScript

const btf = document.querySelector(".below-the-fold");
const phone = document.querySelector(".phone");
let active = 0;
let interactive = 0;
const topics = Array.from(document.querySelectorAll(".topic"));
const topicsBg = Array.from(document.querySelectorAll(".topic-bg"));
const articles = Array.from(document.querySelectorAll(".articles"));
const articleElements = articles.map((as) =>
  Array.from(as.querySelectorAll(".article"))
);
const interactiveEnable = (index) => {
  interactive = index;
};
topics.forEach((topic, index) => {
  topic.addEventListener("mousedown", () => interactiveEnable(index));
  topic.addEventListener("mouseover", () => interactiveEnable(index));
  topic.addEventListener("touchstart", () => interactiveEnable(index));
});
const activate = () => {
  if (interactive >= 0) {
    active = interactive;

btf.className = "below-the-fold";
    btf.classList.add(`extra-margin${active}`);
  }
};
phone.addEventListener("scroll", function (e) {
  let y = e.target.scrollTop;
  // console.dir(y);

// Activation
  if (y < 40) {
    activate();
  }
  if (y > 200) y = 200;

articles.forEach((article, index) => {
    if (index === active) {
      // articles[index].style.opacity = `${y / 200}`;
      articleElements[index].forEach((a, index) => {
        let offset = y - index * 25;
        if (offset < 0) offset = 0;
        a.style.opacity = `${offset / (200 - index * 25)}`;
      });
    } else {
      articleElements[index].forEach((a, index) => {
        a.style.opacity = 0;
      });
    }
  });

if (active === 0) {
    topics.forEach((topic, index) => {
      if (index === active) {
        topic.style.transform = `scale(${1 + y / 200}) translateX(${
          y / 5.6
        }px) translateY(${y / 3.18}px)`;
        topic.style.zIndex = 1;
      } else {
        topic.style.transform = `scale(${1 - y / 200})`;
        topic.style.zIndex = 0;
      }
    });
    topicsBg.forEach((topicBg, index) => {
      if (index === active) {
        topicBg.style.transform = `scaleY(${1 + (0.125 * y) / 200})`;
      }
    });
  }
  if (active === 1) {
    if (y > 200) y = 200;
    topics.forEach((topic, index) => {
      if (index === active) {
        topic.style.transform = `scale(${1 + y / 200}) translateX(${
          -y / 5.9
        }px) translateY(${y / 3.18}px)`;
        topic.style.zIndex = 1;
      } else {
        topic.style.transform = `scale(${1 - y / 200})`;
        topic.style.zIndex = 0;
      }
    });
    topicsBg.forEach((topicBg, index) => {
      if (index === active) {
        topicBg.style.transform = `scaleY(${1 + (0.0125 * y) / 200})`;
      }
    });
  }
  if (active === 2) {
    topics.forEach((topic, index) => {
      if (index === active) {
        topic.style.transform = `scale(${1 + y / 200}) translateX(${
          y / 5.6
        }px) translateY(${y / 18}px)`;
        topic.style.zIndex = 1;
      } else {
        topic.style.transform = `scale(${1 - y / 200})`;
        topic.style.zIndex = 0;
      }
    });
    topicsBg.forEach((topicBg, index) => {
      if (index === active) {
        topicBg.style.transform = `scaleY(${1 - (0.1 * y) / 200})`;
      }
    });
  }
  if (active === 3) {
    topics.forEach((topic, index) => {
      if (index === active) {
        topic.style.transform = `scale(${1 + y / 200}) translateX(${
          -y / 5.9
        }px) translateY(${y / 18}px)`;
        topic.style.zIndex = 1;
      } else {
        topic.style.transform = `scale(${1 - y / 200})`;
        topic.style.zIndex = 0;
      }
    });
    topicsBg.forEach((topicBg, index) => {
      if (index === active) {
        topicBg.style.transform = `scaleY(${1 + (0.2375 * y) / 200})`;
      }
    });
  }
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg