页中添加滚动字幕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动字体的设置</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1") // 1.找到画布对象
var ctx = canvas1.getContext("2d") // 2.上下文对象(画笔)
ctx.shadowBlur = 10; // 阴影距离
ctx.shadowColor = "red" // 阴影颜色
ctx.shadowOffsetX = 30 // 阴影偏移
ctx.shadowOffsetY = 30 // 阴影偏移
ctx.font = "150px 楷体"
ctx.fillText("你好!", 20,150)
ctx.fillText("你好!", 20,350)
ctx.strokeText('你好!',23, 153)
ctx.strokeText('你好',23, 553)
canvas绘制文字
var x = 600
setInterval(function(){
if(x > -350){
//清空画布
ctx.clearRect(0,0,600,600)
ctx.strokeText('你好!',x, 153)
ctx.fillText("你好!", x,350)
ctx.font = "50px 宋体"
ctx.strokeText('每天学习一点点',x, 553)
x -= 3
}else{x=590}
}, 16)
</script>
</body>
</html>
看个锚点定位的例子
发现页面唰的一些就到顶部了,快到我们懵逼了。。。
开始解决
CSS属性 scroll-behavior 为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。在根元素中指定这个属性时,它反而适用于视窗。
scroll-behavior:smooth 写在滚动容器元素上,可以让容器的滚动变得平滑。
在网页默认滚动是在<html>标签上,移动端大多数在<body>标签上。
我们可以这样加:
html, body { scroll-behavior:smooth; }
加了以后的效果如下:
这是录制的GIF图,效果没那么好。 大家可以动手试一下,滑动体验非常不错。
兼容性不够好
当然我们可以通过js来做个类似
DOM元素的scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内,通过触发滚动容器的定位实现。
DOM元素的scrollIntoView()方法 是原生JS 兼容到IE6,兼容性非常好。
参数如下
{ behavior: "auto" | "instant" | "smooth", // 默认 auto block: "start" | "center" | "end" | "nearest", // 默认 center inline: "start" | "center" | "end" | "nearest", // 默认 nearest }
解释一下这三个参数:
用法:
html:
<div class="wrap"> <div onClick="onScrollIntoView()">点击让黑色块到顶部</div> <ul class="body"> <li>1</li> <li>2</li> <li id="box">我是黑色</li> <li>3</li> <li>4</li> </ul> </div>
js:
function onScrollIntoView () { var element = document.getElementById("box"); element.scrollIntoView({behavior: "smooth"}); }
效果:
这回大家再也不用害怕做锚点定位啦。
最后我们在说一个关于页面滚动问题吧,那就是 返回顶部 功能实现
我们常用定时器 setInterval 来不断减去高度。
如:当前距离顶部 1000, 我们每10毫秒减50,
var timer = setInterval(function() { // 定时器 每10毫秒执行一次 // 顶部距离 document.body.scrollTop = 1000 var speed = 50 // 返回顶部速度 document.body.scrollTop = document.body.scrollTop - speed if (document.body.scrollTop === 0) { // 返回到达顶部后, 销毁定时器 clearInterval(timer) } }, 10)
效果:
大家会发现,页面返回是滚动起来很干。 没10毫秒减50. 很平均,在交互上效果并不好。
借鉴上面 scroll-behavior:smooth 的交互效果。 缓动的返回顶部。
改一下计算方式:1000/2 = 500, 500/2 =250, 250/2 = ...... 这样滑动起来是不是就平滑了呢?
换算成公式:开始位置 = 开始位置 + (结束位置 - 开始位置) / 速度
document.body.scrollTop = 1000 + (0 - 1000) / 2
公式太烦了还是上代码吧:
var onTop = function (a, b, c, d) { if (a == b || typeof a != 'number') { return } b = b || 0 c = c || 2 var speed = function () { a = a + (b - b) / c if (a < 1) { d(b, true) return } d(a, false) requestAnimationFrame(speed) } speed() }
调用:
var target = document.body.scrollTop ? document.body : document.documentElement onTop(target.scrollTop, 0, 4, function (value) { target.scrollTop = value })
效果:
Ps: gif录制效果不好,大家可以动手写一下DEMO
在Firefox中单独设置滚动条样式,你可以使用@-moz-document规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。
下面是一个例子,演示如何在Firefox中隐藏滚动条:
@-moz-document url-prefix() {
/* 在这里添加只对Firefox生效的样式 */
body {
scrollbar-width: none;
}
}
在上面的例子中,@-moz-document url-prefix()表示只有在URL以空字符串(即所有URL)为前缀的情况下,才会应用其中的样式。在body元素中,scrollbar-width: none;将隐藏滚动条。
请注意,这样的规则只在Firefox中生效,而在其他浏览器中会被忽略。确保在使用这样的规则时进行测试,以确保所需的效果在目标浏览器中按预期工作。
在CSS中,*(星号)和 body 分别选择不同的元素或元素集合。
* {
margin: 0;
padding: 0;
}
上述代码会将页面中所有元素的内外边距设置为零。
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
上述代码会将文档主体部分的字体设置为 Arial,并将背景颜色设置为 #f0f0f0。
所以,* 是一个通用的选择器,匹配所有元素,而 body 是特定于文档主体的选择器,用于选择文档主体元素并应用样式。在某些情况下,你可能希望使用 body 选择器,以更有针对性地影响文档的主要内容区域。
在最新的 Firefox 版本中,-moz-scrollbar-thumb 伪类选择器已被弃用,取而代之的是使用更通用的 CSS Scrollbar 模块规范。为了在 Firefox 中优化滚动条并使其变细,你可以使用新的规范中的属性。
以下是一个简单的示例,可以使 Firefox 中的滚动条变细:
/* Firefox 滚动条样式 */
* {
scrollbar-width: thin;
scrollbar-color: #999999 #f0f0f0;
}
/* Webkit 滚动条样式(Chrome, Safari等)*/
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-thumb {
background-color: #999999;
}
*::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
上述样式包含两部分:
请注意,滚动条样式在不同浏览器中可能会有所不同,因此上述样式在 Firefox 中有效,而 Webkit 样式在 Chrome 和 Safari 中有效。在实际使用中,你可能需要根据需要进行调整和测试,以确保在不同浏览器中都能达到预期的效果。
*请认真填写需求信息,我们会在24小时内与您取得联系。