效果

重点

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. HINT: It seems you set a fixed date / time / datetime value as default for this field. This may not be what you want. If you want to have the current date as default, use `django.utils.timezone.now`

    WARNINGS: customers.PackingHead.packing_date: (fields.W161) Fixed default value provided. HINT: It s ...

  2. [oeasy]python0073_进制转化_eval_evaluate_衡量_oct_octal_八进制

    进制转化 回忆上次内容 上次了解的是 整型数字类变量 integer 前缀为i   ​   添加图片注释,不超过 140 字(可选)   整型变量 和 字符串变量 不同 整型变量 是 直接存储二进制形 ...

  3. vue小知识~实现父子组件双向数据绑定

    vue的数据是单向数据流动,在子组件中是不可以修改父组件的数据的,但是还是可以通过其他方式间接修改父组件的数据. 核心思想:数据在哪个组件,就在哪个组件修改. 1,方式一:通过向子组件传递方法 这个方 ...

  4. electron安装成功记录

    1.登录官网查看当前最新版本对应的node,注意这里不要看php那个汉化的,他那个是老版本的,node对不上 2.nvm安装一个新的node 3.使用cnpm安装(npm安装还是报错了,记得删node ...

  5. 常用的adb命令（重要）

    常用的adb命令(重要)

  6. 全网最适合入门的面向对象编程教程：30 Python的内置数据类型-object根类

    全网最适合入门的面向对象编程教程:30 Python 的内置数据类型-object 根类 摘要: 在 Python 中,所有的类都直接或间接继承自一个根类,这个根类是Object.Object类是 P ...

  7. 循环神经网络 —— LSTM 图片

  8. 【转载】 softmax_cross_entropy_with_logits中“logits”是个什么意思？

    原文地址: https://zhuanlan.zhihu.com/p/51431626 -------------------------------------------------------- ...

  9. PyTorch显存机制分析——显存碎片问题

    参考前文: https://www.cnblogs.com/devilmaycry812839668/p/15578068.html ================================= ...

  10. 乌克兰学者的学术图谱case2

    ======================================= 0. 学者:Солонін Ю.М. 中文翻译名:索洛宁·尤里·米哈伊洛维奇 英文翻译名:Solonin Yuriy M ...