Javascript 通过滚动事件更改字体大小后文本闪烁
我有一个JavaScript代码,它根据Javascript 通过滚动事件更改字体大小后文本闪烁,javascript,html,css,scroll,flicker,Javascript,Html,Css,Scroll,Flicker,我有一个JavaScript代码,它根据window.scrollY更改字体大小 var title=document.querySelector(“.title”) var titleFontSizePX=getComputedStyle(title).fontSize var titleFontSizePXInt=parseFloat(titleFontSizePX) 变量titleFontSizeVWInt=titleFontSizePXInt*(100/window.innerWidt
window.scrollY
更改字体大小
var title=document.querySelector(“.title”)
var titleFontSizePX=getComputedStyle(title).fontSize
var titleFontSizePXInt=parseFloat(titleFontSizePX)
变量titleFontSizeVWInt=titleFontSizePXInt*(100/window.innerWidth)
var titleFontSizeVW=titleFontSizeVWInt+‘vw’
title.style.fontsizev=titleFontSizeVW
函数updateFontSize(事件){
console.log('fire!',event.type,window.scrollY)
var titleSizeMax=titleFontSizeVWInt-0.02*window.scrollY
变量titleSizeMin=titleFontSizeVWInt*2/5
title.style.fontSize=Math.max(titleSizeMin,titleSizeMax)+“vw”
}
var events=['scroll','touchmove']
events.forEach(event=>document.addEventListener(event,updateFontSize))
正文{
背景:#111;
填充:40vh 10vw 10vw;
字体系列:“魔方”;
颜色:白色;
}
h1{
字体大小:12vw;
线高:1米;
字号:700;
}
p{
字体大小:1.4rem;
线高:1.6em;
字体大小:400;
边缘顶部:2米;
最大宽度:50%;
}
这是一个大的
英雄副本,请对
这个网站说几句
话。
一天早上,当格雷戈·萨姆萨从噩梦中醒来时,他发现自己在床上变成了一个可怕的害虫。他躺在盔甲般的背上,如果他稍微抬起头,就能看到他棕色的腹部,略微呈圆顶状,被拱门隔开
分成僵硬的部分。一天早上,当格雷戈·萨姆萨从噩梦中醒来时,他发现自己在床上变成了一个可怕的害虫
床上用品几乎无法盖住它,似乎随时都可能滑落。他的许多腿,与他其余的人相比,瘦弱得可怜,看着他无助地挥舞着。“我怎么了?”他想。这不是梦。伊斯
房间,一个真正的人的房间,虽然有点太小,平静地躺在它熟悉的四堵墙之间
桌子上摊开了一批纺织品样品——萨姆萨是一名旅行推销员——上面挂着一张他最近从一本插图杂志上剪下来的照片,照片放在一个漂亮的镀金框架内。它显示一位女士配备了
一顶毛皮帽子和毛皮蟒蛇,直立着坐着,向观众举起一个覆盖着整个下手臂的沉重的毛皮套。
解决方案是将最后一个滚动位置设置为与实际滚动位置不同。因此JavaScript是:
var title = document.querySelector('.title')
var titleFontSizePX = getComputedStyle(title).fontSize
var titleFontSizePXInt = parseInt(titleFontSizePX, 10)
var titleFontSizeVWInt = titleFontSizePXInt * (100 / window.innerWidth)
var titleFontSizeVW = titleFontSizeVWInt + 'vw'
title.style.fontSize = titleFontSizeVW
var lastScroll = 0
function updateFontSize(event) {
if (lastScroll != window.scrollY) {
var titleSizeMax = titleFontSizeVWInt - 0.02 * window.scrollY
var titleSizeMin = titleFontSizeVWInt * 2 / 5
title.style.fontSize = Math.max(titleSizeMin, titleSizeMax) + 'vw'
}
lastScroll = window.scrollY
}
var events = ['scroll', 'touchmove']
events.forEach(event => document.addEventListener(event, updateFontSize))
我也尝试了parseInt
而不是parseFloat
,但没有成功,只会使复制更加困难Math.floor()
和Math.ceil()
也不起作用。