Skip to content

Latest commit

 

History

History
319 lines (256 loc) · 6.95 KB

README-en.md

File metadata and controls

319 lines (256 loc) · 6.95 KB

WebGL Transition Effect Plugin ✨

This plugin uses WebGL and three.js technology to achieve impressive transition effects that are mobile-friendly. It can help you add beautiful transition effects to your website or application to enhance the user experience.

Currently only tested in vue2.

Demo

GIF2023-4-13-10-50-25

However, it should be noted that since the plugin uses three.js technology, it will increase the size of your application. If your application is very focused on file size, use this plugin with caution. ⚠️

Installation 📥

You can install this plugin using npm or yarn.

Using npm:

npm i contentgrid --save

Using yarn:

yarn add contentgrid

Dependencies ✔️

It is recommended to use the specified version, and other versions have not been tested.

gsap animation library

npm i [email protected]

imagesloaded image loading library

npm i [email protected]

three front-end 3D library

npm i [email protected]

Usage 🚀

Import and initialize the plugin in your application:

Contentgrid

 <div id="app">
    <div
      class="contentgrid"
    >
      <Contentgrid
        ref="contentgrid"
        :dataArray="datatext"
        :loading="true"
        :shouldPause="true"
        @change="change"
      >
        <div slot="slidetitle" slot-scope="{ htmlText }">
          <div class="meta">物种</div>
          <h2 id="slide-title" ref="slidetitle">{{ htmlText.TitleName }}</h2>
        </div>
        <div slot="slidestatus" slot-scope="{ htmlText }">
          <div class="meta">保护现状</div>
          <div id="slide-status" ref="slidestatus">
            {{ htmlText.StatusName }}
          </div>
        </div>
      </Contentgrid>
    </div>
  </div>
import {Contentgrid} from "contentgrid"; 

components: {
    Contentgrid,
  },
data() {
    return {
      datatext: [
        {
          id: 0,
          TitleName: "远东豹",
          StatusName: "极度濒危",
          image: require("../images/leopard2.jpg"),
        },
        {
          id: 1,
          TitleName: "亚洲狮",
          StatusName: "濒危",
          image: require("../images/lion2.jpg"),
        },
        {
          id: 2,
          TitleName: "西伯利亚虎",
          StatusName: "濒危",
          image: require("../images/tiger2.jpg"),
        },
        {
          id: 3,
          TitleName: "棕熊",
          StatusName: "无危",
          image: require("../images/bear2.jpg"),
        },
      ],
    };
  },
});
body{
  margin: 0;
  padding: 0;
}
#app{
  margin: 0;
  padding: 0;
}
.contentgrid {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

Carousel

 <div id="app">
    <div
      class="contentgrid"
    >
     <Carousel
        ref="contentgrid"
        :dataArray="datatext"
        :loading="true"
        :shouldPause="true"
        @change="change"
      >
        <div slot="slidetitle" slot-scope="{ htmlText }">
          <div class="meta">物种</div>
          <h2 id="slide-title" ref="slidetitle">{{ htmlText.TitleName }}</h2>
        </div>
        <div slot="slidestatus" slot-scope="{ htmlText }">
          <div class="meta">保护现状</div>
          <div id="slide-status" ref="slidestatus">
            {{ htmlText.StatusName }}
          </div>
        </div>
      </Carousel>
    </div>
  </div>
import {Carousel} from "contentgrid"; 

components: {
    Carousel,
  },
data() {
    return {
      datatext: [
        {
          id: 0,
          TitleName: "远东豹",
          StatusName: "极度濒危",
          image: require("../images/leopard2.jpg"),
        },
        {
          id: 1,
          TitleName: "亚洲狮",
          StatusName: "濒危",
          image: require("../images/lion2.jpg"),
        },
        {
          id: 2,
          TitleName: "西伯利亚虎",
          StatusName: "濒危",
          image: require("../images/tiger2.jpg"),
        },
        {
          id: 3,
          TitleName: "棕熊",
          StatusName: "无危",
          image: require("../images/bear2.jpg"),
        },
      ],
    };
  },
});
body{
  margin: 0;
  padding: 0;
}
#app{
  margin: 0;
  padding: 0;
}
.contentgrid {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

Options ⚙️

Here are the available options for the plugin:

Parameter Description Type Values Default
dataArray Array to be rendered array — —
loading Whether to show loading animation boolean — true
pagination Whether to show switching buttons boolean — true
intensity Animation intensity Number 0.1-0.9 0.4

Additional properties for Contentgrid plugin:

Parameter Description Type Values Default
wheelEvents Whether to enable mouse wheel/touch swipe events boolean — true

Additional properties for Carousel plugin:

Parameter Description Type Values Default
autoplay Whether to auto-switch slides Boolean — true
shouldPause Whether to pause on mouse hover Boolean — false
interval Time interval for auto-switching Number — 3000

Events

Event Name Description Callback Parameters
change Triggered when switching slides Index of the currently active slide

Other

Not using slots

The slidetitle and slidestatus slots have limited customization options.

You can define your own text, for example:

<div>
    <div class="meta">Species</div>
    <h2 id="slide-title" ref="slidetitle">{{text}}</h2>
</div>

Import the dependency and use it in the change callback function:

import { TweenLite } from "gsap";
methods: {
    change(index) {
      //给按钮生成动画
      let slideTitleEl = this.$refs.slidetitle;
      if (slideTitleEl) {
        TweenLite.fromTo(
          slideTitleEl,
          0.5,
          {
            autoAlpha: 1,
            y: 0,
          },
          {
            autoAlpha: 0,
            y: 20,
            ease: "Expo.easeIn",
            onComplete: () => {
              this.text = "美洲豹";

              TweenLite.to(slideTitleEl, 0.5, {
                autoAlpha: 1,
                y: 0,
              });
            },
          }
        );
      }
    },
  },