图片文字制作视差效果
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)
两个视频的内容相同,第二个为转载
效果图
代码区
html
<section>
<p>
<!-- 请自行添加文章 -->
</p>
<div id='bg'></div>
</section>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
* {
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
font-family: 'Poppins', sans-serif; /* 字体样式 */
}
section {
background-color: #000; /* 背景颜色 */
height: 100vh; /* 高度 */
overflow: hidden; /* 超出隐藏 */
}
section p {
position: fixed; /* 定位:相对于浏览器 */
top: 0;
left: 0;
font-size: 24px; /* 字体大小 */
letter-spacing: -1px; /* 字符间距 */
line-height: 0.8em; /* 行高 */
background: url(../img/bg.jpg);
-webkit-background-clip: text; /* 背景裁剪:文字 */
text-align: justify; /* 两端对齐 */
color: transparent; /* 透明文字 */
filter: contrast(2); /* 对比度 */
user-select: none; /* 无法选中 */
}
#bg {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url(../img/bg.jpg);
background-attachment: fixed; /* 背景不滚动 */
}
JS
var bg = document.getElementById('bg');
window.onmousemove = function(e) {
// 修改宽度,根据鼠标
bg.style.width = e.clientX + 'px';
}
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)