1/****************************************************************** 2 3 4 @ Item Gravity // Coming Soon WordPress 5 @ Author Avanzare 6 @ Website http://themeforest.net/user/avanzare 7 8 9 ******************************************************************/ 10 11 12 /****************************************************************** 13 14 15 ------------------------ 16 -- TABLE OF CONTENTS -- 17 ------------------------ 18 19 -- 1. Backgrounds 20 21 22 ******************************************************************/ 23 24 25 26 27/** 1. BACKGROUNDS 28*******************************************************************/ 29 30 31 32jQuery(document).ready(function($) { 33 "use strict"; 34 35 36 // IMAGE BACKGROUND FUNCTION 37 function imageBackground() { 38 39 // INIT VEGAS SLIDESHOW PLUGIN 40 $(".bg-image").vegas({ 41 42 slides: [{src: background_image_image }], 43 delay: 10, 44 transitionDuration: 10, 45 timer: false, 46 47 }); 48 49 } 50 51 52 // SLIDER BACKGROUND FUNCTION 53 function sliderBackground() { 54 55 // INIT VEGAS SLIDESHOW PLUGIN 56 $(".grcs_background_content .bg-image").vegas({ 57 58 slides: background_slider_slides, 59 transition: background_slider_transition, 60 delay: background_slider_timeout, 61 transitionDuration: background_slider_transition_duration, 62 firstTransitionDuration: 1, 63 timer: false, 64 walk: function (index, slideSettings) {$(".grcs_text_slider").cycle("next");} 65 66 }); 67 68 } 69 70 71 // KENBURNS SLIDER BACKGROUND FUNCTION 72 function kenburnsBackground() { 73 74 // INIT VEGAS SLIDESHOW PLUGIN 75 $(".grcs_background_content .bg-image").vegas({ 76 77 slides: background_kenburns_slides, 78 transition: background_kenburns_transition, 79 delay: background_kenburns_timeout, 80 transitionDuration: background_kenburns_transition_duration, 81 firstTransitionDuration: 1, 82 timer: false, 83 animation: background_kenburns_effect, 84 walk: function (index, slideSettings) {$(".grcs_text_slider").cycle("next");} 85 86 }); 87 88 } 89 90 91 // YOUTUBE BACKGROUND FUNCTION 92 function youtubeBackground() { 93 94 // MOBILE FALLBACK 95 if ( jQuery.browser.mobile ) { 96 97 $(".grcs_background_content .bg-image").vegas({ 98 99 slides: [{src: background_youtube_fallback_image }], 100 delay: 100, 101 transitionDuration: 100, 102 timer: false, 103 104 }); 105 106 return; 107 108 } 109 110 if (background_youtube_controls == 1) { 111 $("body").append('<div class="grcs_youtube_controls"><i class="volume-button fa fa-volume-up"></i> <i class="pause-button ti-control-pause"></i></div>'); 112 } 113 114 if (background_youtube_sound == 1) { 115 background_youtube_sound = 0; 116 } else { 117 background_youtube_sound = 1; 118 $(".grcs_youtube_controls .volume-button").removeClass("fa-volume-up").addClass("fa-volume-off"); 119 } 120 121 // INIT YOUTUBE BACKGROUND VIDEO PLUGIN 122 $(".grcs_background_content .bg-video").append('<div id="bg-youtube" class="player showOn-video-bg"></div>'); 123 $("#bg-youtube").attr('data-property', '{videoURL:background_youtube_url,containment:".bg-video",autoPlay:true,mute:background_youtube_sound,startAt: background_youtube_start_point,stopAt: background_youtube_end_point,opacity:1,stopMovieOnBlur:false,showControls:false,loop:true}'); 124 125 // INIT YOUTUBE BACKGROUND VIDEO PLUGIN 126 $(".player").mb_YTPlayer(); 127 128 // PLAYER SOUND CONTROLLER 129 $(".grcs_youtube_controls .volume-button").click(function() { 130 131 if($("#bg-youtube").hasClass("isMuted")) { 132 133 $("#bg-youtube").YTPUnmute(); 134 $( ".grcs_youtube_controls .volume-button" ).removeClass("fa-volume-off").addClass("fa-volume-up"); 135 136 } else { 137 138 $("#bg-youtube").YTPMute(); 139 $(".grcs_youtube_controls .volume-button").removeClass("fa-volume-up").addClass("fa-volume-off"); 140 141 } 142 143 }); 144 145 var stBtnCheck = true; 146 147 // DO SOMETHING WHEN PLAYER IS PAUSED 148 $("#bg-youtube").on("YTPPause",function(){ 149 150 stBtnCheck = false; 151 152 }); 153 154 // DO SOMETHING WHEN PLAYER IS PLAYING 155 $("#bg-youtube").on("YTPPlay",function(){ 156 157 stBtnCheck = true; 158 159 }); 160 161 // PAUSE PLAYER ON CLICK 162 $( ".grcs_youtube_controls .pause-button" ).click(function() { 163 164 if (stBtnCheck == true) { 165 166 $("#bg-youtube").YTPPause(); 167 $( ".grcs_youtube_controls .pause-button" ).removeClass("ti-control-pause").addClass("ti-control-play"); 168 169 } else { 170 171 $("#bg-youtube").YTPPlay(); 172 $( ".grcs_youtube_controls .pause-button" ).removeClass("ti-control-play").addClass("ti-control-pause"); 173 174 } 175 176 }); 177 178 $('#bg-youtube').on("YTPReady",function(e){
179 180 setTimeout(function() { 181 182 $("#bg-youtube").YTPPlay(); 183 184 },500); 185 186 }); 187 188 } 189 190 191 // SOLID COLOR BACKGROUND FUNCTION 192 function colorBackground() { 193 194 $(".grcs_background_content .bg-color").css("background",background_color_color); 195 $(".grcs_background_content .bg-color").css("opacity","1"); 196 197 // REMOVE PATTERN AND OVERLAY 198 $(".grcs_background_content .bg-pattern").remove(); 199 $(".grcs_background_content .bg-overlay").remove(); 200 201 } 202 203 204 // GRADIENT BACKGROUND FUNCTION 205 function gradientBackground() { 206 207 // HEX TO RGB CONVERTER 208 function hexToRgb(hex) { 209 210 hex = hex.replace("#", ""); 211 212 var bigint = parseInt(hex, 16); 213 var r = (bigint >> 16) & 255; 214 var g = (bigint >> 8) & 255; 215 var b = bigint & 255; 216 217 return [r, g, b]; 218 } 219 220 // COLOR ARRAY 221 var colors = new Array( hexToRgb(background_gradient_color_1), 222 hexToRgb(background_gradient_color_2), 223 hexToRgb(background_gradient_color_3), 224 hexToRgb(background_gradient_color_4), 225 hexToRgb(background_gradient_color_5), 226 hexToRgb(background_gradient_color_6) ); 227 228 var step = 0; 229 230 var selector = $(".grcs_background_content .bg-color"); 231 232 //COLOR TABLE: 233 var colorIndices = [0,1,2,3]; 234 235 //TRANSITION SPEED 236 var gradientSpeed = parseFloat(background_gradient_speed)/40000; 237 238 function updateGradient() { 239 240 var c0_0 = colors[colorIndices[0]]; 241 var c0_1 = colors[colorIndices[1]]; 242 var c1_0 = colors[colorIndices[2]]; 243 var c1_1 = colors[colorIndices[3]]; 244 245 var istep = 1 - step; 246 var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]); 247 var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]); 248 var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]); 249 var color1 = "rgb("+r1+","+g1+","+b1+")"; 250 251 var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]); 252 var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]); 253 var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]); 254 var color2 = "rgb("+r2+","+g2+","+b2+")"; 255 256 selector.css({ 257 background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({ 258 background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}); 259 260 step += gradientSpeed; 261 262 if ( step >= 1 ) 263 { 264 265 step %= 1; 266 colorIndices[0] = colorIndices[1]; 267 colorIndices[2] = colorIndices[3]; 268 269 colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; 270 colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; 271 272 } 273 274 } 275 setInterval(updateGradient,1); 276 277 $(".grcs_background_content .bg-color").css("opacity","1"); 278 $(".grcs_background_content .bg-pattern").remove(); 279 $(".grcs_background_content .bg-overlay").remove(); 280 281 } 282 283 284 // CANVAS SPHERE BACKGROUND FUNCTION 285 function canvasSphereBackground() { 286 287 $(".grcs_background_content .bg-overlay").remove(); 288 $(".grcs_background_content .bg-pattern").remove(); 289 290 // THREE.JS BASED 291 var SCREEN_WIDTH = $(".grcs_background_content .level-1").width(), 292 SCREEN_HEIGHT = $(".grcs_background_content .level-1").height(), 293 294 mouseX = 0, mouseY = 0, 295 296 windowHalfX = SCREEN_WIDTH / 2, 297 windowHalfY = SCREEN_HEIGHT / 2, 298 299 camera, scene, renderer; 300 301 init(); 302 animate(); 303 304 function init() { 305 306 var container, separation = 100, amountX = 50, amountY = 50, 307 particles, particle; 308 309 container = document.createElement("div"); 310 document.getElementById("canvas").appendChild(container); 311 312 camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 ); 313 camera.position.z = background_sphere_distance * 10; 314 315 scene = new THREE.Scene(); 316
317 renderer = new THREE.CanvasRenderer(); 318 renderer.setPixelRatio( window.devicePixelRatio ); 319 renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); 320 container.appendChild( renderer.domElement ); 321 renderer.setClearColor( background_sphere_background_color ); 322 323 var PI2 = Math.PI * 2; 324 var material = new THREE.SpriteCanvasMaterial( { 325 326 color: background_sphere_dot_color, 327 program: function ( context ) { 328 329 context.beginPath(); 330 context.arc( 0, 0, 0.5, 0, PI2, true ); 331 context.fill(); 332 333 } 334 335 } ); 336 337 for ( var i = 0; i < 1000; i ++ ) { 338 339 particle = new THREE.Sprite( material ); 340 particle.position.x = Math.random() * 2 - 1; 341 particle.position.y = Math.random() * 2 - 1; 342 particle.position.z = Math.random() * 2 - 1; 343 particle.position.normalize(); 344 particle.position.multiplyScalar( Math.random() * 10 + 450 ); 345 particle.scale.multiplyScalar( 2 ); 346 scene.add( particle ); 347 348 } 349 350 for (var i = 0; i < 300; i++) { 351 352 var geometry = new THREE.Geometry(); 353 354 var vertex = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ); 355 vertex.normalize(); 356 vertex.multiplyScalar( 450 ); 357 358 geometry.vertices.push( vertex ); 359 360 var vertex2 = vertex.clone(); 361 vertex2.multiplyScalar( Math.random() * 0.3 + 1 ); 362 363 geometry.vertices.push( vertex2 ); 364 365 var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: background_sphere_line_color, opacity: Math.random() } ) ); 366 scene.add( line ); 367 } 368 369 document.addEventListener( "mousemove", onDocumentMouseMove, false ); 370 //document.addEventListener( "touchstart", onDocumentTouchStart, false ); 371 //document.addEventListener( "touchmove", onDocumentTouchMove, false ); 372 373 window.addEventListener( "resize", onWindowResize, false ); 374 375 } 376 377 function onWindowResize() { 378 379 var SCREEN_WIDTH = $(".grcs_background_content .level-1").width(), 380 SCREEN_HEIGHT = $(".grcs_background_content .level-1").height(), 381 382 windowHalfX = SCREEN_WIDTH / 2; 383 windowHalfY = SCREEN_HEIGHT / 2; 384 385 camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; 386 camera.updateProjectionMatrix(); 387 388 renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); 389 390 } 391 392 function onDocumentMouseMove(event) { 393 394 mouseX = event.clientX - windowHalfX; 395 mouseY = event.clientY - windowHalfY; 396 } 397 398 function onDocumentTouchStart( event ) { 399 400 if ( event.touches.length > 1 ) { 401 402 event.preventDefault(); 403 404 mouseX = event.touches[ 0 ].pageX - windowHalfX; 405 mouseY = event.touches[ 0 ].pageY - windowHalfY; 406 407 } 408 409 } 410 411 function onDocumentTouchMove( event ) { 412 413 if ( event.touches.length === 1 ) { 414 415 event.preventDefault(); 416 417 mouseX = event.touches[ 0 ].pageX - windowHalfX; 418 mouseY = event.touches[ 0 ].pageY - windowHalfY; 419 420 } 421 422 } 423 424 function animate() { 425 426 requestAnimationFrame( animate ); 427 428 render(); 429 430 } 431 432 function render() { 433 434 camera.position.x += ( mouseX - camera.position.x ) * 0.05; 435 camera.position.y += ( - mouseY + 200 - camera.position.y ) * 0.05; 436 camera.lookAt( scene.position ); 437 438 scene.rotation.y += background_sphere_rotation_speed / 10000; 439 440 renderer.render( scene, camera ); 441 442 } 443 444 } 445 446 447 // CANVAS WAVES BACKGROUND FUNCTION 448 function canvasWavesBackground() { 449 450 // Z-INDEX CORRECTION BACKGROUND OVERLAY AND PATTERN REMOVE 451 $(".grcs_background_content .bg-overlay").remove(); 452 $(".grcs_background_content .bg-pattern").remove(); 453 454 // THREE.JS BASED 455 var SEPARATION = background_waves_dot_spacing, AMOUNTX = background_waves_dot_amount_x, AMOUNTY = background_waves_dot_amount_y; 456 457 var SCREEN_WIDTH = $(".grcs_background_content .level-1").width(); 458 var SCREEN_HEIGHT = $(".grcs_background_content .level-1").height(); 459 var container; 460 var camera, scene, renderer; 461 462 var particles, particle, count = 0; 463 464 var mouseX = 0, mouseY = 0; 465 466 var windowHalfX = SCREEN_WIDTH / 2; 467 var windowHalfY = SCREEN_HEIGHT / 2; 468 469 init(); 470 animate(); 471
472 function init() { 473 474 container = document.createElement("div"); 475 document.getElementById("canvas").appendChild(container); 476 477 camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 ); 478 camera.position.z = background_waves_distance * 100; 479 480 scene = new THREE.Scene(); 481 482 particles = new Array(); 483 484 var PI2 = Math.PI * 2; 485 var material = new THREE.SpriteCanvasMaterial( { 486 487 color: background_waves_dot_color, 488 program: function ( context ) { 489 490 context.beginPath(); 491 context.arc( 0, 0, 0.5, 0, PI2, true ); 492 context.fill(); 493 494 } 495 496 } ); 497 498 var i = 0; 499 500 for ( var ix = 0; ix < AMOUNTX; ix ++ ) { 501 502 for ( var iy = 0; iy < AMOUNTY; iy ++ ) { 503 504 particle = particles[ i ++ ] = new THREE.Sprite( material ); 505 particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 ); 506 particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 ); 507 scene.add( particle ); 508 509 } 510 511 } 512 513 renderer = new THREE.CanvasRenderer(); 514 renderer.setPixelRatio( window.devicePixelRatio ); 515 renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); 516 container.appendChild( renderer.domElement ); 517 renderer.setClearColor( background_waves_background_color ); 518 519 document.addEventListener( "mousemove", onDocumentMouseMove, false ); 520 //document.addEventListener( "touchstart", onDocumentTouchStart, false ); 521 //document.addEventListener( "touchmove", onDocumentTouchMove, false ); 522 523 window.addEventListener( "resize", onWindowResize, false ); 524 525 } 526 527 function onWindowResize() { 528 529 var SCREEN_WIDTH = $(".grcs_background_content .level-1").width(), 530 SCREEN_HEIGHT = $(".grcs_background_content .level-1").height(); 531 532 windowHalfX = SCREEN_WIDTH / 2; 533 windowHalfY = SCREEN_HEIGHT / 2; 534 535 camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; 536 camera.updateProjectionMatrix(); 537 538 renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); 539 540 } 541 542 function onDocumentMouseMove( event ) { 543 544 mouseX = event.clientX - windowHalfX; 545 mouseY = event.clientY - windowHalfY; 546 547 } 548 549 function onDocumentTouchStart( event ) { 550 551 if ( event.touches.length === 1 ) { 552 553 event.preventDefault(); 554 555 mouseX = event.touches[ 0 ].pageX - windowHalfX; 556 mouseY = event.touches[ 0 ].pageY - windowHalfY; 557 558 } 559 560 } 561 562 function onDocumentTouchMove( event ) { 563 564 if ( event.touches.length === 1 ) { 565 566 event.preventDefault(); 567 568 mouseX = event.touches[ 0 ].pageX - windowHalfX; 569 mouseY = event.touches[ 0 ].pageY - windowHalfY; 570 571 } 572 573 } 574 575 576 function animate() { 577 578 requestAnimationFrame( animate ); 579 580 render(); 581 582 583 } 584 585 function render() { 586 587 camera.position.x += ( mouseX - camera.position.x ) * 0.05; 588 camera.position.y += ( - mouseY - camera.position.y ) * 0.05; 589 camera.lookAt( scene.position ); 590 591 var i = 0; 592 593 for ( var ix = 0; ix < AMOUNTX; ix ++ ) { 594 595 for ( var iy = 0; iy < AMOUNTY; iy ++ ) { 596 597 particle = particles[ i++ ]; 598 particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * background_waves_dot_intensity * 5 ) + 599 ( Math.sin( ( iy + count ) * 0.5 ) * background_waves_dot_intensity * 5 ); 600 particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * ( background_waves_dot_expansion / 1.25 ) + 601 ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * ( background_waves_dot_expansion / 1.25 ); 602 603 } 604 605 } 606 607 renderer.render( scene, camera ); 608 609 count += 0.1; 610 611 } 612 613 } 614 615 616 // CANVAS MESH BACKGROUND FUNCTION 617 function meshBackground() { 618 619 var c, 620 ctx, 621 w, 622 h, 623 spacing, 624 spread, 625 basePoint, 626 rightPoint, 627 botPoint, 628 mouse, 629 mouseMoved, 630 cols, 631 rows, 632 points, 633 tick; 634 635 function Point( opt ) { 636 637 this.x = opt.x; 638 this.y = opt.y; 639 this.xBase = this.x; 640 this.yBase = this.y; 641 this.offset = rand( 0, 1000 ); 642 this.duration = rand( 20, 60 ); 643 this.range = rand( 5, 5 ); 644 this.dir = rand( 0, 1 ) > 0.5 ? 1 : -1; 645 this.rad = rand( 2, 4 ); 646 647 } 648 649 Point.prototype.step = function() { 650 651 this.x = this.xBase + this.dir * Math.sin( ( tick + this.offset ) / this.duration ) * this.range; 652 this.y = this.yBase + this.dir * Math.cos( ( tick + this.offset ) / this.duration ) * this.range; 653 654 var angle = angleTo( this, mouse ); 655
656 this.x = this.x + Math.cos( angle ) * 100; 657 this.y = this.y + Math.sin( angle ) * 100; 658 659 }; 660 661 function rand( min, max ) { 662 663 return Math.random() * ( max - min ) + min; 664 665 } 666 667 function dist( p1, p2 ) { 668 669 var dx = p1.x - p2.x, 670 dy = p1.y - p2.y; 671 672 return Math.sqrt( dx * dx + dy * dy ); 673 674 } 675 676 function angleTo( p1, p2 ) { 677 678 var dx = p1.x - p2.x, 679 dy = p1.y - p2.y; 680 681 return Math.atan2( dy, dx ); 682 683 } 684 685 function init() { 686 687 c = document.createElement( 'canvas' ); 688 ctx = c.getContext( '2d' ); 689 mouse = { x: 0, y: 0 }; 690 points = []; 691 spacing = parseFloat(background_mesh_line_mesh_size); 692 spread = spacing * 0.22; 693 document.getElementById("canvas").appendChild( c ); 694 reset(); 695 loop(); 696 697 } 698 699 function reset() { 700 701 w = $(".grcs_background_content .level-1").width(); 702 h = $(".grcs_background_content .level-1").height(); 703 c.width = w; 704 c.height = h; 705 mouse.x = w / 2; 706 mouse.y = h / 2; 707 mouseMoved = false; 708 cols = 0; 709 rows = 0; 710 points.length = 0; 711 tick = 0; 712 create(); 713 714 ctx.strokeStyle = background_mesh_line_color; 715 ctx.lineWidth = 2; 716 717 } 718 719 function create() { 720 721 for( var x = -spacing / 2; x < w + spacing; x += spacing ) { 722 723 cols++; 724 725 for( var y = -spacing / 2; y < h + spacing; y += spacing ) { 726 727 if( x == -spacing / 2 ) { 728 729 rows++; 730 731 } 732 733 points.push( new Point({ 734 735 x: ~~( x + rand( -spread, spread ) ), 736 y: ~~( y + rand( -spread, spread ) ) 737 738 })); 739 740 } 741 742 } 743 744 } 745 746 function step() { 747 748 if( !mouseMoved ) { 749 750 mouse.x = w / 2 + Math.cos( tick / 40 ) * 90; 751 mouse.y = h / 2 + Math.sin( tick / 40 ) * 90; 752 753 } 754 755 points.forEach( function( point ) { 756 757 point.step(); 758 759 }); 760 761 tick++; 762 763 } 764 765 function draw() { 766 767 ctx.clearRect( 0, 0, w, h ); 768 ctx.beginPath(); 769 770 for( var x = 0; x < cols; x++ ) { 771 772 for( var y = 0; y < rows; y++ ) { 773 774 basePoint = points[ x * rows + y ]; 775 rightPoint = x === cols - 1 ? null : points[ ( x + 1 ) * rows + y ]; 776 botPoint = y === rows - 1 ? null : points[ x * rows + y + 1 ]; 777 778 if( rightPoint ) { 779 780 ctx.moveTo( basePoint.x, basePoint.y ); 781 ctx.lineTo( rightPoint.x, rightPoint.y ); 782 783 } 784 785 if( botPoint ) { 786 787 ctx.moveTo( basePoint.x, basePoint.y ); 788 ctx.lineTo( botPoint.x, botPoint.y ); 789 790 } 791 792 } 793 794 } 795 796 ctx.stroke(); 797 798 ctx.fillStyle = 'red'; 799 points.forEach( function( point ) { 800 801 ctx.save(); 802 ctx.beginPath(); 803 ctx.translate( point.x, point.y ); 804 ctx.rotate( Math.PI / 4 ); 805 ctx.rect( 0, 0 , 0, 0 ); 806 ctx.fill(); 807 ctx.stroke(); 808 ctx.restore(); 809 810 }); 811 812 var grad = ctx.createRadialGradient( mouse.x, mouse.y, 0, mouse.x, mouse.y, background_mesh_spotlight_size ); 813 814 grad.addColorStop( 0, 'hsla(0, 0%, 0%, 0.1)' ); 815 grad.addColorStop( 1, 'hsla(0, 0%, 0%, 0.96)' ); 816 817 ctx.fillStyle = grad; 818 ctx.fillRect( 0, 0, w, h ); 819 820 } 821 822 function loop() { 823 824 requestAnimationFrame( loop ); 825 step(); 826 draw(); 827 828 } 829 830 function mousemove( e ) { 831 832 mouseMoved = true; 833 mouse.x = e.pageX; 834 mouse.y = e.pageY; 835 836 } 837 838 window.addEventListener( 'resize', reset ); 839 window.addEventListener( 'mousemove', mousemove ); 840 841 init(); 842 843 // REMOVE OVERLAY AND PATTERN 844 $(".grcs_background_content .bg-overlay").remove(); 845 $(".grcs_background_content .bg-pattern").remove(); 846 } 847 848 849 // CANVAS SPACE BACKGROUND FUNCTION 850 function spaceBackground() { 851 852 $(".grcs_background_content .bg-pattern").remove(); 853 854 /** 855 * A jQuery plugin that generates an interactive starfield inside a canvas element. 856 * 857 * Based on Chiptune's starfield.js: 858 * https://github.com/chiptune/js/blob/master/starfield.html 859 */ 860 ; 861 (function($, window, document, undefined) { 862 // Plugin constructor 863 var Starfield = function(el, options) { 864 this.el = el; 865 this.$el = $(el); 866 this.options = options; 867 868 that = this; 869 }; 870 871 var isPlaying; 872 var isInited = false; 873 var canCanvas = false; 874 var animId; 875 var that; 876 877 // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 878 // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating 879 880 // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel 881 882 // MIT license 883 884 (function() { 885 var lastTime = 0; 886 var vendors = ['ms', 'moz', 'webkit', 'o']; 887 for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 888 window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; 889 window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || 890 window[vendors[x] + 'CancelRequestAnimationFrame']; 891 } 892 893 if (!window.requestAnimationFrame) 894 window.requestAnimationFrame = function(callback, element) { 895 var currTime = new Date().getTime(); 896 var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 897 var id = window.setTimeout(function() { 898 callback(currTime + timeToCall); 899 }, 900 timeToCall); 901 lastTime = currTime + timeToCall; 902 return id; 903 }; 904 905 if (!window.cancelAnimationFrame) 906 window.cancelAnimationFrame = function(id) { 907 clearTimeout(id); 908 }; 909 }()); 910 911 // Plugin prototype 912 Starfield.prototype = { 913 // Default settings 914 defaults: { 915 starColor: background_space_star_color, 916 bgColor: background_space_background_color, 917 mouseMove: parseFloat(background_space_mouse_interaction), 918 speed: background_space_star_speed / 20, 919 quantity: background_space_star_amount, 920 ratio: background_space_star_amount / 2, 921 divclass: "starfield" 922 }, 923 924 // Resize the canvas 925 resizer: function() { 926 var oldStar = this.star; 927 var initW = this.context.canvas.width; 928 var initH = this.context.canvas.height; 929 930 this.w = this.$el.width(); 931 this.h = this.$el.height(); 932 this.x = Math.round(this.w / 2); 933 this.y = Math.round(this.h / 2); 934 935 // Get the ratio of the old height to the new height 936 var ratX = this.w / initW; 937 var ratY = this.h / initH; 938 939 this.context.canvas.width = this.w; 940 this.context.canvas.height = this.h; 941 942 // Recalculate the position of each star proportionally to new w and h 943 for(var i = 0; i < this.n; i++) { 944 this.star[i][0] = oldStar[i][0] * ratX; 945 this.star[i][1] = oldStar[i][1] * ratY; 946 947 this.star[i][3] = this.x + (this.star[i][0] / this.star[i][2]) * this.star_ratio; 948 this.star[i][4] = this.y + (this.star[i][1] / this.star[i][2]) * this.star_ratio; 949 } 950 951 that.context.fillStyle = that.settings.bgColor; 952 this.context.strokeStyle = this.settings.starColor; 953 }, 954 955 init: function() { 956 // Get default settings 957 this.settings = $.extend({}, this.defaults, this.options); 958 959 // Query variables 960 var url = document.location.href; 961 this.n = parseInt(this.settings.quantity); 962 this.flag = true; 963 this.test = true; 964 this.w = 0; 965 this.h = 0; 966 this.x = 0; 967 this.y = 0; 968 this.z = 0; 969 this.star_color_ratio = 0; 970 this.star_x_save = 0; 971 this.star_y_save = 0; 972 this.star_ratio = this.settings.ratio; 973 this.star_speed = this.settings.speed; 974 this.star_speed_save = 0; 975 976 this.star = new Array(this.n); 977 this.color = this.settings.starColor; 978 this.opacity = 0.1; 979 980 this.cursor_x = 0; 981 this.cursor_y = 0; 982 this.mouse_x = 0; 983 this.mouse_y = 0; 984 985 this.canvas_x = 0; 986 this.canvas_y = 0; 987 this.canvas_w = 0; 988 this.canvas_h = 0; 989 990 this.fps = this.settings.fps; 991 992 // Check for device orientation support 993 this.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|IEMobile)/); 994 this.orientationSupport = window.DeviceOrientationEvent !== undefined; 995 this.portrait = null; 996 997 // Inject the canvas element 998 var canvasInit = function() { 999 that.w = that.$el.width(); 1000 that.h = that.$el.height(); 1001 1002 that.initW = that.w; 1003 that.initH = that.h; 1004 1005 that.portrait = that.w < that.h; 1006 1007 that.wrapper = $('<canvas />') 1008 .addClass(that.settings.divclass); 1009 1010 that.wrapper.appendTo(that.el); 1011 1012 that.starz = $('canvas', that.el); 1013 1014 if (that.starz[0].getContext) { // Can canvas? 1015 that.context = that.starz[0].getContext('2d'); 1016 canCanvas = true; 1017 } 1018 1019 that.context.canvas.width = that.w; 1020 that.context.canvas.height = that.h; 1021 } 1022 canvasInit(); 1023 1024 // Create initial star array and canvas context 1025 var starInit = function() { 1026 // Get context for the canvas element 1027 if (canCanvas) { // Check for canvas drawering abilities. 1028 that.x = Math.round(that.w / 2); 1029 that.y = Math.round(that.h / 2); 1030 that.z = (that.w + that.h) / 2; 1031 that.star_color_ratio = 1 / that.z; 1032 that.cursor_x = that.x; 1033 that.cursor_y = that.y; 1034 1035 // Big bang 1036 for (var i = 0; i < that.n; i++) { 1037 that.star[i] = new Array(5); 1038 1039 that.star[i][0] = Math.random() * that.w * 2 - that.x * 2; 1040 that.star[i][1] = Math.random() * that.h * 2 - that.y * 2; 1041 that.star[i][2] = Math.round(Math.random() * that.z); 1042 that.star[i][3] = 0; 1043 that.star[i][4] = 0; 1044 } 1045 1046 // Set the colors 1047 that.context.fillStyle = that.settings.bgColor; 1048 that.context.strokeStyle = that.settings.starColor; 1049 } else { 1050 return; 1051 } 1052 } 1053 starInit(); 1054 1055 isInited = true; 1056 }, 1057 1058 // Iterate over every star on the field and move it slightly 1059 anim: function() { 1060 this.mouse_x = this.cursor_x - this.x; 1061 this.mouse_y = this.cursor_y - this.y; 1062 this.context.fillRect(0, 0, this.w, this.h); 1063 1064 for (var i = 0; i < this.n; i++) { 1065 this.test = true; 1066 this.star_x_save = this.star[i][3]; 1067 this.star_y_save = this.star[i][4]; 1068 this.star[i][0] += this.mouse_x >> 4; 1069 1070 // X coords 1071 if (this.star[i][0] > this.x << 1) { 1072 this.star[i][0] -= this.w << 1; 1073 this.test = false; 1074 } 1075 if (this.star[i][0] < -this.x << 1) { 1076 this.star[i][0] += this.w << 1; 1077 this.test = false; 1078 } 1079 1080 // Y coords 1081 this.star[i][1] += this.mouse_y >> 4; 1082 if (this.star[i][1] > this.y << 1) { 1083 this.star[i][1] -= this.h << 1; 1084 this.test = false; 1085 } 1086 if (this.star[i][1] < -this.y << 1) { 1087 this.star[i][1] += this.h << 1; 1088 this.test = false; 1089 } 1090 1091 // Z coords 1092 this.star[i][2] -= this.star_speed; 1093 if (this.star[i][2] > this.z) { 1094 this.star[i][2] -= this.z; 1095 this.test = false; 1096 } 1097 if (this.star[i][2] < 0) { 1098 this.star[i][2] += this.z; 1099 this.test = false; 1100 } 1101 1102 this.star[i][3] = this.x + (this.star[i][0] / this.star[i][2]) * this.star_ratio; 1103 this.star[i][4] = this.y + (this.star[i][1] / this.star[i][2]) * this.star_ratio; 1104 1105 if (this.star_x_save > 0 && 1106 this.star_x_save < this.w && 1107 this.star_y_save > 0 && 1108 this.star_y_save < this.h && 1109 this.test) { 1110 this.context.lineWidth = (1 - this.star_color_ratio * this.star[i][2]) * 2; 1111 this.context.beginPath(); 1112 this.context.moveTo(this.star_x_save, this.star_y_save); 1113 this.context.lineTo(this.star[i][3], this.star[i][4]); 1114 this.context.stroke(); 1115 this.context.closePath(); 1116 } 1117 } 1118 }, 1119 1120 loop: function() { 1121 this.anim(); 1122 1123 animId = window.requestAnimationFrame(function() { 1124 that.loop() 1125 }); 1126 }, 1127 1128 move: function() { 1129 var doc = document.documentElement; 1130 1131 if (this.orientationSupport && !this.desktop) { 1132 window.addEventListener('deviceorientation', handleOrientation, false); 1133 } else { 1134 window.addEventListener('mousemove', handleMousemove, false); 1135 1136 } 1137 1138 function handleOrientation(event) { 1139 if (event.beta !== null && event.gamma !== null) { 1140 var x = event.gamma, 1141 y = event.beta; 1142 1143 if (!that.portrait) { 1144 x = event.beta * -1; 1145 y = event.gamma; 1146 } 1147 1148 that.cursor_x = (that.w / 2) + (x * 5); 1149 that.cursor_y = (that.h / 2) + (y * 5); 1150 1151 } 1152 } 1153 1154 function handleMousemove(event) { 1155 that.cursor_x = event.pageX || event.clientX + doc.scrollLeft - doc.clientLeft; 1156 that.cursor_y = event.pageY || event.clientY + doc.scrollTop - doc.clientTop; 1157 } 1158 }, 1159 1160 stop: function() { 1161 window.cancelAnimationFrame(animId); 1162 1163 isPlaying = false; 1164 }, 1165 1166 // this.start this whole thing 1167 start: function() { 1168 // Initialize 1169 if (!isInited) { 1170 isInited = true; 1171 this.init(); 1172 } 1173 1174 // Start the animation loop 1175 if (!isPlaying) { 1176 isPlaying = true; 1177 this.loop();
1178 } 1179 window.addEventListener('resize', function() { 1180 that.resizer() 1181 }, false); 1182 1183 window.addEventListener('orientati onchange', function() { 1184 that.resizer() 1185 }, false); 1186 1187 // Move stars on mouse move 1188 if (this.settings.mouseMove) { 1189 this.move(); 1190 } 1191 1192 return this; 1193 } 1194 } 1195 1196 Starfield.defaults = Starfield.prototype.defaults; 1197 1198 // Finally, the actual plugin code 1199 $.fn.starfield = function(options) { 1200 return this.each(function() { 1201 new Starfield(this, options).start(); 1202 }); 1203 } 1204 1205 window.Starfield = Starfield; 1206 1207 })(jQuery, window, document); 1208 1209 $('#canvas').starfield(); 1210 1211 } 1212 1213 1214 1215 // ABSTRACT BACKGROUND FUNCTION 1216 function abstractBackground() { 1217 1218 $(".grcs_background_content .bg-pattern").remove(); 1219 $(".grcs_background_content .bg-overlay").remove(); 1220 1221 var bgInterval = setInterval(function(){ 1222 1223 if( $(".grcs_background_content .level-1 #canvas").offset().top <= 50 ) { 1224 1225 $(".grcs_background_content .level-1 #canvas").css({ WebkitTransition: "all .4s" ,transition: "all .4s" }); 1226 $(".grcs_background_content .level-1 #canvas").css("background",background_abstract_background_color); 1227 1228 clearInterval(bgInterval); 1229 1230 } 1231 1232 }, 50); 1233 1234 var MESH = { 1235 width: background_abstract_shader_width / 100, 1236 height: 1.8, 1237 depth: 60, 1238 segments: 9, 1239 slices: 8, 1240 xRange: background_abstract_width_expansion, 1241 yRange: 0.1, 1242 zRange: 1.0, 1243 ambient: '#666666', 1244 diffuse: '#fff', 1245 speed: background_abstract_move_speed / 10000 1246 }; 1247 1248 var LIGHT = { 1249 count: 2, 1250 xyScalar: 1, 1251 zOffset: 100, 1252 ambient: '#fff', 1253 diffuse: '#b3b3b3', 1254 speed: 0.0002, 1255 gravity: 500, 1256 dampening: 0.95, 1257 minLimit: 10, 1258 maxLimit: null, 1259 minDistance: 20, 1260 maxDistance: 400, 1261 autopilot: true, 1262 draw: false, 1263 bounds: FSS.Vector3.create(), 1264 step: FSS.Vector3.create( 1265 Math.randomInRange(0.2, 1.0), 1266 Math.randomInRange(0.2, 1.0), 1267 Math.randomInRange(0.2, 1.0) 1268 ) 1269 }; 1270 1271 var RENDER = { 1272 renderer: 'canvas' 1273 }; 1274 1275 var now, start = Date.now(); 1276 var center = FSS.Vector3.create(); 1277 var attractor = FSS.Vector3.create(); 1278 var container = document.getElementById('canvas'); 1279 var output = document.getElementById('canvas'); 1280 var renderer, scene, mesh, geometry, material; 1281 var canvasRenderer; 1282 var gui, autopilotController; 1283 1284 function initialise() { 1285 1286 createRenderer(); 1287 createScene(); 1288 createMesh(); 1289 createLights(); 1290 addEventListeners(); 1291 resize(container.offsetWidth, container.offsetHeight); 1292 animate(); 1293 1294 } 1295 1296 function createRenderer() { 1297 1298 canvasRenderer = new FSS.CanvasRenderer(); 1299 setRenderer(RENDER.renderer); 1300 1301 } 1302 1303 function setRenderer(index) { 1304 1305 if (renderer) { 1306 output.removeChild(renderer.element); 1307 } 1308 1309 renderer = canvasRenderer; 1310 1311 renderer.setSize(container.offsetWidth, container.offsetHeight); 1312 output.appendChild(renderer.element); 1313 1314 } 1315 1316 function createScene() { 1317 scene = new FSS.Scene(); 1318 } 1319 1320 function createMesh() { 1321 1322 scene.remove(mesh); 1323 renderer.clear(); 1324 geometry = new FSS.Plane(MESH.width * renderer.width, MESH.height * renderer.height, MESH.segments, MESH.slices); 1325 material = new FSS.Material(MESH.ambient, MESH.diffuse); 1326 mesh = new FSS.Mesh(geometry, material); 1327 scene.add(mesh); 1328 1329 // Augment vertices for animation 1330 var v, vertex; 1331 for (v = geometry.vertices.length - 1; v >= 0; v--) { 1332 1333 vertex = geometry.vertices[v]; 1334 vertex.anchor = FSS.Vector3.clone(vertex.position); 1335 vertex.step = FSS.Vector3.create( 1336 Math.randomInRange(0.2, 1.0), 1337 Math.randomInRange(0.2, 1.0), 1338 Math.randomInRange(0.2, 1.0) 1339 ); 1340 vertex.time = Math.randomInRange(0, Math.PIM2); 1341 1342 } 1343 1344 } 1345 1346 function createLights() { 1347 1348 var l, light; 1349 for (l = scene.lights.length - 1; l >= 0; l--) { 1350 1351 light = scene.lights[l]; 1352 scene.remove(light); 1353 1354 } 1355 1356 renderer.clear(); 1357 1358 for (l = 0; l < LIGHT.count; l++) { 1359 1360 light = new FSS.Light(LIGHT.ambient, LIGHT.diffuse); 1361 light.ambientHex = light.ambient.format(); 1362 light.diffuseHex = light.diffuse.format(); 1363 scene.add(light); 1364 1365 // Augment light for animation 1366 light.mass = Math.randomInRange(0.5, 1); 1367 light.velocity = FSS.Vector3.create(); 1368 light.acceleration = FSS.Vector3.create(); 1369 light.force = FSS.Vector3.create(); 1370 1371 // Ring SVG Circle
1372 light.ring = document.createElementNS(FSS.SVGNS, 'circle'); 1373 light.ring.setAttributeNS(null, 'stroke', light.ambientHex); 1374 light.ring.setAttributeNS(null, 'stroke-width', '0.5'); 1375 light.ring.setAttributeNS(null, 'fill', 'none'); 1376 light.ring.setAttributeNS(null, 'r', '10'); 1377 1378 // Core SVG Circle 1379 light.core = document.createElementNS(FSS.SVGNS, 'circle'); 1380 light.core.setAttributeNS(null, 'fill', light.diffuseHex); 1381 light.core.setAttributeNS(null, 'r', '4'); 1382 1383 } 1384 1385 } 1386 1387 function resize(width, height) { 1388 1389 renderer.setSize(width, height); 1390 FSS.Vector3.set(center, renderer.halfWidth, renderer.halfHeight); 1391 createMesh(); 1392 1393 } 1394 1395 function animate() { 1396 1397 now = Date.now() - start; 1398 update(); 1399 render(); 1400 requestAnimationFrame(animate); 1401 1402 } 1403 1404 function update() { 1405 1406 var ox, oy, oz, l, light, v, vertex, offset = MESH.depth/2; 1407 1408 // Update Bounds 1409 FSS.Vector3.copy(LIGHT.bounds, center); 1410 FSS.Vector3.multiplyScalar(LIGHT.bounds, LIGHT.xyScalar); 1411 1412 // Update Attractor 1413 FSS.Vector3.setZ(attractor, LIGHT.zOffset); 1414 1415 // Overwrite the Attractor position 1416 if (LIGHT.autopilot) { 1417 ox = Math.sin(LIGHT.step[0] * now * LIGHT.speed); 1418 oy = Math.cos(LIGHT.step[1] * now * LIGHT.speed); 1419 FSS.Vector3.set(attractor, 1420 LIGHT.bounds[0]*ox, 1421 LIGHT.bounds[1]*oy, 1422 LIGHT.zOffset); 1423 } 1424 1425 // Animate Lights 1426 for (l = scene.lights.length - 1; l >= 0; l--) { 1427 1428 light = scene.lights[l]; 1429 1430 // Reset the z position of the light 1431 FSS.Vector3.setZ(light.position, LIGHT.zOffset); 1432 1433 // Calculate the force Luke! 1434 var D = Math.clamp(FSS.Vector3.distanceSquared(light.position, attractor), LIGHT.minDistance, LIGHT.maxDistance); 1435 var F = LIGHT.gravity * light.mass / D; 1436 FSS.Vector3.subtractVectors(light.force, attractor, light.position); 1437 FSS.Vector3.normalise(light.force); 1438 FSS.Vector3.multiplyScalar(light.force, F); 1439 1440 // Update the light position 1441 FSS.Vector3.set(light.acceleration); 1442 FSS.Vector3.add(light.acceleration, light.force); 1443 FSS.Vector3.add(light.velocity, light.acceleration); 1444 FSS.Vector3.multiplyScalar(light.velocity, LIGHT.dampening); 1445 FSS.Vector3.limit(light.velocity, LIGHT.minLimit, LIGHT.maxLimit); 1446 FSS.Vector3.add(light.position, light.velocity); 1447 1448 } 1449 1450 // Animate Vertices 1451 for (v = geometry.vertices.length - 1; v >= 0; v--) { 1452 1453 vertex = geometry.vertices[v]; 1454 ox = Math.sin(vertex.time + vertex.step[0] * now * MESH.speed); 1455 oy = Math.cos(vertex.time + vertex.step[1] * now * MESH.speed); 1456 oz = Math.sin(vertex.time + vertex.step[2] * now * MESH.speed); 1457 FSS.Vector3.set(vertex.position, 1458 MESH.xRange*geometry.segmentWidth*ox, 1459 MESH.yRange*geometry.sliceHeight*oy, 1460 MESH.zRange*offset*oz - offset); 1461 FSS.Vector3.add(vertex.position, vertex.anchor); 1462 1463 } 1464 1465 // Set the Geometry to dirty 1466 geometry.dirty = true; 1467 1468 } 1469 1470 function render() { 1471 renderer.render(scene); 1472 1473 // Draw Lights 1474 if (LIGHT.draw) { 1475 1476 var l, lx, ly, light; 1477 for (l = scene.lights.length - 1; l >= 0; l--) { 1478 1479 light = scene.lights[l]; 1480 lx = light.position[0]; 1481 ly = light.position[1]; 1482 renderer.context.lineWidth = 0.5; 1483 renderer.context.beginPath(); 1484 renderer.context.arc(lx, ly, 10, 0, Math.PIM2); 1485 renderer.context.strokeStyle = light.ambientHex; 1486 renderer.context.stroke(); 1487 renderer.context.beginPath(); 1488 renderer.context.arc(lx, ly, 4, 0, Math.PIM2); 1489 renderer.context.fillStyle = light.diffuseHex; 1490 renderer.context.fill(); 1491 1492 } 1493 1494 } 1495 } 1496 1497 function addEventListeners() { 1498 window.addEventListener('resize', onWindowResize); 1499 } 1500 1501 function onMouseMove(event) { 1502 FSS.Vector3.set(attractor, event.x, renderer.height - event.y); 1503 FSS.Vector3.subtract(attractor, center); 1504 } 1505 1506 function onWindowResize(event) { 1507 resize(container.offsetWidth, container.offsetHeight); 1508 render(); 1509 } 1510 1511 initialise(); 1512 1513 1514 if (canvas.getContext) { 1515 1516 var ctx = canvas.getContext('2d'); 1517 var left = true; 1518 1519 canvas.height = screen.height - 60; 1520 canvas.width = screen.width + 20; 1521 1522 initialize(); 1523 initialize(); 1524 1525 var timer = setInterval(function () { 1526 1527 for (var i = 1; i <= 1000; i++) { 1528 1529 ctx.beginPath(); 1530 if (left) { 1531 ctx.moveTo(0, randomize(canvas.height + 10)); 1532 left = false; 1533 } else { 1534 ctx.moveTo(randomize(canvas.width+ 10), 0); 1535 left = true; 1536 } 1537 ctx.lineTo(randomize(canvas.width + 50), randomize(canvas.height + 50)); 1538 ctx.lineTo(randomize(canvas.width + 50), randomize(canvas.height + 50)); 1539 ctx.fillStyle = getRndColor(); 1540 ctx.fill(); 1541 1542 } 1543 1544 }, 5000); 1545 1546 } 1547 1548 } 1549 1550 1551 1552 // GLITCH BACKGROUND FUNCTION
1553 function glitchBackground() { 1554 1555 var bgImage = "background-image: url('"+background_glitch_image+"')"; 1556 $(".grcs_background_content .level-2 .bg-image").append('<div class="glitch-img" style="'+bgImage+'"></div>'); 1557 $( ".grcs_background_content .glitch-img" ).mgGlitch({ 1558 destroy : false, 1559 glitch: true, 1560 scale: Boolean(background_glitch_scale_toggle), 1561 blend : true, 1562 blendModeType : 'hue', 1563 glitch1TimeMin : 600, 1564 glitch1TimeMax : 900, 1565 glitch2TimeMin : 10, 1566 glitch2TimeMax : 115, 1567 zIndexStart : 8, 1568 }); 1569 1570 } 1571 1572 1573 1574 // RAIN BACKGROUND FUNCTION 1575 function rainBackground() { 1576 1577 var canvas = $('#canvas canvas')[0]; 1578 1579 $('#canvas canvas').css("background",background_rain_background_color); 1580 1581 canvas.width = window.innerWidth; 1582 canvas.height = window.innerHeight; 1583 1584 if(canvas.getContext) { 1585 1586 var ctx = canvas.getContext('2d'); 1587 var w = canvas.width; 1588 var h = canvas.height; 1589 1590 ctx.strokeStyle = background_rain_color; 1591 ctx.lineWidth = background_rain_thickness; 1592 ctx.lineCap = 'round'; 1593 1594 1595 var init = []; 1596 var maxParts = background_rain_amount; 1597 1598 for(var a = 0; a < maxParts; a++) { 1599 init.push({ 1600 x: Math.random() * w, 1601 y: Math.random() * h, 1602 l: Math.random() * 1, 1603 xs: -4 + Math.random() * 4 + 2, 1604 ys: Math.random() * 10 + 10 1605 }) 1606 } 1607 1608 var particles = []; 1609 for(var b = 0; b < maxParts; b++) { 1610 particles[b] = init[b]; 1611 } 1612 1613 function draw() { 1614 ctx.clearRect(0, 0, w, h); 1615 for(var c = 0; c < particles.length; c++) { 1616 var p = particles[c]; 1617 ctx.beginPath(); 1618 ctx.moveTo(p.x, p.y); 1619 ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys); 1620 ctx.stroke(); 1621 } 1622 move(); 1623 } 1624 1625 function move() { 1626 for(var b = 0; b < particles.length; b++) { 1627 var p = particles[b]; 1628 p.x += p.xs; 1629 p.y += p.ys; 1630 if(p.x > w || p.y > h) { 1631 p.x = Math.random() * w;
1632 p.y = -20; 1633 } 1634 } 1635 } 1636 1637 setInterval(draw, 26); 1638 1639 } 1640 1641 } 1642 1643 1644 1645 // SKYFALL BACKGROUND FUNCTION 1646 function skyfallBackground() { 1647 1648 $('#canvas canvas').attr("id","skyfallCanvas"); 1649 1650 function hexToRgb(hex) { 1651 1652 hex = hex.replace("#", ""); 1653 1654 var bigint = parseInt(hex, 16); 1655 var r = (bigint >> 16) & 255; 1656 var g = (bigint >> 8) & 255; 1657 var b = bigint & 255; 1658 1659 return r + "," + g + "," + b; 1660 } 1661 1662 var c = document.getElementById("skyfallCanvas"); 1663 var ctx = c.getContext("2d"); 1664 var w = c.width = window.innerWidth; 1665 var h = c.height = window.innerHeight; 1666 var clearColor = 'rgba(0, 0, 0, .1)'; 1667 var max = background_skyfall_amount; 1668 var color_set = hexToRgb(background_skyfall_color); 1669 var drops = []; 1670 1671 function random(min, max) { 1672 return Math.random() * (max - min) + min; 1673 } 1674 1675 function O() {} 1676 1677 O.prototype = { 1678 init: function() { 1679 this.x = random(0, w); 1680 this.y = 0; 1681 this.color = 'rgb('+ color_set +')'; 1682 this.w = 2; 1683 this.h = 1; 1684 this.vy = random(4, 5); 1685 this.vw = 3; 1686 this.vh = 1; 1687 this.size = 2; 1688 this.hit = random(h * .8, h * .9); 1689 this.a = 1; 1690 this.va = .96; 1691 }, 1692 draw: function() { 1693 if (this.y > this.hit) { 1694 ctx.beginPath(); 1695 ctx.moveTo(this.x, this.y - this.h / 2); 1696 1697 ctx.bezierCurveTo( 1698 this.x + this.w / 2, this.y - this.h / 2, 1699 this.x + this.w / 2, this.y + this.h / 2, 1700 this.x, this.y + this.h / 2); 1701 1702 ctx.bezierCurveTo( 1703 this.x - this.w / 2, this.y + this.h / 2, 1704 this.x - this.w / 2, this.y - this.h / 2, 1705 this.x, this.y - this.h / 2); 1706 1707 ctx.strokeStyle = 'rgba('+ color_set + ',' +this.a+')'; 1708 ctx.stroke(); 1709 ctx.closePath(); 1710 1711 } else { 1712 ctx.fillStyle = this.color; 1713 ctx.fillRect(this.x, this.y, this.size, this.size * 5); 1714 } 1715 this.update(); 1716 }, 1717 update: function() { 1718 if(this.y < this.hit){ 1719 this.y += this.vy; 1720 } else { 1721 if(this.a > .03){ 1722 this.w += this.vw; 1723 this.h += this.vh; 1724 if(this.w > 100){ 1725 this.a *= this.va; 1726 this.vw *= .98; 1727 this.vh *= .98; 1728 } 1729 } else { 1730 this.init(); 1731 } 1732 } 1733 1734 } 1735 } 1736 1737 function resize(){ 1738 w = c.width = window.innerWidth; 1739 h = c.height = window.innerHeight; 1740 } 1741 1742 function setup(){ 1743 for(var i = 0; i < max; i++){ 1744 (function(j){ 1745 setTimeout(function(){ 1746 var o = new O(); 1747 o.init(); 1748 drops.push(o); 1749 }, j * 200) 1750 }(i)); 1751 } 1752 } 1753 1754 1755 function anim() { 1756 ctx.fillStyle = clearColor; 1757 ctx.fillRect(0,0,w,h); 1758 for(var i in drops){ 1759 drops[i].draw(); 1760 } 1761 requestAnimationFrame(anim); 1762 } 1763 1764 1765 window.addEventListener("resize", resize); 1766 1767 setup(); 1768 anim(); 1769 1770 } 1771 1772 1773 1774 // GALAXY BACKGROUND FUNCTION
1775 function galaxyBackground() { 1776 1777 1778 // POLYFILL FOR IE 1779 if (!Array.prototype.fill) { 1780 Object.defineProperty(Array.prototype, 'fill', { 1781 value: function(value) { 1782 1783 // Steps 1-2. 1784 if (this == null) { 1785 throw new TypeError('this is null or not defined'); 1786 } 1787 1788 var O = Object(this); 1789 1790 // Steps 3-5. 1791 var len = O.length >>> 0; 1792 1793 // Steps 6-7. 1794 var start = arguments[1]; 1795 var relativeStart = start >> 0; 1796 1797 // Step 8. 1798 var k = relativeStart < 0 ? 1799 Math.max(len + relativeStart, 0) : 1800 Math.min(relativeStart, len); 1801 1802 // Steps 9-10. 1803 var end = arguments[2]; 1804 var relativeEnd = end === undefined ? 1805 len : end >> 0; 1806 1807 // Step 11. 1808 var final = relativeEnd < 0 ? 1809 Math.max(len + relativeEnd, 0) : 1810 Math.min(relativeEnd, len); 1811 1812 // Step 12. 1813 while (k < final) { 1814 O[k] = value; 1815 k++; 1816 } 1817 1818 // Step 13. 1819 return O; 1820 } 1821 }); 1822 } 1823 1824 function hexToRgb(hex) { 1825 1826 hex = hex.replace("#", ""); 1827 1828 var bigint = parseInt(hex, 16); 1829 var r = (bigint >> 16) & 255; 1830 var g = (bigint >> 8) & 255; 1831 var b = bigint & 255; 1832 1833 return r + "," + g + "," + b; 1834 } 1835 1836 $('#canvas canvas').attr("id","canvasGalaxy"); 1837 1838 var c = document.getElementById("canvasGalaxy"); 1839 $ = c.getContext("2d"); 1840 1841 1842 1843 var h = c.height = window.innerHeight, 1844 w = c.width = window.innerWidth, 1845 bg_color = hexToRgb(background_galaxy_background_color), 1846 random = function random(n) { return Math.random() * n; }, 1847 stars = new Array(background_galaxy_star_amount).fill().map(function () { 1848 1849 return { 1850 1851 r: random(w), 1852 s: random(0.01), 1853 a: random(Math.PI * 2) 1854 1855 }; 1856 1857 }); 1858 1859 1860 1861 function loop() { 1862 1863 $.fillStyle = "rgba(" + bg_color + ",.1)"; 1864 $.fillRect(0, 0, w, h); 1865 stars.forEach(function (e) { 1866 e.a += e.s; 1867 $.save(); 1868 $.beginPath(); 1869 $.translate(w / 2, h / 2); 1870 $.rotate(e.a); 1871 $.arc(e.r, e.r, background_galaxy_star_thickness, 0, Math.PI * 2); 1872 $.closePath(); 1873 $.fillStyle = background_galaxy_star_color; 1874 $.fill(); 1875 $.restore(); 1876 }); 1877 1878 requestAnimationFrame(loop); 1879 1880 } loop(); 1881 1882 window.addEventListener("resize", function (e) { 1883 w = c.width = window.innerWidth; 1884 h = c.height = window.innerHeight; 1885 }); 1886 1887 1888 1889 } 1890 1891 1892 1893 // BACKGROUND CONTROLLER 1894 if($(".grcs_background_content").length != 0) { 1895 1896 switch(background_mode) { 1897 1898 case "image": 1899 imageBackground(); 1900 break; 1901 case "slider": 1902 sliderBackground(); 1903 break; 1904 case "kenburns": 1905 kenburnsBackground(); 1906 break; 1907 case "youtube": 1908 youtubeBackground(); 1909 break; 1910 case "color": 1911 colorBackground(); 1912 break; 1913 case "gradient":
1914 gradientBackground(); 1915 break; 1916 case "sphere": 1917 canvasSphereBackground(); 1918 break; 1919 case "waves": 1920 canvasWavesBackground(); 1921 break; 1922 case "mesh": 1923 meshBackground(); 1924 break; 1925 case "space": 1926 spaceBackground(); 1927 break; 1928 case "abstract": 1929 abstractBackground(); 1930 break; 1931 case "glitch": 1932 glitchBackground(); 1933 break; 1934 case "rain": 1935 rainBackground(); 1936 break; 1937 case "skyfall": 1938 skyfallBackground(); 1939 break; 1940 case "galaxy": 1941 galaxyBackground(); 1942 break; 1943 case "custom": 1944 1945 break; 1946 default: 1947 alert( "Error! No background is set or something went wrong" ); 1948 console.log("Error! No background is set or something went wrong"); 1949 break; 1950 1951 } 1952 1953 } 1954 1955 1956});
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.