{"id":1946,"date":"2019-04-10T23:10:41","date_gmt":"2019-04-10T17:10:41","guid":{"rendered":"http:\/\/themestrace.com\/tracem\/home-animated-slide-copy\/"},"modified":"2019-04-10T23:10:41","modified_gmt":"2019-04-10T17:10:41","slug":"home-animated-slide","status":"publish","type":"page","link":"https:\/\/www.creativedial.in\/?page_id=1946","title":{"rendered":"Home  Animated Slide"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1946\" class=\"elementor elementor-1946 elementor-bc-flex-widget\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9550784 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"9550784\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c3e533c\" data-id=\"c3e533c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-79cf876 elementor-widget elementor-widget-tracem-slider\" data-id=\"79cf876\" data-element_type=\"widget\" data-widget_type=\"tracem-slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- ============================================================================ -->\n<!-- ============================ Home Pieces Slider ============================ -->\n<!-- ============================================================================ -->\n\n\n\n<!-- Pieces Slider -->\n<div class=\"pieces-slider\" data-font-family=\"FuturaPTMedium\">\n    <!-- Each slide with corresponding image and text -->\n        <div class=\"pieces-slider__slide\">\n        <img decoding=\"async\" class=\"pieces-slider__image\" src=\"https:\/\/www.creativedial.in\/wp-content\/uploads\/2019\/03\/home-caro-7.jpg\" alt=\"The Elemental Male\">\n        <h2 class=\"pieces-slider__text\">The Elemental Male<\/h2>    <\/div>\n        <div class=\"pieces-slider__slide\">\n        <img decoding=\"async\" class=\"pieces-slider__image\" src=\"https:\/\/www.creativedial.in\/wp-content\/uploads\/2019\/03\/home-caro-2.jpg\" alt=\"The Flowers&#8217;s Rose\">\n        <h2 class=\"pieces-slider__text\">The Flowers&#8217;s Rose<\/h2>    <\/div>\n        <div class=\"pieces-slider__slide\">\n        <img decoding=\"async\" class=\"pieces-slider__image\" src=\"https:\/\/www.creativedial.in\/wp-content\/uploads\/2019\/03\/home-caro-3.jpg\" alt=\"The Darkness of Eyes\">\n        <h2 class=\"pieces-slider__text\">The Darkness of Eyes<\/h2>    <\/div>\n        <div class=\"pieces-slider__slide\">\n        <img decoding=\"async\" class=\"pieces-slider__image\" src=\"https:\/\/www.creativedial.in\/wp-content\/uploads\/2019\/03\/home-caro-4.jpg\" alt=\"The Lord of Secret\">\n        <h2 class=\"pieces-slider__text\">The Lord of Secret<\/h2>    <\/div>\n        <!-- Canvas to draw the pieces -->\n    <canvas class=\"pieces-slider__canvas\"><\/canvas>\n    <!-- Slider buttons: prev and next -->\n    <button class=\"pieces-slider__button pieces-slider__button--prev\"><span class=\"ti-arrow-left\"><\/span><\/button>\n    <button class=\"pieces-slider__button pieces-slider__button--next\"><span class=\"ti-arrow-right\"><\/span><\/button>\n<\/div>\t    <script>\n\t        ;(function($){\n\t            \"use strict\";\n\t            $(document).ready(function () {\n\t\t\t\t\t(function() {\n\n\t\t\t\t\t    \/\/ Get all images and texts, get the `canvas` element, and save slider length\n\t\t\t\t\t    var sliderCanvas = document.querySelector('.pieces-slider__canvas');\n\t\t\t\t\t    var imagesEl = [].slice.call(document.querySelectorAll('.pieces-slider__image'));\n\t\t\t\t\t    var textEl = [].slice.call(document.querySelectorAll('.pieces-slider__text'));\n\t\t\t\t\t    var slidesLength = imagesEl.length;\n\n\t\t\t\t\t    \/\/ Define indexes related variables and functions\n\t\t\t\t\t    var currentIndex = 0, currentImageIndex, currentTextIndex, currentNumberIndex;\n\t\t\t\t\t    \/\/ Update current indexes for image, text and number\n\t\t\t\t\t    function updateIndexes() {\n\t\t\t\t\t        currentImageIndex = currentIndex * 3;\n\t\t\t\t\t        currentTextIndex = currentImageIndex + 1;\n\t\t\t\t\t        currentNumberIndex = currentImageIndex + 2;\n\t\t\t\t\t    }\n\t\t\t\t\t    updateIndexes();\n\t\t\t\t\t    var textIndexes = [];\n\t\t\t\t\t    var numberIndexes = [];\n\n\t\t\t\t\t    \/\/ Some other useful variables\n\t\t\t\t\t    var windowWidth = window.innerWidth;\n\t\t\t\t\t    var piecesSlider;\n\n\t\t\t\t\t    \/\/ Options for images\n\t\t\t\t\t    var imageOptions = {\n\t\t\t\t\t        angle: 45,\n\t\t\t\t\t        extraSpacing: {extraX: 100, extraY: 200},\n\t\t\t\t\t        piecesWidth: function() { return Pieces.random(50, 200); },\n\t\t\t\t\t        ty: function() { return Pieces.random(-400, 400); }\n\t\t\t\t\t    };\n\n\t\t\t\t\t    \/\/ Options for texts\n\t\t\t\t\t    var textOptions = {\n\t\t\t\t\t        color: 'white',\n\t\t\t\t\t        backgroundColor: '#121212',\n\t\t\t\t\t        fontSize: function() { return windowWidth > 720 ? 50 : 30; },\n\t\t\t\t\t        padding: '15 20 10 20',\n\t\t\t\t\t        angle: -45,\n\t\t\t\t\t        piecesSpacing: 2,\n\t\t\t\t\t        extraSpacing: {extraX: 0, extraY: 300},\n\t\t\t\t\t        piecesWidth: function() { return Pieces.random(50, 200); },\n\t\t\t\t\t        ty: function() { return Pieces.random(-200, 200); },\n\t\t\t\t\t        translate: function() {\n\t\t\t\t\t            if (windowWidth > 1120) return {translateX: 230, translateY: 230};\n\t\t\t\t\t            if (windowWidth > 720) return {translateX: 0, translateY: 200};\n\t\t\t\t\t            if (windowWidth > 670) return {translateX: 100, translateY: 220};\n\t\t\t\t\t            return {translateX: 0, translateY: 100};\n\t\t\t\t\t        }\n\t\t\t\t\t    };\n\n\t\t\t\t\t    \/\/ Options for numbers\n\t\t\t\t\t    var numberOptions = {\n\t\t\t\t\t        color: 'white',\n\t\t\t\t\t        backgroundColor: '#121212',\n\t\t\t\t\t        fontSize: function() { return windowWidth > 720 ? 60 : 20; },\n\t\t\t\t\t        padding: function() { return windowWidth > 720 ? '18 35 10 38' : '18 25 10 28'; },\n\t\t\t\t\t        angle: 0,\n\t\t\t\t\t        piecesSpacing: 2,\n\t\t\t\t\t        extraSpacing: {extraX: 10, extraY: 10},\n\t\t\t\t\t        piecesWidth: 35,\n\t\t\t\t\t        ty: function() { return Pieces.random(-200, 200); },\n\t\t\t\t\t        translate: function() {\n\t\t\t\t\t            if (windowWidth > 1120) return {translateX: -390, translateY: -230};\n\t\t\t\t\t            if (windowWidth > 720) return {translateX: -240, translateY: -180};\n\t\t\t\t\t            if (windowWidth > 670) return {translateX: -250, translateY: -220};\n\t\t\t\t\t            return {translateX: -140, translateY: -100};\n\t\t\t\t\t        }\n\t\t\t\t\t    };\n\n\t\t\t\t\t    \/\/ Build the array of items to draw using Pieces\n\t\t\t\t\t    var items = [];\n\t\t\t\t\t    var imagesReady = 0;\n\t\t\t\t\t    for (var i = 0; i < slidesLength; i++) {\n\t\t\t\t\t        \/\/ Wait for all images to load before initializing the slider and event listeners\n\t\t\t\t\t        var slideImage = new Image();\n\t\t\t\t\t        slideImage.onload = function() {\n\t\t\t\t\t            if (++imagesReady == slidesLength) {\n\t\t\t\t\t                initSlider();\n\t\t\t\t\t                initEvents();\n\t\t\t\t\t            }\n\t\t\t\t\t        };\n\t\t\t\t\t        \/\/ Push all elements for each slide with the corresponding options\n\t\t\t\t\t        items.push({type: 'image', value: imagesEl[i], options: imageOptions});\n\t\t\t\t\t        items.push({type: 'text', value: textEl[i].innerText, options: textOptions});\n\t\t\t\t\t        items.push({type: 'text', value: i + 1, options: numberOptions});\n\t\t\t\t\t        \/\/ Save indexes\n\t\t\t\t\t        textIndexes.push(i * 3 + 1);\n\t\t\t\t\t        numberIndexes.push(i * 3 + 2);\n\t\t\t\t\t        \/\/ Set image src\n\t\t\t\t\t        slideImage.src = imagesEl[i].src;\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ Initialize a Pieces instance with all items we want to draw\n\t\t\t\t\t    function initSlider() {\n\t\t\t\t\t        \/\/ Stop any current animation if the slider was initialized before\n\t\t\t\t\t        if (piecesSlider) {\n\t\t\t\t\t            piecesSlider.stop();\n\t\t\t\t\t        }\n\n\t\t\t\t\t        var fontFamily = jQuery('.pieces-slider').data('font-family');\n\t\t\t\t\t        \/\/ Save the new Pieces instance\n\t\t\t\t\t        piecesSlider = new Pieces({\n\t\t\t\t\t            canvas: sliderCanvas,\n\t\t\t\t\t            items: items,\n\t\t\t\t\t            x: 'centerAll',\n\t\t\t\t\t            y: 'centerAll',\n\t\t\t\t\t            piecesSpacing: 1,\n\t\t\t\t\t            fontFamily: [fontFamily],\n\t\t\t\t\t            animation: {\n\t\t\t\t\t                duration: function() { return Pieces.random(1000, 2000); },\n\t\t\t\t\t                easing: 'easeOutQuint'\n\t\t\t\t\t            },\n\t\t\t\t\t            \/\/ debug: true\n\t\t\t\t\t        });\n\n\t\t\t\t\t        \/\/ Animate all numbers to rotate clockwise indefinitely\n\t\t\t\t\t        piecesSlider.animateItems({\n\t\t\t\t\t            items: numberIndexes,\n\t\t\t\t\t            duration: 20000,\n\t\t\t\t\t            angle: 360,\n\t\t\t\t\t            loop: true\n\t\t\t\t\t        });\n\n\t\t\t\t\t        \/\/ Show current items: image, text and number\n\t\t\t\t\t        showItems();\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ Init Event Listeners\n\t\t\t\t\t    function initEvents() {\n\t\t\t\t\t        \/\/ Select prev or next slide using buttons\n\t\t\t\t\t        document.querySelector('.pieces-slider__button--prev').addEventListener('click', prevItem);\n\t\t\t\t\t        document.querySelector('.pieces-slider__button--next').addEventListener('click', nextItem);\n\n\t\t\t\t\t        \/\/ Select prev or next slide using arrow keys\n\t\t\t\t\t        document.addEventListener('keydown', function (e) {\n\t\t\t\t\t            if (e.keyCode == 37) { \/\/ left\n\t\t\t\t\t                prevItem();\n\t\t\t\t\t            } else if (e.keyCode == 39) { \/\/ right\n\t\t\t\t\t                nextItem();\n\t\t\t\t\t            }\n\t\t\t\t\t        });\n\n\t\t\t\t\t        \/\/ Handle `resize` event\n\t\t\t\t\t        window.addEventListener('resize', resizeStart);\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ Show current items: image, text and number\n\t\t\t\t\t    function showItems() {\n\t\t\t\t\t        \/\/ Show image pieces\n\t\t\t\t\t        piecesSlider.showPieces({items: currentImageIndex, ignore: ['tx'], singly: true, update: (anim) => {\n\t\t\t\t\t            \/\/ Stop the pieces animation at 60%, and run a new indefinitely animation of `ty` for each piece\n\t\t\t\t\t            if (anim.progress > 60) {\n\t\t\t\t\t                var piece = anim.animatables[0].target;\n\t\t\t\t\t                var ty = piece.ty;\n\t\t\t\t\t                anime.remove(piece);\n\t\t\t\t\t                anime({\n\t\t\t\t\t                    targets: piece,\n\t\t\t\t\t                    ty: piece.h_ty < 300\n\t\t\t\t\t                        ? [{value: ty + 10, duration: 1000}, {value: ty - 10, duration: 2000}, {value: ty, duration: 1000}]\n\t\t\t\t\t                        : [{value: ty - 10, duration: 1000}, {value: ty + 10, duration: 2000}, {value: ty, duration: 1000}],\n\t\t\t\t\t                    duration: 2000,\n\t\t\t\t\t                    easing: 'linear',\n\t\t\t\t\t                    loop: true\n\t\t\t\t\t                });\n\t\t\t\t\t            }\n\t\t\t\t\t        }});\n\t\t\t\t\t        \/\/ Show pieces for text and number, using alternate `ty` values\n\t\t\t\t\t        piecesSlider.showPieces({items: currentTextIndex});\n\t\t\t\t\t        piecesSlider.showPieces({items: currentNumberIndex, ty: function(p, i) { return p.s_ty - [-3, 3][i % 2]; }});\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ Hide current items: image, text and number\n\t\t\t\t\t    function hideItems() {\n\t\t\t\t\t        piecesSlider.hidePieces({items: [currentImageIndex, currentTextIndex, currentNumberIndex]});\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ Select the prev item: hide current items, update indexes, and show the new current item\n\t\t\t\t\t    function prevItem() {\n\t\t\t\t\t        hideItems();\n\t\t\t\t\t        currentIndex = currentIndex > 0 ? currentIndex - 1 : slidesLength - 1;\n\t\t\t\t\t        updateIndexes();\n\t\t\t\t\t        showItems();\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ Select the next item: hide current items, update indexes, and show the new current item\n\t\t\t\t\t    function nextItem() {\n\t\t\t\t\t        hideItems();\n\t\t\t\t\t        currentIndex = currentIndex < slidesLength - 1 ? currentIndex + 1 : 0;\n\t\t\t\t\t        updateIndexes();\n\t\t\t\t\t        showItems();\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ Handle `resize` event\n\t\t\t\t\t    \n\t\t\t\t\t    var initial = true, hideTimer, resizeTimer;\n\n\t\t\t\t\t    \/\/ User starts resizing, so wait 300 ms before reinitialize the slider\n\t\t\t\t\t    function resizeStart() {\n\t\t\t\t\t        if (initial) {\n\t\t\t\t\t            initial = false;\n\t\t\t\t\t            if (hideTimer) clearTimeout(hideTimer);\n\t\t\t\t\t            sliderCanvas.classList.add('pieces-slider__canvas--hidden');\n\t\t\t\t\t        }\n\t\t\t\t\t        if (resizeTimer) clearTimeout(resizeTimer);\n\t\t\t\t\t        resizeTimer = setTimeout(resizeEnd, 300);\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ User ends resizing, then reinitialize the slider\n\t\t\t\t\t    function resizeEnd() {\n\t\t\t\t\t        initial = true;\n\t\t\t\t\t        windowWidth = window.innerWidth;\n\t\t\t\t\t        initSlider();\n\t\t\t\t\t        hideTimer = setTimeout(() => {\n\t\t\t\t\t            sliderCanvas.classList.remove('pieces-slider__canvas--hidden');\n\t\t\t\t\t        }, 500);\n\t\t\t\t\t    }\n\t\t\t\t\t})();\n\n\t            });\n\t        })(jQuery)\n\t    <\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Elemental Male The Flowers\u2019s Rose The Darkness of the Eyes The Lord of Secret prev next<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-1946","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/pages\/1946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativedial.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1946"}],"version-history":[{"count":0,"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/pages\/1946\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.creativedial.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}