如何实现粘性滚动的窗帘滑动效果？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1159个文字，预计阅读时间需要5分钟。
粘性滚动效果，打开窗口的样式+设置CSS：:root { --minh: 98vh; --color1: wheat; --color2: midnightblue; } 使用背景颜色 linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%); 设置min-height容器底部的额外高度.curtai
设置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 cdn.onlinewebfonts.com/svg/img_4507.png");
-webkit-mask-repeat: no-repeat;
}
.el-2 {
-webkit-mask-image: url(cdn.onlinewebfonts.com/svg/img_4507.png);
-webkit-mask-repeat: no-repeat;
background-image: url(images.unsplash.com/photo-1473172707857-f9e276582ab6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8);
background-size: cover;
}
.el-3 {
-webkit-mask-image: url(i.ibb.co/Tmv58d5/02.png);
background: linear-gradient(red, blue);
mask-type: luminance;
}
.el-4 {
background: url(www.w3schools.com/css/img_5terre.jpg) center center no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
}
.el-5 {
background: url(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
<style>
.like {
display: block;
width: 110px;
height: 110px;
margin:0 auto;
background: url(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>
也有一些相关的库
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} , 因为你没有改成对应引入对象的地址
const C=console.log.bind(console)
C('xxx')
决定自己的高度的是你的态度，而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬
本文共计1159个文字，预计阅读时间需要5分钟。
粘性滚动效果，打开窗口的样式+设置CSS：:root { --minh: 98vh; --color1: wheat; --color2: midnightblue; } 使用背景颜色 linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%); 设置min-height容器底部的额外高度.curtai
设置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 cdn.onlinewebfonts.com/svg/img_4507.png");
-webkit-mask-repeat: no-repeat;
}
.el-2 {
-webkit-mask-image: url(cdn.onlinewebfonts.com/svg/img_4507.png);
-webkit-mask-repeat: no-repeat;
background-image: url(images.unsplash.com/photo-1473172707857-f9e276582ab6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8);
background-size: cover;
}
.el-3 {
-webkit-mask-image: url(i.ibb.co/Tmv58d5/02.png);
background: linear-gradient(red, blue);
mask-type: luminance;
}
.el-4 {
background: url(www.w3schools.com/css/img_5terre.jpg) center center no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
}
.el-5 {
background: url(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
<style>
.like {
display: block;
width: 110px;
height: 110px;
margin:0 auto;
background: url(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>
也有一些相关的库
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} , 因为你没有改成对应引入对象的地址
const C=console.log.bind(console)
C('xxx')
决定自己的高度的是你的态度，而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬