File manager

File manager - Edit - /home/jardides/www/Jardi-design/plugins/pagebuilderck/animatedtext/assets/animatedtext.js

Back
/** * @name Page Builder CK * @package com_pagebuilderck * @copyright Copyright (C) 2022. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt * @author Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr / if( document.readyState !== "loading" ) { PBCK_animatedtext_run(); } else { document.addEventListener("DOMContentLoaded", function () { //jQuery(document).ready(function(){ PBCK_animatedtext_run(); }); } function PBCK_animatedtext_run() { let selectors = document.querySelectorAll('.pagebuilderck:not(.workspaceck) .cktype[data-type="animatedtext"] .titleck-effect'); PBCK_animatedtext_start(selectors); } function PBCK_animatedtext_start(selectors, lines) { if (! lines) lines = false; selectors.forEach(function(selector) { let effect = selector.getAttribute('data-effect'); if (! effect) { console.log('PBCK Animated Text : no effect found'); console.log(selector); return; } let funcName = 'PBCK_animatedtext_effect_' + effect; window[funcName](selector, lines); }); } function PBCK_animatedtext_splitTextInLetters(selector) { // Wrap every letter in a span selector.innerHTML = selector.textContent.replace(/\S/g, "<span class='pbck-letter'>$&</span>"); // selector.innerHTML.trim(); } function PBCK_animatedtext_splitTextInWords(selector) { // Wrap every wodd in a span selector.innerHTML = selector.textContent.replace(/\S+\s/g, "<span class='pbck-word'>$&</span> "); selector.innerHTML.trim(); } function PBCK_animatedtext_AddLine(selector, number) { let line = document.createElement("span") line.classList.add('pbck-line'); if (number === 1) { line.classList.add('pbck-line1'); selector.prepend(line); } else { line.classList.add('pbck-line2'); selector.append(line); } } function PBCK_animatedtext_effect_1(selector, lines) { PBCK_animatedtext_splitTextInLetters(selector); if (lines) { PBCK_animatedtext_AddLine(selector, 1); PBCK_animatedtext_AddLine(selector, 2); } anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), scale: [0.3,1], opacity: [0,1], translateZ: 0, easing: "easeOutExpo", duration: 600, delay: (el, i) => 70 * (i+1) }).add({ targets: '.pbck-line', scaleX: [0,1], opacity: [0.5,1], easing: "easeOutExpo", duration: 700, offset: '-=875', delay: (el, i, l) => 80 * (l - i) }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_2(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), scale: [4,1], opacity: [0,1], translateZ: 0, easing: "easeOutExpo", duration: 950, delay: (el, i) => 70i }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_3(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), opacity: [0,1], easing: "easeInOutQuad", duration: 2250, delay: (el, i) => 150 (i+1) }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_4(selector) { PBCK_animatedtext_splitTextInWords(selector); var ml4 = {}; ml4.opacityIn = [0,1]; ml4.scaleIn = [0.2, 1]; ml4.scaleOut = 3; ml4.durationIn = 800; ml4.durationOut = 600; ml4.delay = 500; var myTimeline = anime.timeline({loop: true}); selector.querySelectorAll('.pbck-word').forEach(function(word) { myTimeline .add({ targets: word, opacity: ml4.opacityIn, scale: ml4.scaleIn, duration: ml4.durationIn }) // .add({ // targets: word, // opacity: 0, // scale: ml4.scaleOut, // duration: ml4.durationOut, // easing: "easeInExpo", // delay: ml4.delay // }); }); myTimeline.add({ targets: selector, scale: ml4.scaleOut, easing: "easeInExpo", opacity: 0, duration: 500, delay: 500 }) } function PBCK_animatedtext_effect_5(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), translateY: ["1.1em", 0], translateZ: 0, duration: 750, delay: (el, i) => 50 * i }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_6(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), translateY: ["1.1em", 0], translateX: ["0.55em", 0], translateZ: 0, rotateZ: [180, 0], duration: 750, easing: "easeOutExpo", delay: (el, i) => 50 * i }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_7(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), scale: [0, 1], duration: 1500, elasticity: 600, delay: (el, i) => 45 * (i+1) }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_8(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), rotateY: [-90, 0], duration: 1300, delay: (el, i) => 45 * i }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_9(selector) { // console.log(selector); // console.log(selector.getBoundingClientRect()); // console.log(selector.clientWidth); // console.log(selector.offsetWidth); // console.log(selector.getBoundingClientRect().width); // PBCK_animatedtext_splitTextInLetters(selector); selector.innerHTML = selector.textContent.replace(/([^\x00-\x80]\|\w)/g, "<span class='pbck-letter'>$&</span>"); PBCK_animatedtext_AddLine(selector, 1) anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-line'), scaleY: [0,1], opacity: [0,1], easing: "easeOutExpo", duration: 700 }) .add({ targets: selector.querySelectorAll('.pbck-line'), translateX: [0, selector.getBoundingClientRect().width + 10], easing: "easeOutExpo", // opacity: [1,1], duration: 700, delay: 100 }) .add({ targets: selector.querySelectorAll('.pbck-letter'), opacity: [0,1], easing: "easeOutExpo", duration: 600, offset: '-=775', delay: (el, i) => 34 * (i+1) }) .add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); // anime.timeline({loop: true}) // .add({ // targets: selector.querySelectorAll('.pbck-line'), // scaleY: [0,1], // opacity: [0,1], // easing: "easeOutExpo", // duration: 700 // }).add({ // targets: selector.querySelectorAll('.pbck-line'), // translateX: [0, selector.getBoundingClientRect().width + 10], // easing: "easeOutExpo", // opacity: [1,1], // duration: 700, // delay: 100 // }); } function PBCK_animatedtext_effect_10(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), translateX: [40,0], translateZ: 0, opacity: [0,1], easing: "easeOutExpo", duration: 1200, delay: (el, i) => 500 + 30 * i }).add({ targets: selector.querySelectorAll('.pbck-letter'), translateX: [0,-30], opacity: [1,0], easing: "easeInExpo", duration: 1100, delay: (el, i) => 100 + 30 * i }); } function PBCK_animatedtext_effect_11(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), translateY: [100,0], translateZ: 0, opacity: [0,1], easing: "easeOutExpo", duration: 1400, delay: (el, i) => 300 + 30 * i }).add({ targets: selector.querySelectorAll('.pbck-letter'), translateY: [0,-100], opacity: [1,0], easing: "easeInExpo", duration: 1200, delay: (el, i) => 100 + 30 * i }); } function PBCK_animatedtext_effect_12(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-line'), scaleX: [0,1], opacity: [0.5,1], easing: "easeInOutExpo", duration: 900 }).add({ targets: selector.querySelectorAll('.pbck-letter'), opacity: [0,1], translateX: [40,0], translateZ: 0, scaleX: [0.3, 1], easing: "easeOutExpo", duration: 800, offset: '-=600', delay: (el, i) => 150 + 25 * i }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_13(selector) { PBCK_animatedtext_splitTextInWords(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-word'), scale: [14,1], opacity: [0,1], easing: "easeOutCirc", duration: 800, delay: (el, i) => 800 * i }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); } function PBCK_animatedtext_effect_14(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: true}) .add({ targets: selector.querySelectorAll('.pbck-letter'), translateY: [-100,0], easing: "easeOutExpo", duration: 1400, delay: (el, i) => 30 * i }).add({ targets: selector, opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.01 | proxy | phpinfo | Settings