The animation library used by the banner rotation: Ant-Motion

The authorities gave a lot of small demos, you can play with themThe result is shown below (GIF export is large, so it looks like kaka, but it’s actually very smooth)

The video is played in Html5

 <video
       style={{ width: "100%".height: "100%".objectFit: "cover" }}
       autoPlay
       muted
       loop
>
       <source src={item.video} type="video/mp4"></source>
</video>
Copy the code
  1. autoplayIf this property is present, the video is played immediately after it is ready.
  2. controlsIf present, the control, such as a play button, is displayed to the user.
  3. heightSet the height of the video player.
  4. loopIf this property is present, playback starts again when the media file has finished playing.
  5. mutedSpecifies that the audio output of the video should be muted.
  6. posterSpecifies the image to display when a video is downloaded, or before the user clicks the play button.
  7. preloadIf this property is present, the video is loaded when the page loads and ready to play. If “autoplay” is used, this property is ignored.
  8. srcThe URL of the video to play.
  9. widthSet the width of video player.

Banner shuffling

1. Encapsulate the banner component

import React from "react";
import { useRoute } from "@/hooks";
import { Button } from "antd";
import { RightOutlined } from "@ant-design/icons";

import BannerAnim, { Element } from "rc-banner-anim";
import TweenOne from "rc-tween-one";
import FontText from ".. /html/FontText";

import "./index.less";
const BgElement = Element.BgElement;

export default function ({ bannerList }) {
  const [_, setRoute] = useRoute();

  return (
    <BannerAnim
      prefixCls="banner-user component-banner-wrap"
      autoPlay
      autoPlaySpeed={8000}
      type="across"
      arrow={false}
      delay={300}
    >
      {bannerList.map((item, index) => (
        <Element prefixCls="banner-user-elem" key={` ${index} `} >
          {item.video ? (
            <video
              style={{ width: "100% ",height: "100% ",objectFit: "cover"}}autoPlay
              muted
              loop
            >
              <source src={item.video} type="video/mp4"></source>
            </video>
          ) : (
            <BgElement
              key="bg"
              className="bg"
              style={{ backgroundImage: "url(" + item.image + ")" }}
            />
          )}
          <TweenOne
            className="title box-container"
            animation={{ y: 30.opacity: 0.type: "from}} ">
            <FontText
              key="title"
              theme="light"
              size={40}
              lineHeight="60px"
              fontWeight="bold"
              top={187}
              textAlign="center"
            >
              {item.title}
            </FontText>
          </TweenOne>
          <TweenOne
            className="box-container"
            animation={{ y: 30.opacity: 0.type: "from", delay: 100 }}
          >
            <FontText
              key="text"
              theme="light"
              top={12}
              size={18}
              // width={548}
              color={85}
              lineHeight="25px"
              content={item.subTitle}
              textAlign="center"
            />
          </TweenOne>{! item.btn && (<TweenOne
              className="box-container"
              animation={{ y: 30.opacity: 0.type: "from", delay: 100 }}
            >
              <div className="block_item"></div>
            </TweenOne>
          )}
          {item.btn && (
            <TweenOne
              className="box-container"
              style={{ marginTop: 48.with: 1200 }}
              animation={{ y: 30.opacity: 0.type: "from", delay: 100 }}
            >
              <div className="btn">
                <Button
                  key="btn"
                  type="primary"
                  onClick={()= > setRoute(item.url)}
                  style={{ minWidth: 180, height: 54, background: "#4E80F8" }}
                >
                  {item.btn}
                  <RightOutlined />
                </Button>
              </div>
            </TweenOne>
          )}
        </Element>
      ))}
    </BannerAnim>
  );
}
Copy the code

2. Design data structures that require MAP operations

export const bannerList = [
  {
    id: "1".btn: "".title: "I'm Banner1, it's video.".subTitle: "A brief line under the banner.".video: require("@/assets/images/home/banner_video.mp4"),}, {id: "3".btn: "Banner2 has buttons".title: "I'm Banner2. I'm a picture.".subTitle: "A brief line under the banner.".image: require("@/assets/images/home/banner2.jpg"),}, {id: "2".btn: "Banner3 has buttons".title: "I'm Banner3. I'm a picture.".subTitle: "A brief line under the banner.".image: require("@/assets/images/home/banner3.jpeg"),},];Copy the code