1/** 2 * @name Page Builder CK 3 * @package com_pagebuilderck 4 * @copyright Copyright (C) 2022. All rights reserved. 5 * @license GNU General Public License version 2 or later; see LICENSE.txt 6 * @author Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr 7 */ 8 9if( document.readyState !== "loading" ) { 10 PBCK_animatedtext_run(); 11} else { 12 document.addEventListener("DOMContentLoaded", function () { 13//jQuery(document).ready(function(){ 14 PBCK_animatedtext_run(); 15 }); 16} 17 18function PBCK_animatedtext_run() { 19 let selectors = document.querySelectorAll('.pagebuilderck:not(.workspaceck) .cktype[data-type="animatedtext"] .titleck-effect'); 20 PBCK_animatedtext_start(selectors); 21} 22 23function PBCK_animatedtext_start(selectors, lines) { 24 if (! lines) lines = false; 25 selectors.forEach(function(selector) { 26 let effect = selector.getAttribute('data-effect'); 27 let loop = selector.getAttribute('data-loop'); 28 loop = loop == true || loop === 'true' || loop === null; 29 if (! effect) { 30 console.log('PBCK Animated Text : no effect found'); 31 console.log(selector); 32 return; 33 } 34 let funcName = 'PBCK_animatedtext_effect_' + effect; 35 window[funcName](selector, loop, lines); 36 }); 37} 38 39function PBCK_animatedtext_splitTextInLetters(selector) { 40 // Wrap every letter in a span 41 let html = selector.innerHTML 42 html = html.split('<br>'); 43 for (var h=0; h<html.length; h++) { 44 html[h] = html[h].replace(/\S/g, "<span class='pbck-letter'>$&</span>"); 45 } 46 html = html.join('<br>'); 47 selector.innerHTML = html; 48 49// selector.innerHTML = selector.textContent.replace(/\S/g, "<span class='pbck-letter'>$&</span>"); 50 // selector.innerHTML.trim(); 51} 52 53function PBCK_animatedtext_splitTextInWords(selector) { 54 // Wrap every wodd in a span 55 selector.innerHTML = selector.textContent.replace(/\S+\s*/g, "<span class='pbck-word'>$&</span> "); 56 selector.innerHTML.trim(); 57} 58 59function PBCK_animatedtext_AddLine(selector, number) { 60 let line = document.createElement("span") 61 line.classList.add('pbck-line'); 62 if (number === 1) { 63 line.classList.add('pbck-line1'); 64 selector.prepend(line); 65 } else { 66 line.classList.add('pbck-line2'); 67 selector.append(line); 68 } 69} 70 71function PBCK_animatedtext_effect_1(selector, loop, lines) { 72 PBCK_animatedtext_splitTextInLetters(selector); 73 if (lines) { 74 PBCK_animatedtext_AddLine(selector, 1); 75 PBCK_animatedtext_AddLine(selector, 2); 76 } 77 const animation = anime.timeline({loop: loop}); 78 animation.add({ 79 targets: selector.querySelectorAll('.pbck-letter'), 80 scale: [0.3,1], 81 opacity: [0,1], 82 translateZ: 0, 83 easing: "easeOutExpo", 84 duration: 600, 85 delay: (el, i) => 70 * (i+1) 86 }) 87 animation.add({ 88 targets: '.pbck-line', 89 scaleX: [0,1], 90 opacity: [0.5,1], 91 easing: "easeOutExpo", 92 duration: 700, 93 offset: '-=875', 94 delay: (el, i, l) => 80 * (l - i) 95 }) 96 if (loop) { 97 animation.add({ 98 targets: selector, 99 opacity: 0, 100 duration: 1000, 101 easing: "easeOutExpo", 102 delay: 1000 103 }); 104 } 105} 106 107function PBCK_animatedtext_effect_2(selector, loop) { 108 PBCK_animatedtext_splitTextInLetters(selector); 109 const animation = anime.timeline({loop: loop}); 110 animation.add({ 111 targets: selector.querySelectorAll('.pbck-letter'), 112 scale: [4,1], 113 opacity: [0,1], 114 translateZ: 0, 115 easing: "easeOutExpo", 116 duration: 950, 117 delay: (el, i) => 70*i 118 }) 119 if (loop) { 120 animation.add({ 121 targets: selector, 122 opacity: 0, 123 duration: 1000, 124 easing: "easeOutExpo", 125 delay: 1000 126 }); 127 } 128} 129 130function PBCK_animatedtext_effect_3(selector, loop) { 131 PBCK_animatedtext_splitTextInLetters(selector); 132 const animation = anime.timeline({loop: loop}); 133 animation.add({ 134 targets: selector.querySelectorAll('.pbck-letter'), 135 opacity: [0,1], 136 easing: "easeInOutQuad", 137 duration: 2250, 138 delay: (el, i) => 150 * (i+1) 139 }) 140 if (loop) { 141 animation.add({ 142 targets: selector, 143 opacity: 0, 144 duration: 1000, 145 easing: "easeOutExpo", 146 delay: 1000 147 }); 148 } 149} 150 151function PBCK_animatedtext_effect_4(selector, loop) { 152 PBCK_animatedtext_splitTextInWords(selector); 153 var ml4 = {}; 154 ml4.opacityIn = [0,1]; 155 ml4.scaleIn = [0.2, 1]; 156 ml4.scaleOut = 3; 157 ml4.durationIn = 800; 158 ml4.durationOut = 600; 159 ml4.delay = 500; 160 161 var animation = anime.timeline({loop: loop}); 162 selector.querySelectorAll('.pbck-word').forEach(function(word) { 163 animation 164 .add({ 165 targets: word, 166 opacity: ml4.opacityIn, 167 scale: ml4.scaleIn, 168 duration: ml4.durationIn 169 }) 170 // .add({ 171 // targets: word, 172 // opacity: 0, 173 // scale: ml4.scaleOut, 174 // duration: ml4.durationOut, 175 // easing: "easeInExpo", 176 // delay: ml4.delay 177 // }); 178 }); 179 if (loop) { 180 animation.add({ 181 targets: selector, 182 scale: ml4.scaleOut, 183 easing: "easeInExpo", 184 opacity: 0, 185 duration: 500, 186 delay: 500 187 }) 188 } 189} 190 191 192function PBCK_animatedtext_effect_5(selector, loop) { 193 PBCK_animatedtext_splitTextInLetters(selector); 194 const animation = anime.timeline({loop: loop}); 195 animation.add({ 196 targets: selector.querySelectorAll('.pbck-letter'), 197 translateY: ["1.1em", 0], 198 translateZ: 0, 199 duration: 750, 200 delay: (el, i) => 50 * i 201 }) 202 if (loop) { 203 animation.add({ 204 targets: selector, 205 opacity: 0, 206 duration: 1000, 207 easing: "easeOutExpo", 208 delay: 1000 209 }); 210 } 211} 212 213 214function PBCK_animatedtext_effect_6(selector, loop) { 215 PBCK_animatedtext_splitTextInLetters(selector); 216 const animation = anime.timeline({loop: loop}); 217 animation.add({ 218 targets: selector.querySelectorAll('.pbck-letter'), 219 translateY: ["1.1em", 0], 220 translateX: ["0.55em", 0], 221 translateZ: 0, 222 rotateZ: [180, 0], 223 duration: 750, 224 easing: "easeOutExpo", 225 delay: (el, i) => 50 * i 226 }) 227 if (loop) { 228 animation.add({ 229 targets: selector, 230 opacity: 0, 231 duration: 1000, 232 easing: "easeOutExpo", 233 delay: 1000 234 }); 235 } 236} 237 238 239function PBCK_animatedtext_effect_7(selector, loop) { 240 PBCK_animatedtext_splitTextInLetters(selector); 241 const animation = anime.timeline({loop: loop}); 242 animation.add({ 243 targets: selector.querySelectorAll('.pbck-letter'), 244 scale: [0, 1], 245 duration: 1500, 246 elasticity: 600, 247 delay: (el, i) => 45 * (i+1) 248 }) 249 if (loop) { 250 animation.add({ 251 targets: selector, 252 opacity: 0, 253 duration: 1000, 254 easing: "easeOutExpo", 255 delay: 1000 256 }); 257 } 258} 259 260function PBCK_animatedtext_effect_8(selector, loop) { 261 PBCK_animatedtext_splitTextInLetters(selector); 262 const animation = anime.timeline({loop: loop}); 263 animation.add({ 264 targets: selector.querySelectorAll('.pbck-letter'), 265 rotateY: [-90, 0], 266 duration: 1300, 267 delay: (el, i) => 45 * i 268 }) 269 if (loop) { 270 animation.add({ 271 targets: selector, 272 opacity: 0, 273 duration: 1000, 274 easing: "easeOutExpo", 275 delay: 1000 276 }); 277 } 278} 279 280function PBCK_animatedtext_effect_9(selector, loop) { 281 // PBCK_animatedtext_splitTextInLetters(selector); 282 selector.innerHTML = selector.textContent.replace(/([^\x00-\x80]|\w)
282/g, "<span class='pbck-letter'>$&</span>"); 283 PBCK_animatedtext_AddLine(selector, 1) 284 const animation = anime.timeline({loop: loop}); 285 animation.add({ 286 targets: selector.querySelectorAll('.pbck-line'), 287 scaleY: [0,1], 288 opacity: [0,1], 289 easing: "easeOutExpo", 290 duration: 700 291 }) 292 animation.add({ 293 targets: selector.querySelectorAll('.pbck-line'), 294 translateX: [0, selector.getBoundingClientRect().width + 10], 295 easing: "easeOutExpo", 296 // opacity: [1,1], 297 duration: 700, 298 delay: 100 299 }) 300 animation.add({ 301 targets: selector.querySelectorAll('.pbck-letter'), 302 opacity: [0,1], 303 easing: "easeOutExpo", 304 duration: 600, 305 offset: '-=775', 306 delay: (el, i) => 34 * (i+1) 307 }) 308 if (loop) { 309 animation.add({ 310 targets: selector, 311 opacity: 0, 312 duration: 1000, 313 easing: "easeOutExpo", 314 delay: 1000 315 }); 316 } 317} 318 319 320function PBCK_animatedtext_effect_10(selector, loop) { 321 PBCK_animatedtext_splitTextInLetters(selector); 322 const animation = anime.timeline({loop: loop}); 323 animation.add({ 324 targets: selector.querySelectorAll('.pbck-letter'), 325 translateX: [40,0], 326 translateZ: 0, 327 opacity: [0,1], 328 easing: "easeOutExpo", 329 duration: 1200, 330 delay: (el, i) => 500 + 30 * i 331 }) 332 if (loop) { 333 animation.add({ 334 targets: selector.querySelectorAll('.pbck-letter'), 335 translateX: [0,-30], 336 opacity: [1,0], 337 easing: "easeInExpo", 338 duration: 1100, 339 delay: (el, i) => 100 + 30 * i 340 }); 341 } 342} 343 344function PBCK_animatedtext_effect_11(selector, loop) { 345 PBCK_animatedtext_splitTextInLetters(selector); 346 const animation = anime.timeline({loop: loop}); 347 animation.add({ 348 targets: selector.querySelectorAll('.pbck-letter'), 349 translateY: [100,0], 350 translateZ: 0, 351 opacity: [0,1], 352 easing: "easeOutExpo", 353 duration: 1400, 354 delay: (el, i) => 300 + 30 * i 355 }) 356 if (loop) { 357 animation.add({ 358 targets: selector.querySelectorAll('.pbck-letter'), 359 translateY: [0,-100], 360 opacity: [1,0], 361 easing: "easeInExpo", 362 duration: 1200, 363 delay: (el, i) => 100 + 30 * i 364 }); 365 } 366} 367 368function PBCK_animatedtext_effect_12(selector, loop) { 369 PBCK_animatedtext_splitTextInLetters(selector); 370 const animation = anime.timeline({loop: loop}); 371 animation.add({ 372 targets: selector.querySelectorAll('.pbck-line'), 373 scaleX: [0,1], 374 opacity: [0.5,1], 375 easing: "easeInOutExpo", 376 duration: 900 377 }) 378 animation.add({ 379 targets: selector.querySelectorAll('.pbck-letter'), 380 opacity: [0,1], 381 translateX: [40,0], 382 translateZ: 0, 383 scaleX: [0.3, 1], 384 easing: "easeOutExpo", 385 duration: 800, 386 offset: '-=600', 387 delay: (el, i) => 150 + 25 * i 388 }) 389 if (loop) { 390 animation.add({ 391 targets: selector, 392 opacity: 0, 393 duration: 1000, 394 easing: "easeOutExpo", 395 delay: 1000 396 }); 397 } 398} 399 400function PBCK_animatedtext_effect_13(selector, loop) { 401 PBCK_animatedtext_splitTextInWords(selector); 402 const animation = anime.timeline({loop: loop}); 403 animation.add({ 404 targets: selector.querySelectorAll('.pbck-word'), 405 scale: [14,1], 406 opacity: [0,1], 407 easing: "easeOutCirc", 408 duration: 800, 409 delay: (el, i) => 800 * i 410 }) 411 if (loop) { 412 animation.add({ 413 targets: selector, 414 opacity: 0, 415 duration: 1000, 416 easing: "easeOutExpo", 417 delay: 1000 418 }); 419 } 420} 421 422function PBCK_animatedtext_effect_14(selector, loop) { 423 PBCK_animatedtext_splitTextInLetters(selector); 424 const animation = anime.timeline({loop: loop}); 425 animation.add({ 426 targets: selector.querySelectorAll('.pbck-letter'), 427 translateY: [-100,0], 428 easing: "easeOutExpo", 429 duration: 1400, 430 delay: (el, i) => 30 * i 431 }) 432 if (loop) { 433 animation.add({ 434 targets: selector, 435 opacity: 0, 436 duration: 1000, 437 easing: "easeOutExpo", 438 delay: 1000 439 }); 440 } 441}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.