一款超炫的图片排列特效

今天给大家分享一款超炫的图片排列特效。页面加载时。图片纵向堆叠在页面中，当鼠标单击toggle按钮时，图片依次展开。铺满整个网页。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div class="t-container">
        <div class="t-content">
            <img class="t-img" src="img00.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img01.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img02.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img03.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img04.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img05.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img06.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img07.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img08.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img09.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img10.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
        <div class="t-content">
            <img class="t-img" src="img11.jpg"
                alt="" />
            <div class="cover">
            </div>
        </div>
    </div>
    <div class="container">
        <button type="button" class="btn btn-primary" id="toggle">
            Toggle</button>
    </div>

css3代码：

   body
        {
            overflow: hidden;
        }
        
        canvas
        {
            width: 100%;
            height: 100%;
        }
        
        .t-container
        {
            position: absolute;
            top: 0;
            left: 0;
        }
        .t-container .t-content
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 400px;
            height: 225px;
        }
        .t-container .t-content img
        {
            position: absolute;
            width: 400px;
            height: 225px;
        }
        .t-container .t-content .cover
        {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.75);
            width: 400px;
            height: 225px;
        }
        
        .container
        {
            position: absolute;
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            left: 50%;
            bottom: 50px;
        }
        .container .btn
        {
            z-index: 9999;
        }

js代码：

  function createGrid(transform, xx, yy, isHorizon) {
            var elemWidth, elemHeight;

            if (isHorizon) {
                elemWidth = window.innerWidth / 4;
                elemHeight = window.innerHeight / 3;
            } else {
                elemWidth = window.innerWidth / 3;
                elemHeight = window.innerHeight / 4;
            }

            var xPos = elemWidth * xx;
            var yPos = elemHeight * yy;


            var curTopLeft = { x: transform.topLeft.x, y: transform.topLeft.y };
            var curTopRight = { x: transform.topRight.x, y: transform.topRight.y };
            var curBotLeft = { x: transform.bottomLeft.x, y: transform.bottomLeft.y };
            var curBotRight = { x: transform.bottomRight.x, y: transform.bottomRight.y };

            var targetTopLeft = { x: xPos, y: yPos };
            var targetTopRight = { x: xPos + elemWidth, y: yPos };
            var targetBotLeft = { x: xPos, y: yPos + elemHeight };
            var targetBotRight = { x: xPos + elemWidth, y: yPos + elemHeight };

            var curObject = { rate0: 1, rate1: 1, rate2: 1, rate3: 1, rate4: 1 };

            function onUpdateGridHandler() {
                var tempTopLeftX = curTopLeft.x * curObject.rate + targetTopLeft.x * (1 - curObject.rate);
                var tempTopLeftY = curTopLeft.y * curObject.rate + targetTopLeft.y * (1 - curObject.rate);

                var tempTopRightX = curTopRight.x * curObject.rate + targetTopRight.x * (1 - curObject.rate);
                var tempTopRightY = curTopRight.y * curObject.rate + targetTopRight.y * (1 - curObject.rate);

                var tempBotLeftX = curBotLeft.x * curObject.rate + targetBotLeft.x * (1 - curObject.rate);
                var tempBotLeftY = curBotLeft.y * curObject.rate + targetBotLeft.y * (1 - curObject.rate);

                var tempBotRightX = curBotRight.x * curObject.rate + targetBotRight.x * (1 - curObject.rate);
                var tempBotRightY = curBotRight.y * curObject.rate + targetBotRight.y * (1 - curObject.rate);

                transform.topLeft.x = tempTopLeftX;
                transform.topLeft.y = tempTopLeftY;

                transform.topRight.x = tempTopRightX;
                transform.topRight.y = tempTopRightY;

                transform.bottomLeft.x = tempBotLeftX;
                transform.bottomLeft.y = tempBotLeftY;

                transform.bottomRight.x = tempBotRightX;
                transform.bottomRight.y = tempBotRightY;

            }

            function onUpdate0GridHandler() {

                var tempTopLeftX = curTopLeft.x * curObject.rate0 + targetTopLeft.x * (1 - curObject.rate0);
                var tempTopLeftY = curTopLeft.y * curObject.rate0 + targetTopLeft.y * (1 - curObject.rate0);

                transform.topLeft.x = tempTopLeftX;
                transform.topLeft.y = tempTopLeftY;
            }

            function onUpdate1GridHandler() {

                var tempTopRightX = curTopRight.x * curObject.rate1 + targetTopRight.x * (1 - curObject.rate1);
                var tempTopRightY = curTopRight.y * curObject.rate1 + targetTopRight.y * (1 - curObject.rate1);


                transform.topRight.x = tempTopRightX;
                transform.topRight.y = tempTopRightY;

            }

            function onUpdate2GridHandler() {

                var tempBotLeftX = curBotLeft.x * curObject.rate2 + targetBotLeft.x * (1 - curObject.rate2);
                var tempBotLeftY = curBotLeft.y * curObject.rate2 + targetBotLeft.y * (1 - curObject.rate2);

                transform.bottomLeft.x = tempBotLeftX;
                transform.bottomLeft.y = tempBotLeftY;

            }

            function onUpdate3GridHandler() {

                var tempBotRightX = curBotRight.x * curObject.rate3 + targetBotRight.x * (1 - curObject.rate3);
                var tempBotRightY = curBotRight.y * curObject.rate3 + targetBotRight.y * (1 - curObject.rate3);

                transform.bottomRight.x = tempBotRightX;
                transform.bottomRight.y = tempBotRightY;

            }

            TweenLite.to(curObject, .4, { rate0: 0, onUpdate: onUpdate0GridHandler, ease: "Power2.easeOut" });
            TweenLite.to(curObject, .4, { rate1: 0, onUpdate: onUpdate1GridHandler, ease: "Power1.easeOut" });
            TweenLite.to(curObject, .4, { rate2: 0, onUpdate: onUpdate2GridHandler, ease: "Power4.easeOut" });
            TweenLite.to(curObject, .4, { rate3: 0, onUpdate: onUpdate3GridHandler, ease: "Power3.easeOut" });

            //console.log(transform)
            var cover = $(transform.element).find(".cover")[0]
            TweenLite.to(cover, .4, { opacity: 0, ease: "Power1.easeOut" });
        }
        function pileElement(transform, num, maxNumber) {
            var windowWidth = window.innerWidth;
            var windowHeight = window.innerHeight;

            // -----------------------------

            var camera = {
                focus: 400,
                self: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                rotate: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                up: {
                    x: 0,
                    y: 1,
                    z: 0
                },
                zoom: 1,
                display: {
                    x: width / 2,
                    y: height / 2,
                    z: 0
                }
            };

            // ================================

            var y = -10 * (num + 1) + window.innerHeight / 2 * .8;
            var width = 400;
            var height = 400 * 9 / 16;
            var topLeftPos = { x: -width / 2, z: -height };
            var topRightPos = { x: width / 2, z: -height };
            var botLeftPos = { x: -width / 2, z: 0 };
            var botRightPos = { x: width / 2, z: 0 };

            var topScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - topLeftPos.z)) * camera.zoom;
            var botScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - botLeftPos.z)) * camera.zoom; //console.log("topScale: " + topScale); //console.log("BotScale: " + botScale);

            var targetTopLeftX = topScale * topLeftPos.x;
            var targetTopLeftY = topScale * y;

            var targetTopRightX = topScale * topRightPos.x;
            var targetTopRightY = topScale * y;

            var targetBotLeftX = botScale * botLeftPos.x;
            var targetBotLeftY = botScale * y;

            var targetBotRightX = botScale * botRightPos.x;
            var targetBotRightY = botScale * y;

            var halfWidth = window.innerWidth / 2;
            var halfHeight = window.innerHeight / 2;

            // --------------------------------------

            transform.topLeft.x = targetTopLeftX + halfWidth;
            transform.topLeft.y = targetTopLeftY + halfHeight;


            transform.topRight.x = targetTopRightX + halfWidth;
            transform.topRight.y = targetTopRightY + halfHeight;

            transform.bottomLeft.x = targetBotLeftX + halfWidth;
            transform.bottomLeft.y = targetBotLeftY + halfHeight;

            transform.bottomRight.x = targetBotRightX + halfWidth;
            transform.bottomRight.y = targetBotRightY + halfHeight;


        };

        function createPile(transform, num) {
            var windowWidth = window.innerWidth;
            var windowHeight = window.innerHeight;

            // -----------------------------

            var camera = {
                focus: 400,
                self: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                rotate: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                up: {
                    x: 0,
                    y: 1,
                    z: 0
                },
                zoom: 1,
                display: {
                    x: width / 2,
                    y: height / 2,
                    z: 0
                }
            };

            // ================================
            var halfWidth = window.innerWidth / 2;
            var halfHeight = window.innerHeight / 2;

            var y = -10 * (num + 1) + window.innerHeight / 2 * .8;
            var width = 400;
            var height = 400 * 9 / 16;
            var topLeftPos = { x: -width / 2, z: -height };
            var topRightPos = { x: width / 2, z: -height };
            var botLeftPos = { x: -width / 2, z: 0 };
            var botRightPos = { x: width / 2, z: 0 };

            var topScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - topLeftPos.z)) * camera.zoom;
            var botScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - botLeftPos.z)) * camera.zoom; //console.log("topScale: " + topScale); //console.log("BotScale: " + botScale);

            var targetTopLeftX = topScale * topLeftPos.x + halfWidth;
            var targetTopLeftY = topScale * y + halfHeight;

            var targetTopRightX = topScale * topRightPos.x + halfWidth;
            var targetTopRightY = topScale * y + halfHeight;

            var targetBotLeftX = botScale * botLeftPos.x + halfWidth;
            var targetBotLeftY = botScale * y + halfHeight;

            var targetBotRightX = botScale * botRightPos.x + halfWidth;
            var targetBotRightY = botScale * y + halfHeight;

            var curTopLeft = { x: transform.topLeft.x, y: transform.topLeft.y };
            var curTopRight = { x: transform.topRight.x, y: transform.topRight.y };
            var curBotLeft = { x: transform.bottomLeft.x, y: transform.bottomLeft.y };
            var curBotRight = { x: transform.bottomRight.x, y: transform.bottomRight.y };

            var targetTopLeft = { x: targetTopLeftX, y: targetTopLeftY };
            var targetTopRight = { x: targetTopRightX, y: targetTopRightY };
            var targetBotLeft = { x: targetBotLeftX, y: targetBotLeftY };
            var targetBotRight = { x: targetBotRightX, y: targetBotRightY };

            var curObject = { rate0: 1, rate1: 1, rate2: 1, rate3: 1, rate4: 1 };


            function onUpdate0GridHandler() {

                var tempTopLeftX = curTopLeft.x * curObject.rate0 + targetTopLeft.x * (1 - curObject.rate0);
                var tempTopLeftY = curTopLeft.y * curObject.rate0 + targetTopLeft.y * (1 - curObject.rate0);

                transform.topLeft.x = tempTopLeftX;
                transform.topLeft.y = tempTopLeftY;
            }

            function onUpdate1GridHandler() {

                var tempTopRightX = curTopRight.x * curObject.rate1 + targetTopRight.x * (1 - curObject.rate1);
                var tempTopRightY = curTopRight.y * curObject.rate1 + targetTopRight.y * (1 - curObject.rate1);


                transform.topRight.x = tempTopRightX;
                transform.topRight.y = tempTopRightY;

            }

            function onUpdate2GridHandler() {

                var tempBotLeftX = curBotLeft.x * curObject.rate2 + targetBotLeft.x * (1 - curObject.rate2);
                var tempBotLeftY = curBotLeft.y * curObject.rate2 + targetBotLeft.y * (1 - curObject.rate2);

                transform.bottomLeft.x = tempBotLeftX;
                transform.bottomLeft.y = tempBotLeftY;

            }

            function onUpdate3GridHandler() {

                var tempBotRightX = curBotRight.x * curObject.rate3 + targetBotRight.x * (1 - curObject.rate3);
                var tempBotRightY = curBotRight.y * curObject.rate3 + targetBotRight.y * (1 - curObject.rate3);

                transform.bottomRight.x = tempBotRightX;
                transform.bottomRight.y = tempBotRightY;

            }


            TweenLite.to(curObject, .4, { rate0: 0, onUpdate: onUpdate0GridHandler, ease: "Power1.easeOut" });
            TweenLite.to(curObject, .4, { rate1: 0, onUpdate: onUpdate1GridHandler, ease: "Power1.easeOut" });
            TweenLite.to(curObject, .4, { rate2: 0, onUpdate: onUpdate2GridHandler, ease: "Power3.easeOut" });
            TweenLite.to(curObject, .4, { rate3: 0, onUpdate: onUpdate3GridHandler, ease: "Power3.easeOut" });


            var cover = $(transform.element).find(".cover")[0];
            TweenLite.to(cover, .4, { opacity: 1, ease: "Power1.easeIn" });


            // --------------------------------------

            /*
            transform.topLeft.x = targetTopLeftX + halfWidth;
            transform.topLeft.y = targetTopLeftY + halfHeight;


            transform.topRight.x = targetTopRightX + halfWidth;
            transform.topRight.y = targetTopRightY + halfHeight;

            transform.bottomLeft.x = targetBotLeftX + halfWidth;
            transform.bottomLeft.y = targetBotLeftY + halfHeight;

            transform.bottomRight.x = targetBotRightX + halfWidth;
            transform.bottomRight.y = targetBotRightY + halfHeight;*/


        };


        (function () {
            // create PerspectiveTransfrom
            var elem = document.getElementById("t-content00");
            var width = 400;
            var height = 225;
            var useBackFacing = true;
            var curCount;
            var $elem = $(".t-content");
            var isHorizon = false;
            var isAnimation = true;
            var isOpen = true;
            if (window.innerWidth > window.innerHeight) isHorizon = true;



            var transformArr = [];

            //console.log(typeof $elem);
            $elem.each(function (index) {
                var transform = new PerspectiveTransform(this, width, height, true);
                transformArr.push(transform);
            });

            curCount = transformArr.length - 1;

            //

            $elem.each(function (index) {
                var transform = transformArr[index]
                pileElement(transform, index);
            });

            function animation() {
                isAnimation = true;
                var transformCount = transformArr.length - curCount - 1;
                var xx, yy;

                if (isHorizon) {
                    xx = transformCount % 4;
                    yy = parseInt(transformCount / 4);
                } else {
                    xx = transformCount % 3;
                    yy = parseInt(transformCount / 3);
                }

                createGrid(transformArr[curCount], xx, yy, isHorizon);

                curCount--;
                if (curCount >= 0) {

                    setTimeout(animation, 100);
                }
                else isAnimation = false;
            }


            function animation2() {
                isAnimation = true;

                createPile(transformArr[curCount], curCount)

                curCount++;
                if (curCount <= transformArr.length - 1) setTimeout(animation2, 50);
                else isAnimation = false;
            };




            function loop() {

                $elem.each(function (index) {
                    transformArr[index].update();
                });

                requestAnimationFrame(loop);
            };

            loop();

            setTimeout(animation, 500);


            $("#toggle").click(function (ev) {
                if (!isAnimation) {

                    if (isOpen) {
                        curCount = 0;
                        animation2();
                    }
                    else {
                        curCount = transformArr.length - 1;
                        animation();
                    }

                    isOpen = !isOpen;
                }
            });
        })();

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/11827