html+css实现视差滚动

0x00 HTML代码

  <div class="main">                                                          <section class="list-item">                                               <div class="item-image">                                                <img src="img/fan1.jpeg" alt="img-1">                                 </div>                                                                  <div class="item-text">                                                 <div class="text-title">恋爱小行星</div>                                   <div class="text-desc"></div>                                         </div>                                                                  </section>                                                                <section class="list-item">                                               <div class="item-image">                                                <img src="img/fan2.jpeg" alt="img-2">                                 </div>                                                                  <div class="item-text">                                                 <div class="text-title">Comic Girls</div>                             <div class="text-desc"></div>                                         </div>                                                                  </section>                                                                <section class="list-item">                                               <div class="item-image">                                                <img src="img/fan3.jpg" alt="img-3">                                  </div>                                                                  <div class="item-text">                                                 <div class="text-title">辉夜大小姐想让我告白第二季</div>                           <div class="text-desc"></div>                                         </div>                                                                  </section>                                                                <section class="list-item">                                               <div class="item-image">                                                <img src="img/fan4.jpeg" alt="img-4">                                 </div>                                                                  <div class="item-text">                                                 <div class="text-title">邪神与厨二病少女第二季</div>                             <div class="text-desc"></div>                                         </div>                                                                  </section>                                                                <section class="list-item">                                               <div class="item-image">                                                <img src="img/fan5.png" alt="img-5">                                  </div>                                                                  <div class="item-text">                                                 <div class="text-title">公主连接Re:Dive</div>                             <div class="text-desc"></div>                                         </div>                                                                  </section>                                                                                                                                         </div>

0x01 css代码

* {box-sizing: border-box;
}html, body {padding: 0;margin: 0;
}html {/* 需要隐藏最外层不可见区域以使视差生效 */overflow: hidden;
}body {width: 100vw;height: 100vh;perspective: 100px;transform-style: preserve-3d;/* 3D的容器要允许overflow才能生效 */overflow-y: auto;
}.main {display: flex;flex-direction: column;align-items: center;justify-content: center;
}.list-item {display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;width: 100%;height: 45vh;overflow: hidden;
}.list-item:hover .item-image::before {background-color: rgba(0, 0, 0, 0.2);
}.item-image {position: absolute;width: 100%;height: 100%;transform: translateZ(-50px) scale(2.4);z-index: -1;
}.item-image::before {position: absolute;content: "";display: block;width: 100%;height: 100%;transition: all 0.3s ease;background-color: rgba(0, 0, 0, .4);
}.item-image img {display: block;width: 100%;height: 100%;object-fit: cover;
}.item-text {font-family: 'Courier New', Courier, monospace;text-align: center;color: #ffffff;
}.text-title {font-size: 2rem;font-weight: bold;margin-bottom: 20px;
}.text-desc {font-size: 1.2rem;
}

html+css实现视差滚动相关推荐

【面试题】1014- 面试官：如何使用CSS完成视差滚动效果?
一.是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层.内容层.悬浮层当滚动鼠标滑轮的时候 ...
17.使用CSS完成视差滚动效果?
一.是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层.内容层.悬浮层当滚动鼠标滑轮的时候 ...
【前端知识之CSS】CSS视差滚动
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍如何用CSS完成视差滚动的效果. 文章目录前言一.视差滚动是什么二.background-attachment 一.视差滚动是什么视差滚 ...
[css] 什么是视差滚动？如何实现视差滚动的效果？
[css] 什么是视差滚动?如何实现视差滚动的效果? 什么是视差滚动: 就是在同一视角下,鼠标或者页面滚动时,不同元素以不同的速率跟随滚动,产生生动的效果. 如何实现视差滚动: 根据页面滚动高度的变化 ...
html背景自动切换带滚动,利用CSS固定背景交替实现视差滚动效果
利用CSS固定背景交替实现视差滚动效果 Sponsor 视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂.没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技 ...
网页视差滚动效果html,CSS视差滚动效果
一.效果Demo先行~视差滚动效果大家可能都听过,基本上都是JS实现的,有对应插件 - Parallax.js . 实际上,如果你对兼容性要求不是很高,比方说忽略IE浏览器,则我们使用简单的几行CSS ...
视差滚动：零基础css代码实现时空穿越效果
先贴出最终效果: 上面的图片中,底层为冬季大树图片,上层为春季大树图片. 上层元素滚动之间,春季图片的位置却没有变化,感觉像是上层元素的滚动使底层元素的冬季大树图片实现"时空穿越" ...
Cool Kitten：新鲜出炉的视差滚动响应式框架
Cool Kitten 是一个具备视差滚动特效的响应式框架,由 Jalxob 编写,是 Github 上的开源项目.实质上是一组设计师和开发人员使用的 HTML/CSS 以及 JavaScript 文 ...
视差滚动（Parallax Scrolling）技术在网页中应用的精美案例
视差滚动(Parallax Scrolling)是一种独特的网页内容表现形式,其基本原理是让多层背景以不同的速度移动,形成立体的运动效果,带来出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站 ...

html+css实现视差滚动

html+css实现视差滚动相关推荐

最新文章

热门文章