视差滚动-background-attachement

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=ijc0ib&title=%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8-background-attachement

之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解。实现方法很简单,做一下简单的分析。。。

概述:滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉体验。

属性:background-attachment ,决定背景在视图中形态(固定、随区块固定),需配合background-image使用。

:background-attachment:scroll || local || fixed

local关键词表示背景相当于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动。

使用

 1 
23 
i am img1
24
i am img2
25
i am img3

...END.

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=ijc0ib&title=%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8-background-attachement

转载于:https://my.oschina.net/u/4181724/blog/3086496

你可能感兴趣的:(视差滚动-background-attachement)