JavaScript中的现代动画3D图像轮播组件
栏目分类:幻灯片 / 轮播图   发布日期:2021-10-05   浏览次数:

一个现代的动画图像滑块/旋转木马,可在 3D 空间中旋转图像。

基于imageloaded和GSAP JavaScript 库。

使用:

1. 将图像以及导航图标和图像描述添加到轮播中。

<div class="app">
    <div class="cardList">
        <button class="cardList__btn btn btn--left">
            <div class="icon"><svg><use xlink:href="#arrow-left"></use></svg></div>
        </button>
 
        <div class="cards__wrapper">
            <div class="card current--card"><div class="card__image"><img src="1.jpg" alt="" /></div></div>
            <div class="card next--card"><div class="card__image"><img src="2.jpg" alt="" /></div></div>
            <div class="card previous--card"><div class="card__image"><img src="3.jpg" alt="" /></div></div>
        </div>
 
        <button class="cardList__btn btn btn--right">
            <div class="icon"><svg><use xlink:href="#arrow-right"></use></svg></div>
        </button>
    </div>
 
    <div class="infoList">
        <div class="info__wrapper">
            <div class="info current--info">
                <h1 class="text name">图片 1</h1>
                <h4 class="text location">副标题 1</h4>
                <p class="text description">图片描述 1</p>
            </div>
 
            <div class="info next--info">
                <h1 class="text name">图片 2</h1>
                <h4 class="text location">副标题 2</h4>
                <p class="text description">图片描述 2</p>
            </div>
 
            <div class="info previous--info">
                <h1 class="text name">图片 3</h1>
                <h4 class="text location">副标题 3</h4>
                <p class="text description">图片描述 3</p>
            </div>
        </div>
    </div>
    <div class="app__bg">
        <div class="app__bg__image current--image"><img src="1.jpg" alt="" /></div>
        <div class="app__bg__image next--image"><img src="2.jpg" alt="" /></div>
        <div class="app__bg__image previous--image"><img src="3.jpg" alt="" /></div>
    </div>
</div>

2. 为加载器编写 HTML 代码。

<div class="loading__wrapper">
  <div class="loader--text">正在加载...</div>
  <div class="loader">
    <span></span>
  </div>
</div>

3. 从 CDN 加载所需的 imageloaded 和 GSAP JavaScript 库。

<script src="/path/to/cdn/imagesloaded.pkgd.min.js"></script>
<script src="/path/to/cdn/gsap.min.js"></script>

4. 在文档中加载主样式表和 JavaScript。完毕。

<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>


官方网站:https://github.com/Epic-programmer-official/Animated-Slider

相关热词: 旋转木马

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库