效果

重点

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. 国内版Unity 2023编辑器无法切换到DX12模式的解决方法

    2024.7.4更新:至6000.0.5f1c1,此问题已修复 在{安装目录}\Editor里(也就是Unity安装的根目录)建立一个名叫D3D12的文件夹. 去{安装目录}\Editor\Data\ ...

  2. Jenkins插件管理（Manager Plugins）【快速提升项目构建和部署实施的工作效率】

    Jenkins 是一个很棒的开源自动化平台.它有一些开箱即用的强大功能.然而,在我看来,让它脱颖而出的是它的社区和它开发的插件.有超过一千个插件可用于支持几乎所有用于构建.部署和自动化项目的技术.工具 ...

  3. [oeasy]python0037_电传打字机_打印头_print_head_carriage_词源

    换行回车 回忆上次内容 上次我们 diy了 自己的小动物 还可以 让小动物 变色.报时 还可以 说些话 这很亚文化 很酷炫的亚文化 不是吗? 回忆一下 最开始 研究报时 的 时候 回到 本行行头 的 ...

  4. Jmeter函数助手-自带函数汇总

    Jmeter函数助手自带函数汇总(Jmeter官网-函数助手详解:https://jmeter.apache.org/usermanual/functions.html) BeanShell:用于简单 ...

  5. SpringBoot全局异常处理及自定义异常

    首先定义自定义返回类,如果自己项目中已经有了自定义返回类只需要将后面的代码做相应的修改即可: import io.swagger.annotations.ApiModelProperty; impor ...

  6. Python的GDAL库绘制多波段、长时序遥感影像时间曲线图

      本文介绍基于Python中的gdal模块,对大量长时间序列的栅格遥感影像文件,绘制其每一个波段中.若干随机指定的像元的时间序列曲线图的方法.   在之前的文章中,我们就已经介绍过基于gdal模块, ...

  7. （ Ubuntu系统下 ） vim插件安装 supertab 实现tab键的补全功能 （vim+python环境下）

    本文前提已经安装了  Vundle   : 下载  supertab : git clone https://github.com/ervandew/supertab ~/.vim/bundle/ 编 ...

  8. 对于强化学习算法中的AC算法（Actor-Critic算法） 的一些理解

    AC算法(Actor-Critic算法)最早是由<Neuronlike Adaptive Elements That Can Solve Difficult Learning Control P ...

  9. 强化学习：AC算法中为什么不使用Q函数来表示优势函数

    强化学习中的策略梯度法(PG)不直接使用Q函数作为值函数来进行计算已经在Sutton的PG公式证明中提出,主要作用就是减少方差,因此使用优势函数进行计算.作为PG算法类中最常见的AC类算法有着较多的使 ...

  10. 在线flex布局----自己写的一个flex布局的小玩意，需要的私聊加关注0.0