CSS & JS Effect – Hero Banner Swiper
效果
重点
1. 一张图片, 一个 content 定位居中作为一个 slide
2. slider 用了 JavaScript Library – Swiper
3. 当 slide active 的时候做一个 animation 把 content 划出来.
Swiper & Layout
HTML
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="../images/hero-banner-1.jpg" /> <h1>Reliable Air Conditioning</h1> <h2>Installation, Services & Repair</h2> <p>100% Satisfaction Guarantee With Everything Thing We Do!</p> <a href="#">Get an Estimate</a> </div> </div> </div>
.swiper > .swiper-wrapper > .swiper-slide 是 swiper 的布局.
内容是 img 和 4 个行 text
效果
在没有任何 CSS 情况下, swiper 的 height 是 hug content.
Set Dimension
.swiper { height: 50vh; img { width: 100%; height: 100%; object-fit: cover; } }
让 swiper 控制高度, 里面的图片 follow
Set Position
<div class="swiper-slide"> <img src="../images/hero-banner-1.jpg" /> <div class="content-container"> <div class="content"> <h1>Reliable Air Conditioning</h1> <h2>Installation, Services & Repair</h2> <p>100% Satisfaction Guarantee With Everything Thing We Do!</p> <a href="#">Get an Estimate</a> </div> </div> </div>
加上 content-container 和 content 把内容 wrap 起来, 然后 CSS 定位 aligh
.swiper { position: relative; .content-container { position: absolute; inset: 0; max-width: 1024px; margin-inline: auto; display: flex; align-items: center; } }
点缀 CSS
.swiper { .content-container { .content { display: flex; flex-direction: column; gap: 1rem; h1 { line-height: 1; letter-spacing: 0; color: #003056; font-size: 4rem; font-weight: 100; } h2 { line-height: 1; color: #003056; font-size: 2.5rem; } a { display: inline-block; padding: 1rem 1.5rem; text-transform: uppercase; background-color: hsl(195, 100%, 43%); color: white; align-self: flex-start; text-decoration: none; border-radius: 4px; } } } }
效果
到这里就有一个型了, 剩下的就是 animation 了.
Animation
放慢来看, 它的 animation 是字从下面划出来. 大概像上面这样.
做 wrapper
要实现这个效果, 首先要把内容藏起来
为每个 text 做一个 wrapper, overflow-y: hidden, 然后让内容 translateY 100%, 内容就完全藏起来了, 待会交出来就可以了.
.wrapper { transition: transform 0.4s 0.2s; transform: translateY(50%); overflow-y: hidden; * { transition: transform 0.4s 0.2s; transform: translateY(100%); } }
wrapper 也设置一个 transition, 这样一起动效果更好哦.
.swiper-slide-active
当 slide active 的时候, swiper 会给一个 swiper-slide-active class, 借助这个 class 就可以设置让内容出现了.
.swiper { .swiper-slide-active .content-container .content .wrapper { transform: initial; * { transform: initial; } } }
完整代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Simple Test (Webpack)</title> </head> <body> <header>Header</header> <main> <section class="hero-banner-section"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="../images/hero-banner-1.jpg" /> <div class="content-container"> <div class="content"> <div class="wrapper"> <h1>Reliable Air Conditioning</h1> </div> <div class="wrapper"> <h2>Installation, Services & Repair</h2> </div> <div class="wrapper"> <p>100% Satisfaction Guarantee With Everything Thing We Do!</p> </div> <div class="wrapper"> <a href="#">Get an Estimate</a> </div> </div> </div> </div> <div class="swiper-slide"> <img src="../images/hero-banner-2.jpg" /> <div class="content-container"> <div class="content"> <div class="wrapper"> <h1>Reliable Air Conditioning</h1> </div> <div class="wrapper"> <h2>Installation, Services & Repair</h2> </div> <div class="wrapper"> <p>100% Satisfaction Guarantee With Everything Thing We Do!</p> </div> <div class="wrapper"> <a href="#">Get an Estimate</a> </div> </div> </div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </section> </main> </body> </html>
CSS Style
* { margin: 0; padding: 0; box-sizing: border-box; } img, svg { display: block; } header { height: 225px; display: flex; justify-content: center; align-items: center; font-size: 32px; background-color: pink; } .swiper { height: 400px; .swiper-slide { img { width: 100%; height: 100%; object-fit: cover; } position: relative; .content-container { position: absolute; inset: 0; max-width: 1024px; margin-inline: auto; display: flex; align-items: center; .content { display: flex; flex-direction: column; gap: 1rem; .wrapper { transition: transform 0.4s 0.2s; transform: translateY(50%); overflow-y: hidden; * { transition: transform 0.4s 0.2s; transform: translateY(100%); } } h1 { line-height: 1; letter-spacing: 0; color: #003056; font-size: 4rem; font-weight: 100; } h2 { line-height: 1; color: #003056; font-size: 2.5rem; } a { display: inline-block; padding: 1rem 1.5rem; text-transform: uppercase; background-color: hsl(195, 100%, 43%); color: white; align-self: flex-start; text-decoration: none; border-radius: 4px; } } } &.swiper-slide-active { .content-container .content .wrapper { transform: initial; * { transform: initial; } } } } }
JavaScript
import './home.scss'; import Swiper, { Navigation } from 'swiper'; import 'swiper/css'; import 'swiper/css/navigation'; new Swiper('.swiper', { modules: [Navigation], navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });
