当前位置：首页 > 网页特效 > 图像/媒体

基于HTML5 WebGL的图像扭曲变形动画特效

分类：图像/媒体日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
```html
<div id="app"></div>
<div id="itemsWrapper">
    <figure class="grid__item">
        <img class="grid__item-img" src="img/1.jpg" alt="An image" />
        <img class="grid__item-img grid__item-img--large" src="img/1_large.jpg" />
        <figcaption class="grid__item-caption">
            <h2 class="grid__item-title">Our Item Title</h2>
            <p class="grid__item-text">
                Our Item Description
            </p>
        </figcaption>
    </figure>
    ...
</div>
```
#####  javascript
```html
const transitionEffect = new GridToFullscreenEffect(
    document.getElementById("app"),
    document.getElementById("itemsWrapper"),
  {
      "duration":1.8,
      "timing":{"type":"sameEnd","props":{"latestStart":0.5,"reverse":true}},
      "activation":{"type":"snake","props":{"rows":4}},
      "transformation":{"type":"flipX"},
      "easings":{"toFullscreen":Quint.easeOut,"toGrid":Quint.easeOut}
  }
);
transitionEffect.init();
imagesLoaded(document.querySelectorAll("img"), instance => {
document.body.classList.remove("loading");
 
// Make Images sets for creating the textures.
let images = [];
for (var i = 0, imageSet = {}; i < instance.elements.length; i++) {
    let image = {
        element: instance.elements[i],
        image: instance.images[i].isLoaded ? instance.images[i].img : null
    };
    if (i % 2 === 0) {
        imageSet = {};
        imageSet.small = image;
    }
 
    if (i % 2 === 1) {
        imageSet.large = image;
        images.push(imageSet);
    }
}
configurator.effect.createTextures(images);
});
```

web299.com

基于HTML5 WebGL的图像扭曲变形动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果