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