1/**==================================================================== 2 * 3 * Main Script File 4 * 5 *====================================================================*/ 6/* jshint unused:false */ 7/*globals snabbt */ 8 9(function($) { 10 "use strict"; 11 $.viceElementor = { 12 window: $(window), 13 fxActivationClass: 'vice-fx-on', 14 15 /** 16 * ==================================================================== 17 * Global options 18 * ==================================================================== 19 */ 20 options: { 21 glitchDuration: 1000, //glitchFx 22 glitchPause: 4000, //glitchFx 23 }, 24 25 /** 26 * ==================================================================== 27 * Initialization 28 * ==================================================================== 29 */ 30 __init: function(){ 31 var viceElementor = this; 32 viceElementor.countFps(viceElementor); 33 viceElementor.viceCarousel(viceElementor, 'init', 'body'); 34 viceElementor.windowResized(viceElementor); 35 viceElementor.viceMouseMove.init( viceElementor ); 36 viceElementor.fx3dElements.init(viceElementor); 37 viceElementor.viceSectionFx(); 38 viceElementor.glitchParticles.init( viceElementor ); 39 viceElementor.glitchText.init( viceElementor ); 40 viceElementor.glitchPics.init( viceElementor ); 41 viceElementor.glitchLoop.init( viceElementor ); 42 }, 43 44 45 /** 46 * ==================================================================== 47 * FPS counter 48 * ==================================================================== 49 */ 50 countFps: function(viceElementor){ 51 var that = this; 52 var body = $("body"); 53 var debugOutput = ($("body").data('jsdebug'))? 1 : 0; 54 body.append('<output id="vice-elementor-PerformanceCheck" style="position: fixed;bottom: 0px;left: auto; right:0;padding: 0 2px;opacity: '+debugOutput+';background:black;color:white;z-index:100; font-size: 10px;"></output>'); 55 var $out = $('#vice-elementor-PerformanceCheck'); 56 that.countFPSf = (function () { 57 var lastLoop = (new Date()).getMilliseconds(); 58 var count = 1; 59 var fps = 0; 60 return function () { 61 var currentLoop = (new Date()).getMilliseconds(); 62 if (lastLoop > currentLoop) { 63 fps = count; 64 count = 1; 65 } else { 66 count += 1; 67 } 68 lastLoop = currentLoop; 69 viceElementor.fps = fps; 70 return fps; 71 }; 72 }()); 73 74 (function loop() { 75 requestAnimationFrame(function () { 76 $out.html(that.countFPSf() + 'FPS'); 77 loop(); 78 }); 79 }()); 80 }, 81 82 /** 83 * ==================================================================== 84 * Trigger custom functions on window resize 85 * ==================================================================== 86 */ 87 windowResized: function(v){ 88 var rst; 89 var w = v.window; 90 v.wW = v.window.width(); 91 v.wH = v.window.height(); 92 w.on('resize', function() { 93 clearTimeout(rst); 94 rst = setTimeout(function() { 95 if (w.width() != v.wW){ 96 v.wW = w.width(); 97 v.animation3D.reset(); 98 v.viceMouseMove.init( v ); 99 } 100 if (w.height() != v.wH){ 101 v.wH = w.height(); // used in other functions 102 } 103 }, 1000); 104 }); 105 }, 106 107 108 /** 109 * ==================================================================== 110 * Mouse move binding 111 * * Do not run on small screens 112 * * Do not run if the FPS are too low, prevent browser stuck 113 * ==================================================================== 114 */ 115 viceMouseMove: { 116 init: function( vice ){ 117 var win = vice.window; 118 win.off('mousemove.vicespace'); //vicespace = aleatory namespace 119 vice.mousePos = { x: vice.wW / 2, y: vice.wH / 2 }; 120 win.trigger('viceMouseMoved'); 121 vice.mouseAnimation = false; 122 if( win.width() > 1190 ){ 123 win.on('mousemove.vicespace', function(e){ // stateful 124 vice.mousePos = { 125 x: e.pageX, 126 y: e.pageY 127 }; 128 win.trigger('viceMouseMoved'); 129 }); 130 } 131 }, 132 }, 133 134 135 136 137 /** 138 * ==================================================================== 139 * 3D elements append listeners 140 * ==================================================================== 141 */ 142 fx3dElements: { 143 init: function(v){ 144 $('.vice-elementor-3dfx [data-vice-elementor-3dpicture="true"]').attr('data-vice-elementor-3dpicture', 'false'); // disable if the container has 3d 145 $('.vice-elementor-3dfx [data-vice-elementor-3delement="true"]').attr('data-vice-elementor-3delement', 'false'); // disable if the container has 3d 146 var the3dElements = [ 147 $('[data-vice-elementor-3dpicture="true"]'), 148 $('[data-vice-animation3d="true"] .owl-item'), 149 $('[data-vice-elementor-3delement="true"]'), 150 $('.vice-elementor-3dfx > .elementor-container') 151 ]; 152 $.each(the3dElements, function(){ 153 $(this).each(function(){ 154 var t = $(this); 155 t.css({"transform": "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1) translate(0, 0)" }); 156 157 t.off('onmouseenter.vice3d').off('mouseleave.vice3d') 158 .on('mouseenter.vice3d', function(){ 159 v.animation3D.target = t; 160 v.animation3D.init( v ); 161 }); 162 163 t.on('mouseleave.vice3d', function(){ 164 v.animation3D.reset( v ); 165 }); 166 }); 167 }); 168 }, 169 }, 170 171 /** 172 * ==================================================================== 173 * Animation in 3D 174 * ==================================================================== 175 */ 176 animation3D: { 177 target: false, 178 reset: function() { 179 var old = $('.vice-animating-3d'); 180 if( old.length > 0 ){ 181 // var resetCss = {"transform": "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1) translate(0, 0)", "transition" : 'all 1s ease' }; 182 // jQuery('.vice-animating-3d').css(resetCss).find('.vice-3d-element__front').css(resetCss); 183 $('.vice-animating-3d').css({ 184 'transform' : 'perspective(800px) rotateY(0deg) rotateX(0deg)' , 'transition' : 'transform 0.3s ' 185 }); 186 old.removeClass('vice-animating-3d'); 187 } 188 }, 189 init: function( v ){ 190 var that = this, 191 win = v.window, 192 item = false, e, mouseXrel, mouseYrel, moveX, moveY, matrix1, matrix2; 193 $(document).off('mousemove.fx3dElements'); 194 var $win = window; 195 var screenWidth = $win.screen.width / 2, 196 screenHeight = $win.screen.height / 2, 197 validPropertyPrefix = '', 198 otherProperty = 'perspective(800px)'; 199 if( $win.screen.width < 1200 ){ 200 return; 201 } 202 that.target.addClass('vice-animating-3d'); 203 item = $('.vice-animating-3d '); 204 $('.vice-animating-3d').css({ 'transform': "translate3D(0px, 0px, -0.001px)" }); 205 $(document).on('mousemove.fx3dElements', function (e) { 206 var centroX = e.clientX - screenWidth, 207 centroY = screenHeight - (e.clientY + 13), 208 degX = centroX * 0.03, 209 degY = centroY * 0.012; 210 $('.vice-animating-3d').css({ 211 'transform' : otherProperty + ' rotateY('+ degX * 0.5 +'deg) rotateX('+ degY +'deg)' , 212 'transition' : 'none' 213 }); 214 215 }); 216 return; 217 }, 218 }, 219 220 221 isInViewport: function( element ) { 222 var elementTop = element.offset().top; 223 var elementBottom = elementTop + element.outerHeight(); 224 var viewportTop = $(window).scrollTop(); 225 var viewportBottom = viewportTop + $(window).height(); 226 return elementBottom > viewportTop && elementTop < viewportBottom; 227 }, 228 229 /** 230 * ==================================================================== 231 * viceCarousel
232 * ==================================================================== 233 */ 234 viceCarousel: function(viceElementor, action, targetContainer){ 235 if(!jQuery.fn.owlCarousel) { return; } 236 if(undefined === targetContainer) { targetContainer = "body"; } 237 if(undefined === action) { action = "init"; } 238 239 if( 'init' === action ){ 240 $(targetContainer+' .vice-elementor-owl-carousel').each( function(i,c){ 241 var T = $(c), 242 itemIndex, 243 controllerTarget; 244 if(!T.hasClass('vice-elementor-carousel-created')){ 245 T.fadeTo(0, 0); 246 } 247 T.owlCarousel({ 248 loop: T.data('loop'), 249 margin: T.data('gap'), 250 nav: T.data('nav'), 251 dots: T.data('dots'), 252 navText: ['<i class="vice-elementor-arrow vice-elementor-arrow__l"></i>', '<i class="vice-elementor-arrow vice-elementor-arrow__r"></i>'], 253 center: T.data('center'), 254 stagePadding: T.data('stage_padding'), 255 autoplay: T.data('autoplay_timeout') > 0, 256 autoWidth:false, 257 autoplayTimeout: T.data('autoplay_timeout'), 258 autoplayHoverPause: T.data('pause_on_hover'), 259 callbacks: true, 260 responsive:{ 261 0:{ 262 items: T.data('items_mobile'), 263 autoWidth:false, 264 margin: 30, 265 mouseDrag: false, 266 touchDrag: true 267 }, 268 420:{ 269 items: T.data('items_mobile_hori'), 270 autoWidth:false, 271 mouseDrag: false, 272 touchDrag: true 273 }, 274 600:{ 275 items: T.data('items_tablet'), 276 autoWidth:false, 277 mouseDrag: false, 278 touchDrag: true 279 }, 280 1025:{ 281 items: T.data('items'), 282 autoWidth:false 283 } 284 }, 285 onInitialized:function(){ 286 T.addClass('vice-elementor-carousel-created'); 287 $(c).delay(250).fadeTo(250, 1); 288 }, 289 }); 290 // multinav 291 if( T.hasClass('vice-elementor-multinav-main')) { 292 controllerTarget = T.data('target'); 293 T.parent().find('.vice-elementor-multinav__controller').find('a:first-child').addClass('current'); 294 T.on('changed.owl.carousel', function (e) { 295 if (e.item) { 296 itemIndex = T.find('.active [data-index]').data('index') + 1; 297 T.parent().find('.vice-elementor-multinav__controller .current').removeClass('current'); 298 T.parent().find('.vice-elementor-multinav__controller').find('[data-multinav-controller="'+itemIndex+'"]').addClass('current'); 299 } 300 }); 301 } 302 // Index number [modernSlider] 303 if( T.data('indexslide') ){ 304 T.find('.owl-nav').append('<div class="vice-modernslider__index" data-vice-itemindex>01</div>'); 305 var cur; 306 var indexContainer = T.find('.owl-nav').find('[data-vice-itemindex]'); 307 var currentItem = T.find('.active'); 308 if(T.data('vicefx') === 'glitch'){ 309 currentItem.find('[data-vicefx="glitch"]').addClass(viceElementor.fxActivationClass); 310 } 311 T.on('translated.owl.carousel', function(e) { 312 if (e.item) { 313 cur = T.find('.active [data-index]').data('index'); 314 if( cur < 10 ){ 315 cur = '0'+cur; 316 } 317 indexContainer.animate({ 318 'opacity': 0, 319 'margin-top': '-20px' 320 }, 300, function(){ 321 indexContainer.html( cur ).css({'margin-top': '20px'}).animate({ 322 'opacity': 1, 323 'margin-top': '0px' 324 }, 300); 325 }); 326 if(T.data('vicefx') === 'glitch'){ 327 currentItem = T.find('.active'); 328 currentItem.find('[data-vice-imgfx="glitch"]').addClass(viceElementor.fxActivationClass); 329 currentItem.prev().find('[data-vice-imgfx="glitch"]').removeClass(viceElementor.fxActivationClass); 330 } 331 } 332 }); 333 } 334 T.on('click', "[data-multinav-controller]", function(e){ 335 e.preventDefault(); 336 var t = $(this), 337 i = t.data("multinav-controller"), 338 targ = t.data("multinav-target"); 339 $('#'+targ).trigger('stop.owl.autoplay', i); 340 $('#'+targ).trigger('to.owl.carousel', i); 341 T.parent().find('.vice-elementor-multinav__controller .owl-item a').removeClass('current'); 342 t.addClass('current'); 343 }); 344 }); 345 } // if( 'init' === action ){ 346 }, 347 348 /** 349 * ==================================================================== 350 * Glitch on text capions 351 * ==================================================================== 352 */ 353 glitchText: { 354 init: function( viceElementor ){ 355 var that = this; 356 var glitchclass = viceElementor.fxActivationClass; 357 that.items = $('[data-vice-textfx="glitch"]'); 358 that.items.each(function(){ 359 var t = $(this); 360 var text = t.html(); 361 var decor = t.find('.vice-elementor-caption__decor'); 362 t.html('<span class="vice-textfx-glitch__l0">'+text+'</span><span class="vice-textfx-glitch__l1">'+text+'</span><span class="vice-textfx-glitch__l2">'+text+'</span>'); 363 t.addClass(glitchclass); 364 t.on('touchstart, mouseenter', function(){ 365 t.addClass(glitchclass); 366 }).on('touchend, mouseleave', function(){ 367 t.removeClass(glitchclass); 368 }); 369 }); 370 viceElementor.window.off('viceGlitchStart.vicetextglitch') 371 .off('viceGlitchStop.vicetextglitch') 372 .on('viceGlitchStart.vicetextglitch', function(){ 373 that.items.addClass(glitchclass); 374 }).on('viceGlitchStop.vicetextglitch', function(){ 375 that.items.removeClass(glitchclass); 376 }); 377 } 378 }, 379 380 /** 381 * ==================================================================== 382 * Glitch picture 383 * ==================================================================== 384 */ 385 glitchPics: { 386 init: function( viceElementor ){ 387 var that = this; 388 var glitchclass = viceElementor.fxActivationClass;//'vice-fx-on'; 389 that.items = $('[data-vice-imgfx="glitch"]'); 390 that.items.each(function(){ 391 var t = $(this); 392 var ti = t.find('img:first-child'); 393 var imgurl = ti.attr('src'); 394 t.append('<img src="'+ti.attr('src')+'" class="vice-imgfx--glitch__f1">'); 395 t.append('<img src="'+ti.attr('src')+'" class="vice-imgfx--glitch__f2">'); 396 if( t.data('vice-fx-activation') === 'auto' ){ 397 t.addClass(glitchclass); 398 } 399 if( t.data('vice-glitch-activation') == 'hover' ){ 400 t.on('touchstart, mouseenter', function(){ 401 t.addClass(glitchclass); 402 }).on('touchend, mouseleave', function(){ 403 t.removeClass(glitchclass); 404 }); 405 } 406 }); 407 viceElementor.window.off('viceGlitchStart.viceimgglitch').off('viceGlitchStop.viceimgglitch'); 408 viceElementor.window.on('viceGlitchStart.viceimgglitch', function(){ 409 that.items.each(function(){ 410 var t = $(this); 411 if( t.data('vice-fx-activation') === 'auto' ){ 412 t.addClass(glitchclass); 413 } 414 }); 415 }); 416 viceElementor.window.on('viceGlitchStop.viceimgglitch', function(){ 417 that.items.removeClass(glitchclass); 418 }); 419 } 420 }, 421 422 /** 423 * ==================================================================== 424 * Elementor section glitch effect 425 * transform background image into an inline image and glitch it 426 * ==================================================================== 427 */ 428 viceSectionFx: function(){ 429 // Add a phisical image as background to apply the glitch 430 $(".vice-elementor-glitchsection").each(function(){ 431 var bg = $(this).css('background-image'); 432 if( bg && "none" !== bg ){ 433 bg = bg.replace('url(','').replace(')','').replace(/\"/gi, ""); 434 $(this).prepend('<div class="vice-elementor-glitchsection__bg vice-imgfx--glitch" data-vice-imgfx="glitch" data-vice-fx-activation="auto"><img src="'+bg+'"></div>'); 435 } 436 }); 437 }, 438 439 /** 440 * ==================================================================== 441 * Glitch particles 442 * ==================================================================== 443 */ 444 glitchParticles: { 445 quantity: 10, 446 fxBoxes: [], 447 items: [], 448 animationInterval: false, 449 init: function(viceElementor){ 450 var that = this; 451 that.targets = $('.vice-elementor-glitchsection'); 452 that.class = viceElementor.fxActivationClass; 453 if( that.targets.length === 0 ){ return; } 454 that.destroy(that);
454 // always destroy first, or it can destroy the browser 455 that.create(that); 456 viceElementor.window.off('viceGlitchStart.particles').off('viceGlitchStop.particles') 457 .on('viceGlitchStart.particles', function(){ that.show(that); }) 458 .on('viceGlitchStop.particles', function(){ that.hide(that); }); 459 }, 460 create: function(that){ 461 that.targets.each(function(){ 462 var t = $(this); 463 t.find('.vice-elementor-glitchparticles').remove(); 464 t.find('[data-vice-particles]').remove(); 465 t.append('<div data-vice-particles class="vice-elementor-glitchparticles"></div>'); 466 var layer = t.find('[data-vice-particles]'); 467 for(var i = 0; i < that.quantity; i ++){ 468 t.find('[data-vice-particles]').append('<hr>'); 469 } 470 that.fxBoxes.push(layer); 471 }).promise().done(function(){ 472 that.fxBoxes = $('[data-vice-particles]'); 473 that.show(that); 474 }) 475 }, 476 show: function(that){ 477 that.fxBoxes.addClass(that.class); 478 that.animation(that); 479 that.animationInterval = setInterval(function(){ 480 that.animation(that); 481 }, 200); 482 }, 483 animation: function(that){ 484 if( that.fxBoxes.hasClass(that.class) ){ 485 var total = 0; 486 that.fxBoxes.find('hr').each( function(){ 487 total++; 488 $(this).css({ 489 'left': Math.floor(Math.random() * 90)+'%', 490 'top': Math.floor(Math.random() * 100)+'%', 491 'width': 8 + Math.floor( Math.random() * 20) +'px', 492 'height': 3 + Math.floor( Math.random() * 3) + 'px' 493 }); 494 }); 495 } 496 }, 497 hide: function(that){ 498 if( false !== that.animationInterval ){ 499 clearInterval(that.animationInterval); 500 } 501 that.fxBoxes.removeClass(that.class); 502 }, 503 destroy: function(that){ 504 if('undefined' !== typeof(that.animateInterval) ){ 505 clearInterval(that.animateInterval); 506 } 507 } 508 }, 509 510 /** 511 * ==================================================================== 512 * Global glitch automation loop 513 * ==================================================================== 514 */ 515 glitchLoop: { 516 state: 0, 517 newstate: 0, 518 init: function( viceElementor ){ 519 var that = this; 520 var arrogance = $('[data-vice-glitch-arrogance]').data('vice-glitch-arrogance'); 521 if( !arrogance ){ 522 arrogance = 15; 523 } 524 arrogance = 1 - ( arrogance / 100 ); 525 if( 'undefined' !== typeof( that.glitchInterval ) ){ 526 clearInterval( that.glitchInterval ); 527 } 528 that.glitchInterval = setInterval( 529 function(){ 530 that.newstate = 0; 531 if( Math.random() > arrogance){ // the hightr the limit it, the less it glitches. Chance or probability to glitch 532 that.newstate = 1; 533 } 534 // act only if it changes 535 if( that.newstate !== that.state ){ 536 that.state = that.newstate; 537 if( that.state ){ 538 viceElementor.window.trigger('viceGlitchStart'); 539 }else { 540 viceElementor.window.trigger('viceGlitchStop'); 541 } 542 } 543 }, 500 544 ); 545 } 546 } 547 548 }; 549 550 /**==================================================================== 551 * 552 * Page Ready Trigger 553 * This needs to call only $.fn.qtInitTheme 554 * 555 ====================================================================*/ 556 $(document).ready(function() { 557 $.viceElementor.__init($.viceElementor); 558 }); 559 560})(jQuery);
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.