一款超炫的图片排列特效

今天给大家分享一款超炫的图片排列特效。页面加载时。图片纵向堆叠在页面中，当鼠标单击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