粘性滚动的拉窗帘特效

粘性滚动拉开窗帘的效果

设置css

 :root {
      --minh: 98vh;
      --color1: wheat;
      --color2: midnightblue;
    }

使用背景颜色

linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);

min-height 容器底部的额外高度

.curtain {
  /** create the "split" background **/
  background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);
}

    /** 添加额外的空间到底部(需要这个“粘性”效果)  **/
.curtain::after {
  content: "";
  display: block;
  min-height: var(--minh);
}

主要是靠

  .invert {
      /**让内容具有粘性 **/
      position: sticky;
      top: 20px;

      /** 将内容与对比效果混合 **/
      mix-blend-mode: difference;

      /** 设置内容 **/
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:30px;
      min-height: var(--minh);
    }

mix-blend-mode: difference 是一个内容和背景融合的效果

其他几个对应属性所产生的效果

突然想到两年前我好像写过一篇关于这个属性相关的文章

重要代码

background:conic-gradient(transparent 0%, transparent 27%);
 颜色,度数

conic-gradient（）函数是CSS中的内置函数，用于将圆锥曲线渐变设置为背景图像。圆锥倾斜角从0度到360度开始。圆锥形是圆形的，并使用元素的中心作为色标的源点。

mix-blend-mode: color-dodge;

元素的内容应该与元素的直系父元素的内容和元素的背景如何混合

animation-direction: reverse;

反向运行动画

mask 遮罩

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .el {
      width: 400px;
      height: 400px;
      margin-bottom: 10px;
      -webkit-mask-size: 400px;
    }

    .el-1 {
      background: purple;
      -webkit-mask-image: url("http://cdn.onlinewebfonts.com/svg/img_4507.png");
      -webkit-mask-repeat: no-repeat;
    }

    .el-2 {
      -webkit-mask-image: url(http://cdn.onlinewebfonts.com/svg/img_4507.png);
      -webkit-mask-repeat: no-repeat;
      background-image: url(https://images.unsplash.com/photo-1473172707857-f9e276582ab6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8);
      background-size: cover;
    }

    .el-3 {
      -webkit-mask-image: url(https://i.ibb.co/Tmv58d5/02.png);
      background: linear-gradient(red, blue);
      mask-type: luminance;
    }

    .el-4 {
      background: url(https://www.w3schools.com/css/img_5terre.jpg) center center no-repeat;
      -webkit-mask-image: linear-gradient(black, transparent);
    }

    .el-5 {
      background: url(https://www.w3schools.com/css/img_5terre.jpg) center center no-repeat;
      -webkit-mask-image: radial-gradient(circle,
          black 50%,
          rgba(0, 0, 0, 0.5) 50%);
      mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
    }
  </style>
</head>

<body style="background: #000; display: flex;justify-content: center;flex-direction: column">
  <div class="el el-1"></div>
  <div class="el el-2"></div>
  <div class="el el-3"></div>
  <div class="el el-4"></div>
  <div class="el el-5"></div>
</body>

</html>

进制的计算

[二进制] 0b开头
[八进制] 0开头
[十六进制] 0x开头

(055-35)-5

这个等于多少

055 的接口parseInt('055',8) 的结果为45, 所以最后的结果等于 5

GIF 暂停

动画暂停

<style>
  .like {
    display: block;
    width: 110px;
    height: 110px;
    margin:0 auto;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/349115/like_animation.png) 0 0 no-repeat;
    background-size: 3000%;
    animation: like-gif steps(28) 1s infinite both;
  }
  .pause {
    animation-play-state: paused;
  }
  div {
    width:100px;
    margin:0 auto;
    text-align:center;
  }

  @keyframes like-gif {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 100%;
    }
  }
</style>
<body>
<div id="likes" class="like"></div>
<div><input type="button" id="pause" value="pause"></div>
<script>
  let image = document.getElementById("likes"),
    button = document.getElementById("pause");
  if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == 'pause') {
        image.classList.add('pause');
        this.value = 'play';
      } else {
        image.classList.remove('pause');
        this.value = 'pause';
      }
    };
  }
</script>

也有一些相关的库

https://github.com/ctrl-freaks/freezeframe.js

对应的angular文档

console的展开和收起

  console.group('测试')
  console.log(1)
  console.log(2)
  console.log(4)
  console.groupEnd()

对象的指向问题

let obj = {sex: 1}
const obj1 = obj;
obj = null
console.log(obj1);
// { sex: 1 }

其实跟指向的变量无关, 变量只是一个引用地址的标识而已

继续看

let obj4 = {sex: 4}
let obj5 = obj4;
const obj6 = obj5;
obj4=null;
console.log(obj5);
obj5=null;
console.log(obj6);

我们会发现都是{sex: 4} , 因为你没有改成对应引入对象的地址

当你console.log厌倦了, 可以用自己的

const C=console.log.bind(console)
C('xxx')
posted @ 2022-04-17 14:48  猫神甜辣酱  阅读(122)  评论(0)  编辑  收藏  举报