HTML5 GSAP图像栅格化切片翻转动画特效

h5, slice, 图像效果

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2768
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var options = {
    imgSrc1: "/uploads/161001/normal1.jpg",
    imgSrc2: "/uploads/161001/normal2.jpg",
    containerName: "placeholder",
    columns: 16,
    margin: 3
}

function VenetianBlinds(defaults) {
    var cols = defaults.columns;
    var margin = defaults.margin;
    var img1 = defaults.imgSrc1;
    var img2 = defaults.imgSrc2;
    var placeholder = document.getElementsByClassName(defaults.containerName)[0];
    var directionX, directionY;

var column, blind, blindImg;
    var bgImg, rot;
    var colL;
    var colW = (placeholder.offsetWidth / cols) - margin;
    for (var i = 0; i < cols; i++) {
        colL = ((colW + margin) * i);

column = document.createElement('div');
        column.className = "column";
        column.style.width = colW + "px";
        column.style.left = colL + "px";
        placeholder.appendChild(column);

for (var j = 0; j < 4; j++) {
            blind = document.createElement('div');
            blind.className = "blind";
            blind.style.width = colW + "px";
            blindImg = document.createElement('div');
            blindImg.className = "blindImg";

switch (j) {
                case 0:
                    TweenMax.set(blind, {
                        rotationY: "0"
                    });
                    bgImg = img1;
                    break;
                case 1:
                    TweenMax.set(blind, {
                        rotationY: "90"
                    });
                    bgImg = img2;
                    break;
                case 2:
                    TweenMax.set(blind, {
                        rotationY: "180"
                    });
                    bgImg = img1;
                    break;
                case 3:
                    TweenMax.set(blind, {
                        rotationY: "270"
                    });
                    bgImg = img2;
                    break;
            }
            blindImg.style.width = placeholder.offsetWidth + "px";
            blindImg.style.backgroundImage = "url(" + bgImg + ")";
            blindImg.style.left = -colL + "px";

column.appendChild(blind);
            blind.appendChild(blindImg);

TweenMax.set(blind, {
                transformOrigin: "50% 50% " + -colW / 2,
                transformStyle: "preserve-3d"
            });
        }

TweenMax.set(column, {
            transformStyle: "preserve-3d",
            transformPerspective: 1000,
            rotationY: 0
        });

column.addEventListener("mouseenter", function(event) {
            var elem = event.currentTarget;
            var rotY = elem._gsTransform.rotationY;

if (directionX > 0) {
                TweenMax.to(elem, 1, {
                    rotationY: Math.floor(rotY / 90) * 90 + 90,
                    transformOrigin: "50% 50% -" + colW / 2,
                    ease: Back.easeOut
                });
            } else {
                TweenMax.to(elem, 1, {
                    rotationY: Math.floor(rotY / 90) * 90 - 90,
                    transformOrigin: "50% 50% -" + colW / 2,
                    ease: Back.easeOut
                });
            }
        })
    }
    document.addEventListener('mousemove', function(event) {
        directionX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
        directionY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
    });
}

VenetianBlinds(options);

编译

CSS

HTML

h5, slice, 图像效果

编辑器支持Emmet

快捷键

h5, slice, 图像效果

HTML5 GSAP带彩色碎片（纸屑）化特效的文本打字动画

HTML5 GSAP在图片上生成涟漪波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：