JS滚轴-文字根据滚动渐入渐出的效果

最新推荐文章于 2024-07-19 00:47:32 发布

Jackie_Mina

最新推荐文章于 2024-07-19 00:47:32 发布

阅读量509

点赞数

分类专栏： javascript 前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_36752088/article/details/128905935

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用JavaScript和CSS实现一个滚轴依赖的背景渐变效果。当页面滚动时，文本通过背景渐变实现渐入效果，增加了视觉吸引力。主要涉及的技术包括`position:sticky`，CSS自定义属性以及滚动事件监听。

摘要由CSDN通过智能技术生成

JavaScript -滚轴

在这里插入图片描述

<div class="sticky">
  <h1>Less bezel, more screen.</h1>
</div>

:root{
  --percentage:0%
}
body{
  background-color: #000;
  margin: 0;
  height:300vh;/*3倍高度*/
}
.sticky{
  position:sticky;
  top:0;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
h1{
  font-family:Helvetica;
  margin: 0;
  padding: 0;
  font-size:48px;
  color:#fff;
  letter-spacing:-0.3px;
    
  background-image:linear-gradient(75deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 33.33%,rgba(255,255,255,0) 66.67%,rgba(255,255,255,0)100%);
 background-size:300% 100%;/*将背景的渐层颜色拉到3倍的宽度*/
 background-position-x:calc(100% - var(--percentage));
   /*
   0%=0%-33.33%的渐变色
   50%=33.33%-66.67%的渐变色
   100%=66.67%-100%的渐变色
   所以由100%动态改变为0%，就可以做到文字渐入的效果
   */
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;

}

//先取h1标签
const h1=document.querySelector("h1")
//监听滚轴，设置变量scrolled=滚动位置/(所有内容的高度-可视内容的高度)=>(0-1之间)
//document.documentElement.scrollTop获取滚动位置documentElement对应的是html标签
//document.documentElement.scrollHeight浏览器所有内容高度 如1605
//document.documentElement.clientHeight浏览器可视内容高度 如535
document.addEventListener("scroll",(e)=>{
  let scrolled=document.documentElement.scrollTop /(document.documentElement.scrollHeight - document.documentElement.clientHeight)

  //给h1添加样式属性--percentage =设置变量(scrolled*100)转换成%
  h1.style.setProperty("--percentage",`${scrolled*100}%`)
  
  console.log(scrolled)
})