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',
},
});
CSS & JS Effect – Hero Banner Swiper的更多相关文章
- css&js实现顶部banner滚动提示效果
以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...
- html+css+js实现类似音乐app似的列表播放
最近做了一个类似于音乐app里面列表播放的功能,主要是音频播放和按钮状态的联动: 界面如下: 如上图所示 上面有一个播放按钮 下面有一个播放列表 上面还有一个歌曲长度的总时长 上面一个按钮能控制下面所 ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
- 前端小白页面开发注意事项及小工具（html\css\js）
技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...
- Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...
- 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
随机推荐
- 「Pygors跨平台GUI」2：安装MinGW-w64、MSYS2还是WSL2
「Pygors系列」一句话导读: MinGW-w64只有编译器,MSYS2带着更新环境,WSL2实用性比较高 历史与渊源 Windows平台 Linux平台 二进制兼容 WSL2:运行Linux程 ...
- [oeasy]python0088_字节_Byte_存储单位_KB_MB_GB_TB
编码进化 回忆上次内容 上次 回顾了 字符大战的结果 ibm 曾经的 EBCDIC 由于字符不连续的隐患 导致后续 出现 无数问题 无法补救 7-bit 的 ASA X3.4-1963 字母序号连续 ...
- [rCore学习笔记 011]第1章作业题
编程题 第一题 在homework文件夹下创建homework-1-1,使用cargo创建工程: cargo new getFileName 在src下创建file_name.rs文件: // /ho ...
- 对比python学julia（第一章）--（第五节）八十天环游地球
5.1. 问题描述 <八十天环游地球>是法国作家儒勒·凡尔纳创作的一部长篇小说,讲述了这样一个神奇的故事. 在1872年的伦敦,英国绅士福格跟俱乐部的朋友以巨资打赌他能在80天实现环游地 ...
- 【SpringBoot】数据源加密处理
代码审计报告提出的一个问题: 明文暴露配置信息风险 解决方案可以使用jasypt实现 需要使用依赖: <dependency> <groupId>com.github.ulis ...
- 全网最适合入门的面向对象编程教程：30 Python的内置数据类型-object根类
全网最适合入门的面向对象编程教程:30 Python 的内置数据类型-object 根类 摘要: 在 Python 中,所有的类都直接或间接继承自一个根类,这个根类是Object.Object类是 P ...
- Ax = b 的迭代解法 —— 共轭梯度 （算法步骤）
线性方程组 Ax =b 除了高斯消元法以外,还有其它的迭代解法,这里我们说的是共轭梯度法. 这里只针对 A 满足 对称 ( ), 正定(即 ),并且是实系数的,那么我们可以用 梯度下降 和 共轭梯 ...
- Linux系统——删除用户命令
背景: 负责管理实验室的服务器,近期有保研的大三同学放弃保送到实验室而选择其他实验室,因此需要把之前给他开的账号取消掉. ===================================== ...
- MAML —— Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks
论文地址: https://arxiv.org/abs/1703.03400 官方代码: 有监督学习: https://github.com/cbfinn/maml 强化学习: https://git ...
- 如何在Ubuntu系统中进行系统级的代理设置
在Ubuntu系统中我们往往需要设置代理上网,比如在Ubuntu22.04中,通过图形化界面的设置方式如下: 这里假设代理服务器地址为: 192.168.1.103:1080 ============ ...