趣味互动系列-文字遮罩录入效果

时间：2023-04-02 12:46:44 HTML

分享本系列一些简单但有趣的交互效果~附上demo地址和github地址滚动，添加对应的加载类（如loaded）并使用动画实现文字和遮罩层的动画效果文字动画：opacity0->1;遮罩层动画：先width0->100%，然后width100%->0，left0->100%，从而实现进入和退出遮罩层的效果；html:

三明治和煎饼

花园

早上&明天&朋友

橙色&小鸟&绵羊&杯子&巴士

苹果&水果&汽车

蛋糕&图片&放大器;放大器;猫和邮票

飞机和书本和球拍和玻璃和床

苹果
香蕉和松果和绵羊

香蕉和松果

南瓜和芋头&胡萝卜

辣根和生菜

南瓜和芋头和胡萝卜

辣根和生菜

马铃薯和牛蒡

EGG&BAG&ROSE&CHAIR&BAT

FISH&笔记本&铅笔&DOG&桌子

手表&手套&牛奶&花

门&船&钢琴&

马铃薯和牛蒡

苹果
香蕉和松果

信
帽子和胶带和邮件和盒子

苹果
香蕉和松果

芜菁&秋葵&豌豆

香菇&牛排植物

css:body{-webkit-font-smoothing:抗锯齿;-moz-osx-font-smoothing：灰度；背景颜色：#000；}main{填充：10vw0；}ul{宽度：100%；最大宽度：70%；保证金：0自动；}li{保证金：10vw0；文本对齐：左；}p{显示：块；颜色：#fff；字体系列：'Lato'，无衬线字体；字体大小：2vw；字体粗细：900；line-height:1.2;}p+p{margin-top:10px;}li:first-child{margin-top:0;}li:last-child{margin-bottom:0;}li:nth-child(even){text-align:right;}a{color:#fff;}a:hover{text-decoration:none;}[data-reveal="content"]{display:inline-block;位置：相对；}[data-reveal="cover"]{位置：绝对；顶部：0；左：0；宽度：0；高度：100%；z-index:1;}[data-reveal="text"]{opacity:0;}@keyframesreveal-cover{0%{width:0;左：0；}44%{宽度：100%；左：0；}54%{宽度：100%；左：0；}100%{宽度：0；左：100%；}}@keyframesreveal-text{0%{不透明度：0；}44%{不透明泰：0；}54%{不透明度：1；}}[data-js="reveal"].loaded[data-reveal="cover"]{动画：reveal-cover1.5sease-in-out;}[data-js="reveal"].loaded[data-reveal="text"]{不透明度：1；动画：显示文本1.5秒缓入缓出；}javascript:constCOLOR_LIST=['#7f00ff','#ff00ff','#0000ff','#007fff','#00ffff'];let$targetList;constinit=()=>{$targetList=document.querySelectorAll('[data-js="reveal"]');设置（）;window.addEventListener('scroll',onScroll,false);window.dispatchEvent(newEvent('scroll'));}//随机获取数组项constgetArrayRandomValue=(array)=>array[Math.floor(Math.random()*array.length)];constsetup=()=>{for(const$targetof$targetList){constcontent=$target.innerHTML;$target.dataset中的constcolor='revealColor'？$target.dataset.revealColor:getArrayRandomValue(COLOR_LIST);$target.innerHTML=`

${content}`;}}constonScroll=()=>{constwindowH=window.innerHeight;常量scrollTop=document.documentElement.scrollTop||文档.body.scrollTop;constisMostScroll=document.body.clientHeight<=scrollTop+windowH;for(const$targetof$targetList){if($target.classList.contains('loaded'))继续；constrect=$target.getBoundingClientRect();consttop=rect.top+scrollTop;如果(isMostScroll||top<=scrollTop+(windowH*.8))$target.classList.add('loaded');}}document.addEventListener('DOMContentLoaded',init,false);