效果

重点

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的更多相关文章

  1. css&js实现顶部banner滚动提示效果

    以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...

  2. html+css+js实现类似音乐app似的列表播放

    最近做了一个类似于音乐app里面列表播放的功能,主要是音频播放和按钮状态的联动: 界面如下: 如上图所示 上面有一个播放按钮 下面有一个播放列表 上面还有一个歌曲长度的总时长 上面一个按钮能控制下面所 ...

  3. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

  4. 前端小白页面开发注意事项及小工具（html\css\js）

    技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...

  5. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  6. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  7. 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决

    Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决:   1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...

  8. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  9. 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  10. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

随机推荐

  1. yolov5 损失函数代码详解

    前言 模型的损失计算包括3个方面,分别是: 定位损失 分类损失 置信度损失 损失的计算公式如下: 损失计算的代码流程也是按照这三大块来计算的.本篇主要讲解yolov5中损失计算的实现,包括损失的逻辑实 ...

  2. JMeter 配置元件之按条件读取CSV Data Set Config

    实践环境 win10 JMeter 5.4.1 需求描述 需求是这样的,需要压测某个接口(取消分配接口),请求这个接口之前,需要先登录系统(物流WMS系统),并在登录后,选择并进入需要操作的仓库,然后 ...

  3. DUILib的代码分析

    1.思路上用的是mfc的Message_MAP,而Control只是一个gdi render. 控件间使用的Message Map. 也就是说每个控件可以作为一个独立的个体

  4. 解决 IIS Express 启动错误：“拒绝访问”问题

    报错 Starting IIS Express ... stderr: Failed to register URL "http://localhost:8378/" for si ...

  5. 从pytest源码的角度分析pytest工作原理

    从pytest源码的角度分析pytest工作原理 从 pytest 源代码的角度来分析其工作原理,我们需要关注几个关键的部分,特别是 pytest 的启动过程以及测试的收集与执行.下面是基于 pyte ...

  6. python学习总结（重要！！！）

    前取,后不取        index从0开始 list = [1,2,3,4,5,6,7,8,9]print(list[3:7]) #输出:[4, 5, 6, 7]print(list[3:-2]) ...

  7. awk替换指定行指定列内容

    例如表格中数值如下1,2,3,41,2,1,22,3,2,3怎么样在原表中,把第二行第三个1替换为5. awk -F"," 'NR==2{$3=5} 1' file.txt -F ...

  8. 2、Git之Windows版本的安装

    2.1.下载Git 官网下载地址:https://git-scm.com/download/ 最初,Git 是用于管理 Linux 社区的代码,所以在很长的一段时间内,Git 只能安装在 Linux ...

  9. 【Uni-App】组件笔记

    官网文档地址: https://uniapp.dcloud.io/component/README 组件是视图层的基本组成单元. 组件是一个单独且可复用的功能模块的封装. 每个组件,包括如下几个部分: ...

  10. 【微信小程序】03 配置项

    全局配置项: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html 属性 类型 必填 描述 ...