效果

重点

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. [oeasy]python0015_十六进制_hexadecimal_字节形态_hex函数

    ​ 十六进制(hexadecimal) 回忆上次内容 上次数制可以转化 bin(n)可以把数字转化为 ​​2进制​ binary 接收一个整数(int) 得到一个二进制数形式的字符串 ​ 编辑 数字在 ...

  2. 题解：P10722 [GESP202406 六级] 二叉树

    题意 一颗 \(n\) 节点的二叉树,每个节点非黑即白,给你 \(Q\) 次操作,每次给你一个 \(u\),把 \(u\) 的子树内所有节点颜色反转,问最终每个节点的颜色. 分析 看到数据范围,首先把 ...

  3. 集群及分布式定时任务中间件MEE_TIMED

    集群及分布式定时任务中间件MEE_TIMED 转载请著名出处:https://www.cnblogs.com/funnyzpc/p/18312521 MEE_TIMED一套开源的定时任务中间件,MEE ...

  4. JavaScript 探究[] == ![]结果为true，而 {} == !{}却为false

    console.log( [] == ![] ) // true console.log( {} == !{} ) // false 在比较字符串.数值和布尔值的相等性时,问题还比较简单.但在涉及到对 ...

  5. 【jQuery学习日记】从入门到再入门

    1,jQuery介绍 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. 2,入门jQuery jQuery有两大核心:jQuery核心函数和j ...

  6. Codeforces Round 953 (Div. 2)

    Codeforces Round 953 (Div. 2) 闲来无事水题解. A . B . C 显然 \(k\) 是偶数.考虑 \(k\) 的上界,\(p_{1}=n,p_{n}=1\),产生 \( ...

  7. 【转载】 详解nohup /dev/null 2>&1 含义的使用

    原文地址: https://www.jb51.net/article/169837.htm ==================================== 这篇文章主要介绍了详解nohup ...

  8. windows10开启电源模式中的休眠选项

    使用管理员权限开启PowerShell,输入命令: powercfg -h on

  9. 代码随想录Day9

    KMP算法 主要用来进行字符串匹配 KMP的主要思想是当出现字符串不匹配时,可以知道一部分之前已经匹配的文本内容,可以利用这些信息避免从头再去做匹配了. 所以如何记录已经匹配的文本内容,是KMP的重点 ...

  10. 【问题解决】git status中文文件名乱码

    问题复现 解决办法 在git bash中直接执行如下命令 git config --global core.quotepath false 原因 通过 git config --help 可以查看到以 ...