炫酷jQuery+SVG遮罩轮播图特效

PetitQ 幻灯片/轮播 2018-11-08 2K 0 0

这是一款效果非常炫酷的 jQuery 和 SVG 遮罩轮播图特效。该轮播图特效使用 SVG 剪裁和遮罩技术，通过 snap.svg 插件制作轮播图图片过渡特效，支持移动手机，支持键盘控制和滑动控制。

使用方法

在页面中引入下面的 js 和 CSS 文件。

也想出现在这里？联系我们吧

```

```

<link rel="stylesheet" href="/path/to/bootstrap.min.css">

<link rel="stylesheet" href="css/slider.css">

<link rel="stylesheet" href="css/main.css">

```
 
```
```

```

<script src="/path/to/jquery-min.js"></script>

<script src="/path/to/jquery.mobile.custom.min.js"></script>

<script src="/path/to/snap.svg-min.js"></script>

<script src="/path/to/bootstrap.min.js"></script>

<script src="/path/to/TweenMax.min.js"></script>

```
<script src="js/slider.js"></script>
```

HTML 结构

该 jQuery 和 SVG 遮罩轮播图特效的 HTML 结构如下。

```
<div class="portfolio slider-wrapper">
```

  <ul class="slider" data-step1="M1402,800h-2V0h1c0.6,0,1,0.4,1,1V800z" data-step2="M1400,800H379L771.2,0H1399c0.6,0,1,0.4,1,1V800z" data-step3="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z" data-step4="M-2,800h2V0h-1c-0.6,0-1,0.4-1,1V800z" data-step5="M0,800h1021L628.8,0L1,0C0.4,0,0,0.4,0,1L0,800z" data-step6="M0,800h1400V0L1,0C0.4,0,0,0.4,0,1L0,800z">

```
 
```
```
      <li class="visible">
```
```
          <div class="svg-wrapper">
```

              <svg viewBox="0 0 1400 800">

```
                  <defs>
```

                      <clipPath id="image-1">

                          <path id="changing-path-1" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>

                      </clipPath>

```
                  </defs>           
```

                  <image height='100%' width="100%" clip-path="url(#image-1)" href="img/2.jpg"></image>

                  <div class="slider__info">

                      <p class="slider__title text">

                          <span class="text__first">

                              <span class="text__word">Karbokam</span>

                              <span class="text__first-bg" style="background-color: #3A7E94"></span>

```
                          </span>
```
```
                      </p>
```

                      <p class="slider__desc text">

                          <span class="text__second">

                              <span class="text__word">Production of technical carboxymethyl cellulose <br> (CMC) and polyanionic cellulose (PAC)</span>

                              <span class="text__second-bg" style="background-color: #E688A1"></span>

```
                          </span>
```
```
                      </p>
```
```
                  </div>
```

                  <div class="slider__link cd-slider-navigation">

                      <a href="#0" class="next-slide slider__site text">

                          <span class="text__first">

                              <span class="text__word">Visit karbokam.ru <img class="arrow" src="img/arrow.svg" alt=""></span>

                              <span class="text__first-bg" style="background-color: #3A7E94"></span>

```
                          </span>
```
```
                      </a>
```

                      <p class="slider__visit text">

                          <span class="text__second">

                              <span class="text__word">Official website</span>

                              <span class="text__second-bg" style="background-color: #E688A1"></span>

```
                          </span>
```
```
                      </p>
```
```
                  </div>
```
```
              </svg>
```
```
          </div> 
```
```
      </li>
```
```
 
```
```
      <li>
```
```
          <div class="svg-wrapper">
```

              <svg viewBox="0 0 1400 800">

```
                  <defs>
```

                      <clipPath id="image-2">

                          <path id="changing-path-2" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>

```
                      </clipPath>
```
```
                  </defs>
```

                  <image height='100%' width="100%" clip-path="url(#image-2)" href="img/1.jpg"></image>

```
 
```

                  <div class="slider__info">

                      <p class="slider__title text">

                          <span class="text__first">

                              <span class="text__word">UAZ KD</span>

                              <span class="text__first-bg" style="background-color: #535986"></span>

```
                          </span>
```
```
                      </p>
```

                      <p class="slider__desc text">

                          <span class="text__second">

                              <span class="text__word">Authorized distributor of UAZ (Ulyanovsk Automobile <br> Plant)</span>

                              <span class="text__second-bg" style="background-color: #DABDB2"></span>

```
                          </span>
```
```
                      </p>
```
```
 
```
```
                  </div>
```

                  <div class="slider__link cd-slider-navigation">

                      <a href="#0" class="next-slide slider__site text">

                          <span class="text__first">

                              <span class="text__word">Visit uaz159.ru<img class="arrow" src="img/arrow.svg" alt=""></span>

                              <span class="text__first-bg" style="background-color: #535986"></span>

```
                          </span>
```
```
                      </a>
```

                      <p class="slider__visit text">

                          <span class="text__second">

                              <span class="text__word">Official website</span>

                              <span class="text__second-bg" style="background-color: #DABDB2"></span>

```
                          </span>
```
```
                      </p>
```
```
                  </div>        
```
```
              </svg>
```
```
 
```
```
          </div> 
```
```
      </li>
```
```
 
```
```
      <li>
```
```
          <div class="svg-wrapper">
```

              <svg viewBox="0 0 1400 800">

```
                  <defs>
```

                      <clipPath id="image-3">

                          <path id="changing-path-3" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>

```
                      </clipPath>
```
```
                  </defs>
```

                  <image height='100%' width="100%" clip-path="url(#image-3)" href="img/3.jpg"></image>

```
 
```

                  <div class="slider__info">

                      <p class="slider__title text">

                          <span class="text__first">

                              <span class="text__word">Karbokam</span>

                              <span class="text__first-bg" style="background-color: #1ABDFE"></span>

```
                          </span>
```
```
                      </p>
```

                      <p class="slider__desc text">

                          <span class="text__second">

                              <span class="text__word">Production of technical carboxymethyl cellulose <br> (CMC) and polyanionic cellulose (PAC)</span>

                              <span class="text__second-bg" style="background-color: #CB1537"></span>

```
                          </span>
```
```
                      </p>
```
```
                  </div>
```

                  <div class="slider__link cd-slider-navigation">

                      <a href="#0" class="next-slide slider__site text">

                          <span class="text__first">

                              <span class="text__word">Visit karbokam.ru <img class="arrow" src="img/arrow.svg" alt=""></span>

                              <span class="text__first-bg" style="background-color: #1ABDFE"></span>

```
                          </span>
```
```
                      </a>
```

                      <p class="slider__visit text">

                          <span class="text__second">

                              <span class="text__word">Official website</span>

                              <span class="text__second-bg" style="background-color: #CB1537"></span>

```
                          </span>
```
```
                      </p>
```
```
                  </div>      
```
```
              </svg>
```
```
 
```
```
          </div> 
```
```
      </li>
```
```
 
```
```
  </ul> 
```
```
 
```
```
  <ol class="slider-controls">
```

        <li class="selected"><a href="#0"><em>Item 1</em></a></li>

      <li><a href="#0"><em>Item 2</em></a></li>

      <li><a href="#0"><em>Item 2</em></a></li>

```
    
```
```
  </ol> 
```
```
</div>
```

Github 地址：https://github.com/alikinvv/svg-mask-slider

炫酷 jQuery+SVG 遮罩轮播图特效

已有 500 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

炫酷jQuery+SVG遮罩轮播图特效

使用方法

HTML 结构

炫酷 jQuery+SVG 遮罩轮播图特效

相关文章

jQuery+CSS3炫酷可交互的图片墙特效

jBooklet - 简单翻书特效jQuery插件

仿易迅网焦点图片全屏幻灯片jQuery特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法

HTML 结构

炫酷 jQuery+SVG 遮罩轮播图特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复