这个超级炫酷的效果在官网中非常的受欢迎，这种效果可以给用户带来视觉冲击，也给我们的网站带来了活力。普通的网页图片会跟随着网页一起滑动，但是视觉差效果图就会固定在底部，只有图片所在的窗口上的元素会移动。
仅使用CSS
对你没有看错，这个效果只需要用到CSS就能轻易的实现！我们只要使用一个CSS背景图的属性background-attachment: fixed，这个特性会把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
实现理论：
一、在含有图片的元素中加入background: url()和background-size: cover（第二个属性适用于定义图片为封面，可以让图片大小自动适应，在很大的屏幕也会显示完整的图片）
二、然后附加固定背景图的属性background-attachment: fixed
三、最后给这个元素加入一个高度height: 100%或者任意的高度height: 400px
就那么简单哦！不用怀疑，马上上代码，大家都可以自己去试试哦！
HTML
<div class="wrapper">
<div class="parallax-img"></img>
<p>这里填写一堆文字就可以了，尽量多一点哦</p>
</div>
CSS
.wrapper {
height: 100wh;
}
.parallax-img {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {
font-size: 20px;
padding: 1.5rem 3rem;
min-height: 1000px; // 当你的文字内容不够，也能撑出足够的高度来看到效果，当然如果你文字足够多，就不需要了
}
如果想做到我动图里面一样的效果，或者想看是怎么实现的，可以查看下面总结里面的“预览实际效果”或者看“GitHub源码”。
知识总结
background-attachment: fixed — 把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 background-size: cover — 可以让图片大小自动适应，在很大的屏幕也会显示完整的图片。
使用CSS JavaScript
有些童鞋可能没有被这个震撼到或者还是觉得不够刺激。那我们再来一个高级例子，上面的例子在滑动的时候图片是固定死的。如果我们加上JavaScript的助力，我们可以让窗口的图片缓慢的跟随这个页面滑动，使得效果更有动力和更有冲击感。
实现理论 首先讲一下排版，因为我们需要在我们滑动页面的时候使用JavaScript偏移图片，所以我们需要给图片一个CSS属性让我们可以让图片可以根据一个速度来往上或者往下移动。这个例子里面我们让所有图片包裹在一个div里面，class名为block。这个div给予相对定位属性position: relative，这个时候我们就可以在里面加入图片，然后让图片绝对定位position: absolute在这个div盒子里面。
但是图片是可能很大的，我们需要把图片不超出我们定义个盒子，所以我们的div同时也给予了overflow: hidden和一个高度height: 100%。这样图片超出div盒子就会被隐藏。
布局代码如下：
<div class="block">
<img
src="https://unsplash.it/1920/1920/?image=1005"
data-speed="-1"
class="img-parallax"
/>
<h2>视差速度 -1</h2>
</div>
<div class="block">
<img
src="https://unsplash.it/1920/1920/?image=1067"
data-speed="1"
class="img-parallax"
/>
<h2>视差速度 1</h2>
</div>
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Amatic SC', cursive;
}
.block{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
font-size: 16px;
}
.block h2{
position: relative;
display: block;
text-align: center;
margin: 0;
top: 50%;
transform: translateY(-50%);
font-size: 10vw;
color: white;
font-weight: 400;
}
.img-parallax {
width: 100vmax;
z-index: -1;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
pointer-events: none
}
实现这个布局，在你滑动的时候，图片是不会移动的。因为最后一步就是加入JavaScript的辅助，让图片活起来。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 循环获取每一个图片元素
$(".img-parallax").each(function () {
var img = $(this);
var imgParent = $(this).parent();
function parallaxImg() {
var speed = img.data("speed"); // 获取每张图片设置了的偏移速度
var imgY = imgParent.offset().top; // 获取图片盒子所在的Y位置
var winY = $(this).scrollTop(); // 获取当前滑动到的位置
var winH = $(this).height(); // 获取浏览器窗口高度
var parentH = imgParent.innerHeight(); // 获取图片盒子的内高度
// 浏览器窗口底部的所在位置
var winBottom = winY winH;
// 当前图片是否进入浏览器窗口
if (winBottom > imgY && winY < imgY parentH) {
// 运算图片需要开始移动的位置
var imgBottom = (winBottom - imgY) * speed;
// 运算出图片需要停止移动的位置
var imgTop = winH parentH;
// 获取从开始移动到结束移动的%（根据开始与结束像素 移动速度）
var imgPercent = (imgBottom / imgTop) * 100 (50 - speed * 50);
}
img.css({
top: imgPercent "%",
transform: "translate(-50%, -" imgPercent "%)",
});
}
$(document).on({
scroll: function () {
parallaxImg();
},
ready: function () {
parallaxImg();
},
});
});
</script>
6. 裁剪图像的动画知识总结
position: relative — 相对定位。 position: absolute — 绝对定位。 overflow: hidden — 如果需要，内容将被剪裁以适合填充框。 不提供滚动条。
在有CSS3之前裁剪图片实现也是颇有难度的。现在我们有了两个非常方便简单的CSS3属性可以实现裁剪，那就是object-fit和object-position, 这两个属性可以让我们改变图片的大小，但是不影响图片的长宽比。
当然我们可以使用图片处理工具或者使用JavaScript等插件来实现图片裁剪功能。但是因为有了CSS3的属性，我们不只可以裁剪，我们还可以用裁剪的属性来做图片的动态效果。
为了让我们的例子更加简单，我们这里使用了<input type="checkbox">复选框元素，这样我们就可以使用:checked的伪类来触发启动效果。所以在例子里面我们完全不需要JavaScript的协助。
实现原理：
一、首先给予图片一个宽高height: 1080px，width: 1920px。
二、然后用CSS选择器，锁定当input被选中后img标签的样式变化。当被选中时，给图片设定一个新的宽高，这里我们给宽高各自500像素：width: 500px，height: 500px。
三、然后我们加上了过渡效果和时间让图片改变宽高时有动画过渡效果：transition: width 2s, height 4s;。
四、最后加上object-fit: cover和object-position: left-top这两个属性来保持图片的宽高比例，这样就大功告成了！
我们来看看完成的代码：
勾选裁剪图片 <input type="checkbox" />
<br />
<img
src="https://img-blog.csdnimg.cn/2020032122230564.png"
alt="Random"
/>
input {
transform: scale(1.5); /* 只是用来放大复选框大小 */
margin: 10px 5px;
color: #fff;
}
img {
width: 1920px;
height: 1080px;
transition: 0s;
}
/* css选择器锁定复选框被选中时的状态 */
input:checked br img {
width: 500px;
height: 500px;
object-fit: cover;
object-position: left-top;
transition: width 2s, height 4s;
}
7. 混合模式（Blend）知识总结
object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 object-position — 用来切换被替换元素的内容对象在元素框内的对齐方式。 transition — 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
如果有使用过Photoshop的同学对blend混合模式应该是非常熟悉了，我们都知道混合模式是非常强大，也是p图时非常常用的一个功能。但是你们有没有想象过可以在浏览器的CSS中直接使用呢？对我们不需要设计师给我们做图，我们前端也可以实现混合模式了。
在CSS中我们不只可以对background背景加入混合模式，我们可以对任何一个元素的自带背景加入混合模式，让你可以做出很多之前没有想过的效果和排版。
往一个元素加入混合模式，我们只需要使用到一个CSS属性mix-blend-mode即可。
简单实现原理：
首先我们只需要加一个h1标题标签
<h1>混合模式：颜色减淡</h1>
然后我们给h1标签加入mix-blend-mode中的颜色减弱模式color-dodge，但是要注意的是我们需要给body和html加入背景颜色background: white，要不你会发现这个效果会无效。因为h1我们没有给颜色，会自动往上级继承，并且混合模式是针对背景颜色的过滤，所以body和html需要有背景颜色才行。
h1 {
mix-blend-mode: color-dodge;
font-family: yahei;
font-size: 5rem;
text-align: center;
margin: 0;
padding: 20vh 200px;
color: #D1956C;
}
html,
body {
margin: 0;
background-color: white;
}
body {
background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
overflow: hidden;
}
换换背景图和h1标签的字体颜色就可以弄出各种不同的特效了。
