1/** 2 * Flux Slider modified for Background Manager 3 * Copyright 2011, Joe Lambert <http://www.joelambert.co.uk/flux> 4 * Copyright 2012, Mike Green <[email protected]> 5 * 6 * Free to use under the MIT license. 7 * http://www.opensource.org/licenses/mit-license.php 8 */ 9 10// Flux namespace for Background Manager 11window.myatu_bgm_flux = { 12 version: '1.4.4' 13}; 14 15(function($){ 16 myatu_bgm_flux.slider = function(elem, opts) { 17 var this_ = this, fx, newTrans = []; 18 19 this.element = $(elem); 20 21 // Make a list of all available transitions 22 this.transitions = []; 23 for (fx in myatu_bgm_flux.transitions) { 24 if (myatu_bgm_flux.transitions.hasOwnProperty(fx)) { 25 this.transitions.push(fx); 26 } 27 } 28 29 this.options = $.extend({ 30 autoplay: false, 31 transitions: this.transitions, 32 delay: 4000, 33 width: null, 34 height: null, 35 onTransitionEnd: null 36 }, opts); 37 38 // Set the height/width if given [EXPERIMENTAL!] 39 this.height = this.options.height || null; 40 this.width = this.options.width || null; 41 42 // Filter out non compatible transitions 43 $(this.options.transitions).each(function(index, tran){ 44 var t = new myatu_bgm_flux.transitions[tran](this), compatible = true; 45 46 if(t.options.requires3d && !myatu_bgm_flux.browser.supports3d) { 47 compatible = false; 48 } 49 50 if(t.options.compatibilityCheck) { 51 compatible = t.options.compatibilityCheck(); 52 } 53 54 if(compatible) { 55 newTrans.push(tran); 56 } 57 }); 58 59 this.options.transitions = newTrans; 60 this.playing = false; 61 this.imageContainer = $('#myatu_bgm_img_group'); 62 this.image1 = $('#myatu_bgm_prev'); 63 this.image2 = $('#myatu_bgm_top'); 64 65 // Catch when a transition has finished 66 this.element.bind('fluxTransitionEnd', function(event, data) { 67 // If the slider is currently playing then set the timeout for the next transition 68 // if(this_.isPlaying()) 69 // this_.start(); 70 71 // Are we using a callback instead of events for notifying about transition ends? 72 if(this_.options.onTransitionEnd) { 73 event.preventDefault(); 74 this_.options.onTransitionEnd(data); 75 } 76 }); 77 78 // Should we auto start the slider? 79 if(this.options.autoplay) { 80 this.start(); 81 } 82 83 // Handle swipes 84 this.element.bind('swipeLeft', function(event){ 85 this_.next(null, {direction: 'left'}); 86 }).bind('swipeRight', function(event){ 87 this_.prev(null, {direction: 'right'}); 88 }); 89 90 // Under FF7 autoplay breaks when the current tab loses focus 91 setTimeout(function(){ 92 $(window).focus(function(){ 93 if(this_.isPlaying()) { 94 this_.next(); 95 } 96 }); 97 }, 100); 98 }; 99 100 myatu_bgm_flux.slider.prototype = { 101 constructor: myatu_bgm_flux.slider, 102 playing: false, 103 start: function() { 104 var this_ = this; 105 this.playing = true; 106 this.interval = setInterval(function() { 107 this_.transition(); 108 }, this.options.delay); 109 }, 110 stop: function() { 111 this.playing = false; 112 clearInterval(this.interval); 113 this.interval = null; 114 }, 115 isPlaying: function() { 116 return this.playing; 117 }, 118 next: function(trans, opts) { 119 opts = opts || {}; 120 opts.direction = 'left'; 121 this.showImage(trans, opts); 122 }, 123 prev: function(trans, opts) { 124 opts = opts || {}; 125 opts.direction = 'right'; 126 this.showImage(trans, opts); 127 }, 128 showImage: function(trans, opts) { 129 this.transition(trans, opts); 130 }, 131 transition: function(transition, opts) { 132 var tran = null, index; 133 134 // Swap z-index 135 this.image1.css('z-index', -1998); 136 this.image2.css('z-index', -1999); 137 138 // Show new top image 139 this.image2.show(); 140 141 // Allow a transition to be picked from ALL available transitions (not just the reduced set) 142 if(typeof transition === "undefined" || !myatu_bgm_flux.transitions[transition]) 143 { 144 // Pick a transition at random from the (possibly reduced set of) transitions 145 index = Math.floor(Math.random()*(this.options.transitions.length)); 146 transition = this.options.transitions[index]; 147 } 148 149 try { 150 tran = new myatu_bgm_flux.transitions[transition](this, $.extend(this.options[transition] || {}, opts)); 151 } 152 catch(e) {
153 // If an invalid transition has been provided then use the fallback (default is to just switch the image) 154 tran = new myatu_bgm_flux.transition(this, {fallback: true}); 155 } 156 157 tran.run(); 158 } 159 }; 160}(jQuery)); 161 162/** 163 * Helper object to determine support for various CSS3 functions 164 * @author Joe Lambert 165 */ 166 167(function($) { 168 myatu_bgm_flux.browser = { 169 init: function() { 170 // Have we already been initialised? 171 if(typeof myatu_bgm_flux.browser.supportsTransitions !== "undefined") { 172 return; 173 } 174 175 var // div = document.createElement('div'), 176 prefixes = ['-webkit', '-moz', '-o', '-ms'], 177 //domPrefixes = ['Webkit', 'Moz', 'O', 'Ms'], 178 div3D, mq; 179 180 // Does the current browser support CSS Transitions? 181 if(typeof window.Modernizr !== "undefined" && Modernizr.csstransitions) { 182 myatu_bgm_flux.browser.supportsTransitions = Modernizr.csstransitions; 183 } else { 184 myatu_bgm_flux.browser.supportsTransitions = this.supportsCSSProperty('Transition'); 185 } 186 187 // Does the current browser support 3D CSS Transforms? 188 if(typeof window.Modernizr !== "undefined" && Modernizr.csstransforms3d) { 189 myatu_bgm_flux.browser.supports3d = Modernizr.csstransforms3d; 190 } else { 191 // Custom detection when Modernizr isn't available 192 myatu_bgm_flux.browser.supports3d = this.supportsCSSProperty("Perspective"); 193 194 if (myatu_bgm_flux.browser.supports3d && $('body').get(0).style.hasOwnProperty('webkitPerspective')) { 195 // Double check with a media query (similar to how Modernizr does this) 196 div3D = $('<div id="csstransform3d"></div>'); 197 mq = $('<style media="(transform-3d), ('+prefixes.join('-transform-3d),(')+'-transform-3d)">div#csstransform3d { position: absolute; left: 9px }</style>'); 198 199 $('body').append(div3D); 200 $('head').append(mq); 201 202 myatu_bgm_flux.browser.supports3d = (div3D.get(0).offsetLeft === 9); 203 204 div3D.remove(); 205 mq.remove(); 206 } 207 } 208 }, 209 supportsCSSProperty: function(prop) { 210 var div = document.createElement('div'), 211 //prefixes = ['-webkit', '-moz', '-o', '-ms'], 212 domPrefixes = ['Webkit', 'Moz', 'O', 'Ms'], 213 support = false, i; 214 215 for(i=0; i<domPrefixes.length; i++) { 216 if (domPrefixes[i]+prop in div.style) { 217 support = support || true; 218 } 219 } 220 221 return support; 222 }, 223 translate: function(x, y, z) { 224 x = (typeof x !== "undefined") ? x : 0; 225 y = (typeof y !== "undefined") ? y : 0; 226 z = (typeof z !== "undefined") ? z : 0; 227 228 return 'translate' + (myatu_bgm_flux.browser.supports3d ? '3d(' : '(') + x + 'px,' + y + (myatu_bgm_flux.browser.supports3d ? 'px,' + z + 'px)' : 'px)'); 229 }, 230 231 rotateX: function(deg) { 232 return myatu_bgm_flux.browser.rotate('x', deg); 233 }, 234 235 rotateY: function(deg) { 236 return myatu_bgm_flux.browser.rotate('y', deg); 237 }, 238 239 rotateZ: function(deg) { 240 return myatu_bgm_flux.browser.rotate('z', deg); 241 }, 242 243 rotate: function(axis, deg) { 244 var result = ''; 245 246 if ($.inArray(axis, ['x','y','z']) < 0) { 247 axis = 'z'; 248 } 249 250 deg = (typeof deg !== "undefined") ? deg : 0; 251 252 if(myatu_bgm_flux.browser.supports3d) { 253 result = 'rotate3d(' + (axis === 'x' ? '1' : '0') + ', ' + (axis === 'y' ? '1' : '0') + ', ' + (axis === 'z' ? '1' : '0') + ', ' + deg + 'deg)'; 254 } else if(axis === 'z') { 255 result = 'rotate(' + deg +'deg)'; 256 } 257 258 return result; 259 } 260 }; 261 262 $(function(){ 263 // To continue to work with legacy code, ensure that myatu_bgm_flux.browser is initialised on document ready at the latest 264 myatu_bgm_flux.browser.init(); 265 }); 266}(jQuery)); 267 268(function($){ 269 /** 270 * Helper function for cross-browser CSS3 support, prepends all possible prefixes to all properties passed in 271 * @param {Object} props Ker/value pairs of CSS3 properties 272 */ 273 $.fn.css3 = function(props) { 274 var css = {}, prefixes = ['webkit', 'moz', 'ms', 'o'], i, prop; 275 276 for(prop in props) 277 { 278 if (props.hasOwnProperty(prop)) { 279 // Add the vendor specific versions 280 for (i=0; i<prefixes.length; i++) { 281 css['-'+prefixes[i]+'-'+prop] = props[prop]; 282 } 283 284 // Add the actual version 285 css[prop] = props[prop]; 286 } 287 } 288 289 this.css(css); 290 return this; 291 }; 292 293 /** 294 * Helper function to bind to the correct transition end event 295 * @param {function} callback The function to call when the event fires 296 */ 297 $.fn.transitionEnd = function(callback) {
298 var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd'], 299 i, j, 300 trans_end_event = function(event){ 301 // Automatically stop listening for the event 302 for ( j=0; j<events.length; j++) { 303 $(this).unbind(events[j]); 304 } 305 306 // Perform the callback function 307 if (callback) { 308 callback.call(this, event); 309 } 310 }; 311 312 for (i=0; i < events.length; i++) { 313 this.bind(events[i], trans_end_event); 314 } 315 316 return this; 317 }; 318 319 myatu_bgm_flux.transition = function(fluxslider, opts) { 320 this.options = $.extend({ 321 requires3d: false, 322 after: function() { 323 // Default callback for after the transition has completed 324 } 325 }, opts); 326 327 this.slider = fluxslider; 328 329 // We need to ensure transitions degrade gracefully if the transition is unsupported or not loaded 330 if((this.options.requires3d && !myatu_bgm_flux.browser.supports3d) || !myatu_bgm_flux.browser.supportsTransitions || this.options.fallback === true) 331 { 332 var this_ = this; 333 334 this.options.after = undefined; 335 336 this.options.setup = function() { 337 this_.fallbackSetup(); 338 }; 339 340 this.options.execute = function() { 341 this_.fallbackExecute(); 342 }; 343 } 344 }; 345 346 myatu_bgm_flux.transition.prototype = { 347 constructor: myatu_bgm_flux.transition, 348 hasFinished: false, // This is a lock to ensure that the fluxTransitionEnd event is only fired once per tansition 349 run: function() { 350 var this_ = this; 351 352 // do something 353 if(typeof this.options.setup !== "undefined") { 354 this.options.setup.call(this); 355 } 356 357 // Remove the background image from the top image 358 this.slider.image1.css({ 359 'background-image': 'none' 360 }); 361 362 this.slider.imageContainer.css('overflow', this.options.requires3d ? 'visible' : 'hidden'); 363 364 // For some of the 3D effects using Zepto we need to delay the transitions for some reason 365 setTimeout(function(){ 366 if(typeof this_.options.execute !== "undefined") { 367 this_.options.execute.call(this_); 368 } 369 }, 5); 370 }, 371 finished: function() { 372 if(this.hasFinished) { 373 return; 374 } 375 376 this.hasFinished = true; 377 378 if(this.options.after) { 379 this.options.after.call(this); 380 } 381 382 this.slider.imageContainer.css('overflow', 'hidden'); 383 384 // Trigger an event to signal the end of a transition 385 this.slider.element.trigger('fluxTransitionEnd', { 386 //currentImage: this.slider.getImage(this.slider.currentImageIndex) 387 }); 388 }, 389 fallbackSetup: function() { 390 }, 391 fallbackExecute: function() { 392 this.finished(); 393 } 394 }; 395 396 myatu_bgm_flux.transitions = {}; 397 398 // Flux grid transition 399 myatu_bgm_flux.transition_grid = function(fluxslider, opts) { 400 return new myatu_bgm_flux.transition(fluxslider, $.extend({ 401 columns: 18, 402 rows: 18, 403 forceSquare: false, 404 setup: function() { 405 var imgWidth = this.slider.image1.width(), 406 imgHeight = this.slider.image1.height(), 407 colWidth = Math.floor(imgWidth / this.options.columns), 408 rowHeight = (this.options.forceSquare) ? Math.floor(imgHeight / this.options.rows) : colWidth, 409 rows = (this.options.forceSquare) ? Math.floor(imgHeight / rowHeight) : this.options.rows, 410 //delayBetweenBars = 150, 411 totalLeft = 0, 412 totalTop = 0, 413 fragment = document.createDocumentFragment(), 414 colRemainder = imgWidth - (this.options.columns * colWidth),
415 colAddPerLoop = Math.ceil(colRemainder / this.options.columns), 416 rowRemainder = imgHeight - (rows * rowHeight), 417 rowAddPerLoop = Math.ceil(rowRemainder / rows), 418 //height = this.slider.image1.height(), 419 thisColWidth, thisRowHeight, thisRowRemainder, i, j, add, tile; 420 421 if(this.options.forceSquare) { 422 this.options.rows = rows; 423 } 424 425 for (i=0; i<this.options.columns; i++) { 426 thisColWidth = colWidth; 427 totalTop = 0; 428 429 if(colRemainder > 0) 430 { 431 add = colRemainder >= colAddPerLoop ? colAddPerLoop : colRemainder; 432 thisColWidth += add; 433 colRemainder -= add; 434 } 435 436 for(j=0; j<this.options.rows; j++) { 437 thisRowHeight = rowHeight; 438 thisRowRemainder = rowRemainder; 439 440 if(thisRowRemainder > 0) { 441 add = thisRowRemainder >= rowAddPerLoop ? rowAddPerLoop : thisRowRemainder; 442 thisRowHeight += add; 443 thisRowRemainder -= add; 444 } 445 446 tile = $('<div class="tile tile-'+i+'-'+j+'"></div>').css({ 447 width: thisColWidth+'px', 448 height: thisRowHeight+'px', 449 position: 'absolute', 450 top: totalTop+'px', 451 left: totalLeft+'px' 452 }); 453 454 this.options.renderTile.call(this, tile, i, j, thisColWidth, thisRowHeight, totalLeft, totalTop); 455 456 // Background image adjustment for tile 457 tile.css('background-size', this.slider.image1.css('background-size')); 458 459 fragment.appendChild(tile.get(0)); 460 461 totalTop += thisRowHeight; 462 } 463 464 totalLeft += thisColWidth; 465 } 466 467 // Append the fragement to the surface 468 this.slider.image1.get(0).appendChild(fragment); 469 }, 470 execute: function() { 471 var this_ = this, 472 height = this.slider.image1.height(), 473 bars = this.slider.image1.find('div.barcontainer'); 474 475 this.slider.image2.hide(); 476 477 // Get notified when the last transition has completed 478 bars.last().transitionEnd(function(){ 479 this_.slider.image2.show(); 480 481 this_.finished(); 482 }); 483 484 bars.css3({ 485 'transform': myatu_bgm_flux.browser.rotateX(-90) + ' ' + myatu_bgm_flux.browser.translate(0, height/2, height/2) 486 }); 487 }, 488 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 489 } 490 }, opts)); 491 }; 492}(jQuery)); 493 494(function($) { 495 myatu_bgm_flux.transitions.bars = function(fluxslider, opts) { 496 return new myatu_bgm_flux.transition_grid(fluxslider, $.extend({ 497 columns: 20, 498 rows: 1, 499 delayBetweenBars: 40, 500 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 501 $(elem).css({ 502 'background-image': this.slider.image1.css('background-image'), 503 'background-position': '-'+leftOffset+'px 0px' 504 }).css3({ 505 'transition-duration': '400ms', 506 'transition-timing-function': 'ease-in', 507 'transition-property': 'all', 508 'transition-delay': (colIndex*this.options.delayBetweenBars)+'ms' 509 }); 510 }, 511 execute: function() { 512 var this_ = this, 513 height = this.slider.image1.height(), 514 bars = this.slider.image1.find('div.tile'); 515 516 // Get notified when the last transition has completed 517 $(bars[bars.length-1]).transitionEnd(function(){ 518 this_.finished(); 519 }); 520 521 setTimeout(function(){ 522 bars.css({ 523 'opacity': '0.5' 524 }).css3({ 525 'transform': myatu_bgm_flux.browser.translate(0, height) 526 }); 527 }, 150); 528 529 } 530 }, opts)); 531 }; 532}(jQuery)); 533 534(function($) { 535 myatu_bgm_flux.transitions.bars3d = function(fluxslider, opts) { 536 return new myatu_bgm_flux.transition_grid(fluxslider, $.extend({ 537 requires3d: true, 538 columns: 7, 539 rows: 1, 540 delayBetweenBars: 150, 541 perspective: 1000, 542 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 543 var bar = $('<div class="bar-'+colIndex+'"></div>').css({ 544 width: colWidth+'px', 545 height: '100%', 546 position: 'absolute', 547 top: '0px', 548 left: '0px', 549 'z-index': 200, 550 551 'background-image': this.slider.image1.css('background-image'), 552 'background-position': '-'+leftOffset+'px 0px', 553 'background-repeat': 'no-repeat' 554 }).css3({ 555 'backface-visibility': 'hidden' 556 }), 557 558 bar2 = $(bar.get(0).cloneNode(false)).css({ 559 'background-image': this.slider.image2.css('background-image') 560 }).css3({ 561 'transform': myatu_bgm_flux.browser.rotateX(90) + ' ' + myatu_bgm_flux.browser.translate(0, -rowHeight/2, rowHeight/2) 562 }), 563
564 left = $('<div class="side bar-'+colIndex+'"></div>').css({ 565 width: rowHeight+'px', 566 height: rowHeight+'px', 567 position: 'absolute', 568 top: '0px', 569 left: '0px', 570 background: '#222', 571 'z-index': 190 572 }).css3({ 573 'transform': myatu_bgm_flux.browser.rotateY(90) + ' ' + myatu_bgm_flux.browser.translate(rowHeight/2, 0, -rowHeight/2) + ' ' + myatu_bgm_flux.browser.rotateY(180), 574 'backface-visibility': 'hidden' 575 }), 576 577 right = $(left.get(0).cloneNode(false)).css3({ 578 'transform': myatu_bgm_flux.browser.rotateY(90) + ' ' + myatu_bgm_flux.browser.translate(rowHeight/2, 0, colWidth-rowHeight/2) 579 }); 580 581 $(elem).css({ 582 width: colWidth+'px', 583 height: '100%', 584 position: 'absolute', 585 top: '0px', 586 left: leftOffset+'px', 587 'z-index': colIndex > this.options.columns/2 ? 1000-colIndex : 1000 // Fix for Chrome to ensure that the z-index layering is correct! 588 }).css3({ 589 'transition-duration': '800ms', 590 'transition-timing-function': 'linear', 591 'transition-property': 'all', 592 'transition-delay': (colIndex*this.options.delayBetweenBars)+'ms', 593 'transform-style': 'preserve-3d' 594 }).append(bar).append(bar2).append(left).append(right); 595 }, 596 execute: function() { 597 this.slider.image1.css3({ 598 'perspective': this.options.perspective, 599 'perspective-origin': '50% 50%' 600 }).css({ 601 '-moz-transform': 'perspective('+this.options.perspective+'px)', 602 '-moz-perspective': 'none', 603 '-moz-transform-style': 'preserve-3d' 604 }); 605 606 var this_ = this, 607 height = this.slider.image1.height(), 608 bars = this.slider.image1.find('div.tile'); 609 610 this.slider.image2.hide(); 611 612 // Get notified when the last transition has completed 613 bars.last().transitionEnd(function(event){ 614 this_.slider.image1.css3({ 615 'transform-style': 'flat' 616 }); 617 618 this_.slider.image2.show(); 619 620 this_.finished(); 621 }); 622 623 setTimeout(function(){ 624 bars.css3({ 625 'transform': myatu_bgm_flux.browser.rotateX(-90) + ' ' + myatu_bgm_flux.browser.translate(0, height/2, height/2) 626 }); 627 }, 50); 628 } 629 }, opts)); 630 }; 631}(jQuery)); 632 633(function($) { 634 myatu_bgm_flux.transitions.blinds = function(fluxslider, opts) { 635 return new myatu_bgm_flux.transitions.bars(fluxslider, $.extend({ 636 execute: function() { 637 var this_ = this, 638 //height = this.slider.image1.height(), 639 bars = this.slider.image1.find('div.tile'); 640 641 // Get notified when the last transition has completed 642 $(bars[bars.length-1]).transitionEnd(function(){ 643 this_.finished(); 644 }); 645 646 setTimeout(function(){ 647 bars.css({ 648 'opacity': '0.5' 649 }).css3({ 650 'transform': 'scalex(0.0001)' 651 }); 652 }, 50); 653 } 654 }, opts)); 655 }; 656}(jQuery)); 657 658(function($) { 659 myatu_bgm_flux.transitions.blinds3d = function(fluxslider, opts) { 660 return new myatu_bgm_flux.transitions.tiles3d(fluxslider, $.extend({ 661 forceSquare: false, 662 rows: 1, 663 columns: 6 664 }, opts)); 665 }; 666}(jQuery)); 667 668(function($) { 669 myatu_bgm_flux.transitions.zip = function(fluxslider, opts) { 670 return new myatu_bgm_flux.transitions.bars(fluxslider, $.extend({ 671 execute: function() { 672 var this_ = this, 673 height = this.slider.image1.height(), 674 bars = this.slider.image1.find('div.tile'); 675 676 // Get notified when the last transition has completed 677 $(bars[bars.length-1]).transitionEnd(function(){ 678 this_.finished(); 679 }); 680 681 setTimeout(function(){ 682 bars.each(function(index, bar){ 683 $(bar).css({ 684 'opacity': '0.3' 685 }).css3({ 686 'transform': myatu_bgm_flux.browser.translate(0, (index%2 ? '-'+(2*height) : height)) 687 }); 688 }); 689 }, 20); 690 } 691 }, opts)); 692 }; 693}(jQuery)); 694 695(function($) { 696 myatu_bgm_flux.transitions.blocks = function(fluxslider, opts) { 697 return new myatu_bgm_flux.transition_grid(fluxslider, $.extend({ 698 forceSquare: true, 699 delayBetweenBars: 100, 700 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {
701 var delay = Math.floor(Math.random()*10*this.options.delayBetweenBars); 702 703 $(elem).css({ 704 'background-image': this.slider.image1.css('background-image'), 705 'background-position': '-'+leftOffset+'px -'+topOffset+'px' 706 }).css3({ 707 'transition-duration': '350ms', 708 'transition-timing-function': 'ease-in', 709 'transition-property': 'all', 710 'transition-delay': delay+'ms' 711 }); 712 713 // Keep track of the last elem to fire 714 if(typeof this.maxDelay === "undefined") { 715 this.maxDelay = 0; 716 } 717 718 if(delay > this.maxDelay) { 719 this.maxDelay = delay; 720 this.maxDelayTile = elem; 721 } 722 }, 723 execute: function() { 724 var this_ = this, blocks = this.slider.image1.find('div.tile'); 725 726 // Get notified when the last transition has completed 727 this.maxDelayTile.transitionEnd(function(){ 728 this_.finished(); 729 }); 730 731 setTimeout(function(){ 732 blocks.each(function(index, block){ 733 $(block).css({ 734 'opacity': '0' 735 }).css3({ 736 'transform': 'scale(0.8)' 737 }); 738 }); 739 }, 50); 740 } 741 }, opts)); 742 }; 743}(jQuery)); 744 745(function($) { 746 myatu_bgm_flux.transitions.blocks2 = function(fluxslider, opts) { 747 return new myatu_bgm_flux.transition_grid(fluxslider, $.extend({ 748 cols: 12, 749 forceSquare: true, 750 delayBetweenDiagnols: 150, 751 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 752 //var delay = Math.floor(Math.random()*10*this.options.delayBetweenBars); 753 754 $(elem).css({ 755 'background-image': this.slider.image1.css('background-image'), 756 'background-position': '-'+leftOffset+'px -'+topOffset+'px' 757 }).css3({ 758 'transition-duration': '350ms', 759 'transition-timing-function': 'ease-in', 760 'transition-property': 'all', 761 'transition-delay': (colIndex+rowIndex)*this.options.delayBetweenDiagnols+'ms', 762 'backface-visibility': 'hidden' // trigger hardware acceleration 763 }); 764 }, 765 execute: function() { 766 var this_ = this, blocks = this.slider.image1.find('div.tile'); 767 768 // Get notified when the last transition has completed 769 blocks.last().transitionEnd(function(){ 770 this_.finished(); 771 }); 772 773 setTimeout(function(){ 774 blocks.each(function(index, block){ 775 $(block).css({ 776 'opacity': '0' 777 }).css3({ 778 'transform': 'scale(0.8)' 779 }); 780 }); 781 }, 50); 782 } 783 }, opts)); 784 }; 785}(jQuery)); 786 787(function($) { 788 myatu_bgm_flux.transitions.concentric = function(fluxslider, opts) { 789 return new myatu_bgm_flux.transition(fluxslider, $.extend({ 790 blockSize: 60, 791 delay: 150, 792 alternate: false, 793 setup: function() { 794 var w = this.slider.image1.width(), 795 h = this.slider.image1.height(), 796 largestLength = Math.sqrt(w*w + h*h), // Largest length is the diagonal 797 798 // How many blocks do we need? 799 blockCount = Math.ceil(((largestLength-this.options.blockSize)/2) / this.options.blockSize) + 1, // 1 extra to account for the round border 800 fragment = document.createDocumentFragment(), 801 thisBlockSize, block, i; 802 803 for(i=0; i<blockCount; i++) 804 { 805 thisBlockSize = (2*i*this.options.blockSize)+this.options.blockSize; 806 807 block = $('<div></div>').attr('class', 'block block-'+i).css({ 808 width: thisBlockSize+'px', 809 height: thisBlockSize+'px', 810 position: 'absolute', 811 top: ((h-thisBlockSize)/2)+'px', 812 left: ((w-thisBlockSize)/2)+'px', 813 814 'z-index': 100+(blockCount-i), 815 816 'background-image': this.slider.image1.css('background-image'), 817 'background-size': this.slider.image1.css('background-size'), 818 'background-position': 'center center' 819 }).css3({ 820 'border-radius': thisBlockSize+'px', 821 'transition-duration': '800ms', 822 'transition-timing-function': 'linear', 823 'transition-property': 'all', 824 'transition-delay': ((blockCount-i)*this.options.delay)+'ms' 825 }); 826 827 fragment.appendChild(block.get(0)); 828 } 829 830 //this.slider.image1.append($(fragment)); 831 this.slider.image1.get(0).appendChild(fragment); 832 }, 833 execute: function() { 834 var this_ = this, blocks = this.slider.image1.find('div.block'); 835 836 // Get notified when the last transition has completed 837 $(blocks[0]).transitionEnd(function(){ 838 this_.finished(); 839 }); 840 841 setTimeout(function(){ 842 blocks.each(function(index, block){ 843 $(block).css({ 844 'opacity': '0' 845 }).css3({ 846 'transform': myatu_bgm_flux.browser.rotateZ((!this_.options.alternate || index%2 ? '' : '-')+'90') 847 }); 848 }); 849 }, 50); 850 } 851 }, opts)); 852 }; 853}(jQuery)); 854 855(function($) { 856 myatu_bgm_flux.transitions.warp = function(fluxslider, opts) { 857 return new myatu_bgm_flux.transitions.concentric(fluxslider, $.extend({ 858 delay: 30, 859 alternate: true 860 }, opts)); 861 }; 862}(jQuery)); 863 864(function($) { 865 myatu_bgm_flux.transitions.cube = function(fluxslider, opts) { 866 return new myatu_bgm_flux.transition(fluxslider, $.extend({ 867 requires3d: true, 868 barWidth: 100, 869 direction: 'left', 870 perspective: 1000, 871 setup: function() { 872 var width = this.slider.image1.width(), 873 height = this.slider.image1.height(), 874 css, currentFace, nextFace; 875 876 // Setup the container to allow 3D perspective 877 878 this.slider.image1.css3({ 879 'perspective': this.options.perspective, 880 'perspective-origin': '50% 50%' 881 }); 882
883 this.cubeContainer = $('<div class="cube"></div>').css({ 884 width: width+'px', 885 height: height+'px', 886 position: 'relative' 887 }).css3({ 888 'transition-duration': '800ms', 889 'transition-timing-function': 'linear', 890 'transition-property': 'all', 891 'transform-style': 'preserve-3d' 892 }); 893 894 css = { 895 height: '100%', 896 width: '100%', 897 position: 'absolute', 898 top: '0px', 899 left: '0px' 900 }; 901 902 currentFace = $('<div class="face current"></div>').css($.extend(css, { 903 'background' : this.slider.image1.css('background-image'), 904 'background-size': this.slider.image1.css('background-size') 905 })).css3({ 906 'backface-visibility': 'hidden' 907 }); 908 909 this.cubeContainer.append(currentFace); 910 911 nextFace = $('<div class="face next"></div>').css($.extend(css, { 912 background: this.slider.image2.css('background-image') 913 })).css3({ 914 'transform' : this.options.transitionStrings.call(this, this.options.direction, 'nextFace'), 915 'backface-visibility': 'hidden' 916 }); 917 918 this.cubeContainer.append(nextFace); 919 920 this.slider.image1.append(this.cubeContainer); 921 }, 922 execute: function() { 923 var this_ = this; 924 //width = this.slider.image1.width(), 925 //height = this.slider.image1.height(); 926 927 this.slider.image2.hide(); 928 this.cubeContainer.transitionEnd(function(){ 929 this_.slider.image2.show(); 930 931 this_.finished(); 932 }); 933 934 setTimeout(function(){ 935 this_.cubeContainer.css3({ 936 'transform' : this_.options.transitionStrings.call(this_, this_.options.direction, 'container') 937 }); 938 }, 50); 939 }, 940 transitionStrings: function(direction, elem) { 941 var width = this.slider.image1.width(), 942 height = this.slider.image1.height(), 943 t = { 944 'up' : { 945 'nextFace': myatu_bgm_flux.browser.rotateX(-90) + ' ' + myatu_bgm_flux.browser.translate(0, height/2, height/2), 946 'container': myatu_bgm_flux.browser.rotateX(90) + ' ' + myatu_bgm_flux.browser.translate(0, -height/2, height/2) 947 }, 948 'down' : { 949 'nextFace': myatu_bgm_flux.browser.rotateX(90) + ' ' + myatu_bgm_flux.browser.translate(0, -height/2, height/2), 950 'container': myatu_bgm_flux.browser.rotateX(-90) + ' ' + myatu_bgm_flux.browser.translate(0, height/2, height/2) 951 }, 952 'left' : { 953 'nextFace': myatu_bgm_flux.browser.rotateY(90) + ' ' + myatu_bgm_flux.browser.translate(width/2, 0, width/2), 954 'container': myatu_bgm_flux.browser.rotateY(-90) + ' ' + myatu_bgm_flux.browser.translate(-width/2, 0, width/2) 955 }, 956 'right' : { 957 'nextFace': myatu_bgm_flux.browser.rotateY(-90) + ' ' + myatu_bgm_flux.browser.translate(-width/2, 0, width/2), 958 'container': myatu_bgm_flux.browser.rotateY(90) + ' ' + myatu_bgm_flux.browser.translate(width/2, 0, width/2) 959 } 960 }; 961 962 return (t[direction] && t[direction][elem]) ? t[direction][elem] : false; 963 } 964 }, opts)); 965 }; 966}(jQuery)); 967 968(function($) { 969 myatu_bgm_flux.transitions.tiles3d = function(fluxslider, opts) { 970 return new myatu_bgm_flux.transition_grid(fluxslider, $.extend({ 971 requires3d: true, 972 forceSquare: true, 973 columns: 5, 974 perspective: 600, 975 delayBetweenBarsX: 200, 976 delayBetweenBarsY: 150, 977 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 978 var tile = $('<div></div>').css({ 979 width: colWidth+'px', 980 height: rowHeight+'px', 981 position: 'absolute', 982 top: '0px', 983 left: '0px', 984 //'z-index': 200, // Removed to make compatible with FF10 (Chrome bug seems to have been fixed) 985 986 'background-image': this.slider.image1.css('background-image'), 987 'background-position': '-'+leftOffset+'px -'+topOffset+'px', 988 'background-size': this.slider.image1.css('background-size'), 989 'background-repeat': 'no-repeat',
990 '-moz-transform': 'translateZ(1px)' 991 }).css3({ 992 'backface-visibility': 'hidden' 993 }), 994 tile2 = $(tile.get(0).cloneNode(false)).css({ 995 'background-image': this.slider.image2.css('background-image') 996 //'z-index': 190 // Removed to make compatible with FF10 (Chrome bug seems to have been fixed) 997 }).css3({ 998 'transform': myatu_bgm_flux.browser.rotateY(180), 999 'backface-visibility': 'hidden' 1000 }); 1001 1002 $(elem).css({ 1003 'z-index': (colIndex > this.options.columns/2 ? 500-colIndex : 500) + (rowIndex > this.options.rows/2 ? 500-rowIndex : 500) // Fix for Chrome to ensure that the z-index layering is correct! 1004 }).css3({ 1005 'transition-duration': '800ms', 1006 'transition-timing-function': 'ease-out', 1007 'transition-property': 'all', 1008 'transition-delay': (colIndex*this.options.delayBetweenBarsX+rowIndex*this.options.delayBetweenBarsY)+'ms', 1009 'transform-style': 'preserve-3d' 1010 }).append(tile).append(tile2); 1011 }, 1012 execute: function() { 1013 var this_ = this, tiles = this.slider.image1.find('div.tile'); 1014 1015 this.slider.image1.css3({ 1016 'perspective': this.options.perspective, 1017 'perspective-origin': '50% 50%' 1018 }); 1019 1020 this.slider.image2.hide(); 1021 1022 // Get notified when the last transition has completed 1023 tiles.last().transitionEnd(function(event){ 1024 this_.slider.image2.show(); 1025 1026 this_.finished(); 1027 }); 1028 1029 setTimeout(function(){ 1030 tiles.css3({ 1031 'transform': myatu_bgm_flux.browser.rotateY(180) 1032 }); 1033 }, 50); 1034 } 1035 }, opts)); 1036 }; 1037}(jQuery)); 1038 1039(function($) { 1040 myatu_bgm_flux.transitions.turn = function(fluxslider, opts) { 1041 return new myatu_bgm_flux.transition(fluxslider, $.extend({ 1042 requires3d: true, 1043 perspective: 1300, 1044 direction: 'left', 1045 setup: function() { 1046 var tab = $('<div class="tab"></div>').css({ 1047 width: '50%', 1048 height: '100%', 1049 position: 'absolute', 1050 top: '0px', 1051 left: this.options.direction === 'left' ? '50%' : '0%', 1052 'z-index':101 1053 }).css3({ 1054 'transform-style': 'preserve-3d', 1055 'transition-duration': '1000ms', 1056 'transition-timing-function': 'ease-out', 1057 'transition-property': 'all', 1058 'transform-origin': this.options.direction === 'left' ? 'left center' : 'right center' 1059 }), 1060 1061 current = $('<div></div>').css({ 1062 position: 'absolute', 1063 top: '0', 1064 left: this.options.direction === 'left' ? '0' : '50%', 1065 width: '50%', 1066 height: '100%', 1067 'background-image': this.slider.image1.css('background-image'), 1068 'background-size': this.slider.image1.css('background-size'), 1069 'background-position': (this.options.direction === 'left' ? 0 : '-'+(this.slider.image1.width()/2))+'px 0', 1070 'z-index':100 1071 }), 1072 1073 overlay = $('<div class="overlay"></div>').css({ 1074 position: 'absolute', 1075 top: '0', 1076 left: this.options.direction === 'left' ? '50%' : '0', 1077 width: '50%', 1078 height: '100%', 1079 background: '#000', 1080 opacity: 1 1081 }).css3({ 1082 'transition-duration': '800ms', 1083 'transition-timing-function': 'linear', 1084 'transition-property': 'opacity' 1085 }), 1086
1087 container = $('<div></div>').css3({ 1088 width: '100%', 1089 height: '100%' 1090 }).css3({ 1091 'perspective': this.options.perspective, 1092 'perspective-origin': '50% 50%' 1093 }).append(tab).append(current).append(overlay); 1094 1095 /* front = */ 1096 $('<div></div>').appendTo(tab).css({ 1097 'background-image': this.slider.image1.css('background-image'), 1098 'background-size': this.slider.image1.css('background-size'), 1099 'background-position': (this.options.direction === 'left' ? '-'+(this.slider.image1.width()/2) : 0)+'px 0', 1100 width: '100%', 1101 height: '100%', 1102 position: 'absolute', 1103 top: '0', 1104 left: '0', 1105 '-moz-transform': 'translateZ(1px)' 1106 }).css3({ 1107 'backface-visibility': 'hidden' 1108 }); 1109 1110 /* back = */ 1111 $('<div></div>').appendTo(tab).css({ 1112 'background-image': this.slider.image2.css('background-image'), 1113 'background-size': this.slider.image2.css('background-size'), 1114 'background-position': (this.options.direction === 'left' ? 0 : '-'+(this.slider.image1.width()/2))+'px 0', 1115 width: '100%', 1116 height: '100%', 1117 position: 'absolute', 1118 top: '0', 1119 left: '0' 1120 }).css3({ 1121 transform: myatu_bgm_flux.browser.rotateY(180), 1122 'backface-visibility': 'hidden' 1123 }); 1124 1125 1126 this.slider.image1.append(container); 1127 }, 1128 execute: function() { 1129 var this_ = this; 1130 1131 this.slider.image1.find('div.tab').first().transitionEnd(function(){ 1132 this_.finished(); 1133 }); 1134 1135 setTimeout(function(){ 1136 this_.slider.image1.find('div.tab').css3({ 1137 // 179 not 180 so that the tab rotates the correct way in Firefox 1138 transform: myatu_bgm_flux.browser.rotateY(this_.options.direction === 'left' ? -179 : 179) 1139 }); 1140 this_.slider.image1.find('div.overlay').css({ 1141 opacity: 0 1142 }); 1143 }, 50); 1144 } 1145 }, opts)); 1146 }; 1147}(jQuery)); 1148 1149(function($) { 1150 myatu_bgm_flux.transitions.slide = function(fluxslider, opts) { 1151 return new myatu_bgm_flux.transition(fluxslider, $.extend({ 1152 direction: 'left', 1153 setup: function() { 1154 var width = this.slider.image1.width(), 1155 height = this.slider.image1.height(), 1156 1157 currentImage = $('<div class="current"></div>').css({ 1158 height: height+'px', 1159 width: width+'px', 1160 position: 'absolute', 1161 top: '0px', 1162 left: '0px', 1163 background: this.slider[this.options.direction === 'left' ? 'image1' : 'image2'].css('background-image'), 1164 'background-size': this.slider[this.options.direction === 'left' ? 'image1' : 'image2'].css('background-size') 1165 }).css3({ 1166 'backface-visibility': 'hidden' 1167 }), 1168 1169 nextImage = $('<div class="next"></div>').css({ 1170 height: height+'px', 1171 width: width+'px', 1172 position: 'absolute', 1173 top: '0px', 1174 left: width+'px', 1175 background: this.slider[this.options.direction === 'left' ? 'image2' : 'image1'].css('background-image'), 1176 'background-size': this.slider[this.options.direction === 'left' ? 'image2' : 'image1'].css('background-size') 1177 }).css3({ 1178 'backface-visibility': 'hidden' 1179 }); 1180
1181 this.slideContainer = $('<div class="slide"></div>').css({ 1182 width: (2*width)+'px', 1183 height: height+'px', 1184 position: 'relative', 1185 left: this.options.direction === 'left' ? '0px' : -width+'px', 1186 'z-index': 101 1187 }).css3({ 1188 'transition-duration': '600ms', 1189 'transition-timing-function': 'ease-in', 1190 'transition-property': 'all' 1191 }); 1192 1193 this.slideContainer.append(currentImage).append(nextImage); 1194 1195 this.slider.image1.append(this.slideContainer); 1196 }, 1197 execute: function() { 1198 var this_ = this, 1199 delta = this.slider.image1.width(); 1200 1201 if(this.options.direction === 'left') { 1202 delta = -delta; 1203 } 1204 1205 this.slideContainer.transitionEnd(function(){ 1206 this_.finished(); 1207 }); 1208 1209 setTimeout(function(){ 1210 this_.slideContainer.css3({ 1211 'transform' : myatu_bgm_flux.browser.translate(delta) 1212 }); 1213 }, 50); 1214 } 1215 }, opts)); 1216 }; 1217}(jQuery)); 1218 1219(function($) { 1220 myatu_bgm_flux.transitions.swipe = function(fluxslider, opts) { 1221 return new myatu_bgm_flux.transition(fluxslider, $.extend({ 1222 setup: function() { 1223 var img = $('<div></div>').css({ 1224 width: '100%', 1225 height: '100%', 1226 'background-image': this.slider.image1.css('background-image'), 1227 'background-size': this.slider.image1.css('background-size') 1228 }).css3({ 1229 'transition-duration': '1200ms', 1230 'transition-timing-function': 'ease-in', 1231 'transition-property': 'all', 1232 'mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,1) 52%, rgba(0,0,0,1) 100%)', 1233 'mask-position': '70%', 1234 'mask-size': '300%' 1235 }); 1236 1237 this.slider.image1.append(img); 1238 }, 1239 execute: function() { 1240 var this_ = this, 1241 img = this.slider.image1.find('div'); 1242 1243 // Get notified when the last transition has completed 1244 $(img).transitionEnd(function(){ 1245 this_.finished(); 1246 }); 1247 1248 setTimeout(function(){ 1249 $(img).css3({ 1250 'mask-position': '30%' 1251 }); 1252 }, 50); 1253 }, 1254 compatibilityCheck: function() { 1255 return myatu_bgm_flux.browser.supportsCSSProperty('MaskImage'); 1256 } 1257 }, opts)); 1258 }; 1259}(jQuery)); 1260 1261(function($) { 1262 myatu_bgm_flux.transitions.dissolve = function(fluxslider, opts) { 1263 return new myatu_bgm_flux.transition(fluxslider, $.extend({ 1264 setup: function() { 1265 var img = $('<div class="image"></div>').css({ 1266 width: '100%', 1267 height: '100%', 1268 'background-image': this.slider.image1.css('background-image'), 1269 'background-size': this.slider.image1.css('background-size') 1270 }).css3({ 1271 'transition-duration': '600ms', 1272 'transition-timing-function': 'ease-in', 1273 'transition-property': 'opacity' 1274 }); 1275 1276 this.slider.image1.append(img); 1277 }, 1278 execute: function() { 1279 var this_ = this, 1280 img = this.slider.image1.find('div.image'); 1281 1282 // Get notified when the last transition has completed 1283 $(img).transitionEnd(function(){ 1284 this_.finished(); 1285 }); 1286 1287 setTimeout(function(){ 1288 $(img).css({ 1289 'opacity': '0.0' 1290 }); 1291 }, 50); 1292 } 1293 }, opts)); 1294 }; 1295}(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.