更新第52个小实例

2021-11-24 18:46:23 +08:00 · 2021-11-24 18:46:23 +08:00 · 461bc8f0e2
parent 0337cbbe36
commit 461bc8f0e2
4 changed files with 101 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -55,4 +55,5 @@
 48. HTML5+CSS3小实例之3D立方体旋转相册
 49. HTML5+CSS3小实例之3D分层图像悬停效果
 50. HTML5+CSS3小实例之不偷看密码的超萌猫头鹰登录界面
-51. HTML5+CSS3小实例之动感的金属质感闪光文字
+51. HTML5+CSS3小实例之动感的金属质感闪光文字
+52. HTML5+CSS3小实例之高级感满满的滚轮视差响应效果
--- a/css/52.css
+++ b/css/52.css
@ -0,0 +1,63 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 200%窗口高度（两屏窗口的高度） */
+    height: 200vh;
+}
+.bg{
+    /* 背景图片 */
+    background-image: url("../images/mountain.jpg");
+    /* 对图片进行剪切，保留原始比例 */
+    background-size: cover;
+    /* 设置背景图片的定位 */
+    background-position: 50% 50%;
+    height: 200vh;
+    font-size: 650px;
+    font-weight: 900;
+    text-align: center;
+    /* 相对定位 */
+    position: relative;
+    /* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉 */
+    -webkit-background-clip: text;
+    /* 将文字透明镂空 */
+    -webkit-text-fill-color: transparent;
+    overflow: hidden;
+    padding-top: 100px;
+}
+.bg::before{
+    content: "";
+    /* 背景图片继承父元素 */
+    background-image: inherit;
+    background-size: cover;
+    background-position: 50% 50%;
+    /* 绝对定位 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -99;
+}
+h2{
+    position: absolute;
+    top: 20px;
+    width: 100%;
+    text-align: center;
+    letter-spacing: 8px;
+    color: #fff;
+}
+h1{
+    position: absolute;
+    top: 145vh;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60%;
+    color: #fff;
+    letter-spacing: 10px;
+    padding: 100px 0;
+    text-align: center;
+    background-color: rgba(0,0,0,0.5);
+}
--- a/html/52.html
+++ b/html/52.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>高级感满满的滚轮视差相应效果</title>
+    <link rel="stylesheet" href="../css/52.css">
+</head>
+
+<body>
+    <h2>↓滚轮滚一下呗↓</h2>
+    <div class="bg">
+        <span>Hello</span>
+    </div>
+    <h1>欢迎来到<br>艾恩小灰灰的前端世界</h1>
+    <script type="text/javascript">
+        // 获取背景对象
+        const bg=document.querySelector(".bg");
+        // 监听滚轮事件
+        document.addEventListener("scroll",function(){
+            // 获取当前滚轮的位置
+            const scrollY=window.scrollY;
+            if(scrollY!=0){
+                // 滚轮位置不等于0时,修改背景的定位加上滚轮的值
+                bg.style.backgroundPosition="calc(50% + "+scrollY+"px) calc(50% + "+scrollY+"px)";
+            }else{
+                // 否则清空背景的定位
+                bg.style.backgroundPosition="";
+            }
+        })
+    </script>
+</body>
+
+</html>
--- a/images/mountain.jpg
+++ b/images/mountain.jpg