图片/图形

纯CSS3炫酷网页背景滚动视觉差特效

也想出现在这里?联系我们
创客云

纯CSS3炫酷网页背景滚动视觉差特效
这是一款使用纯 CSS/CSS3 制作的响应式网页背景滚动视觉差特效。该视觉差特效在用户向下滚动页面的时候,页面的背景图像会以不同的速度进行滚动,产生炫酷的视觉差效果。

HTML 结构

该视觉差效果的 HTML 结构分为两个主要元素:section.parallax 是用于制作视觉差效果的背景图片。section.content 是用于放置文字内容。

也想出现在这里?联系我们
创客主机
  1. <section class="parallax parallax-2">
  2.   <div class="container">
  3.     <h1>Lorem Ipsum Dollar</h1>
  4.   </div>
  5. </section>
  6. <section class="content">
  7.   <div class="container">
  8.     <h2>Lorem Ipsum Dollar</h2>
  9.     <p>
  10.       ...
  11.     </p>
  12.     <p>
  13.       ...
  14.     </p>
  15.     <p>
  16.       ...
  17.     </p>
  18.  
  19.   </div>
  20. </section>

CSS 样式

用于制作滚动背景视觉差效果的 CSS 代码非常简单,如下:

  1. section.parallax {
  2.   position: relative;
  3.   height: auto;
  4.   padding: 180px 0px;
  5.  
  6.   background-position: 50% 50%;
  7.   background-repeat: no-repeat;
  8.   background-attachment: fixed;
  9.   -webkit-background-size: cover;
  10.   -moz-background-size: cover;
  11.   -o-background-size: cover;
  12.   background-size: cover;
  13. }
  14. section.parallax:after {
  15.     position: absolute;
  16.     left: 0;
  17.     right: 0;
  18.     bottom: 0;
  19.     top: 0;
  20.     background-color: rgba(0, 0, 0, 0.30);
  21.     z-index: 100;
  22.     content: ' ';
  23. }
  24. section.parallax h1 {
  25.   color: #fff;
  26.   position: relative;
  27.   z-index: 101;
  28.   font-size: 48px;
  29.   line-height: 1.5;
  30.   font-weight: 700;
  31.   text-align: center;
  32.   text-transform: uppercase;
  33. }

最后为它们添加背景图片:

  1. section.parallax.parallax-1 {
  2.   background-image: url("../img/image1.jpg");
  3.   background-position: 100% 100%;
  4. }
  5.  
  6. section.parallax.parallax-2 {
  7.   background-image: url("../img/image2.jpg");
  8. }
  9.  
  10. section.parallax.parallax-3 {
  11.   background-image: url("../img/image3.jpg");
  12. }
资源下载此资源下载价格为1立即购买,VIP 免费

演示地址 下载地址
收藏
(2)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

精品专区

Contact us all-in-one button with callback - 轻量级侧边按钮客服插件,允许设置自定义的提示语,还支持添加无限数量的联系方式,不仅支持国内的微信二维码、QQ等主流程序,还支持几乎所有国外的热门社交工具、及时聊天程序等,演示参考我们官网右下角客服按钮。

购买插件