public
Created

CSS3 Cross Fade Slider

  • Download Gist
cross_fade.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
.cssanimations #main_content_holder {
#image_holder {
position:relative;
img {
.transition(opacity, 1s);
top:0;
left:0;
position:absolute;
opacity:0;
border:none;
}
.visible {
opacity:1;
}
}
}
 
.no-cssanimations #main_content_holder {
#image_holder img {
}
}
splash_slider.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
var SplashSlider = new Class({
Implements: [Options],
options: {
rotateDelay: 8000,
crossFadeClass: 'visible',
javascriptFallBack: true,
makeFirstVisible: false,
flashFallBack: '/includes/swf/splash.swf',
flashConfig: {
container: '',
vars: {}
}
},
currentIndex: 0,
splashItemList: [],
currentSplashItem: null,
splashRotateTimer: null,
splashHolder: null,
initialize: function(holder, options) {
this.setOptions(options);
this.splashHolder = $(holder);
this.splashItemList = this.splashHolder.getChildren();
this.currentSplashItem = this.splashItemList[0];
 
if(Modernizr.csstransitions) {
this.changeSplashImage = this.crossFade.bind(this);
if(this.options.makeFirstVisible) {
this.splashItemList[0].addClass(this.options.crossFadeClass);
}
} else if(this.options.javascriptFallBack) {
this.splashItemHeight = this.splashItemList[0].getSize().y;
this.changeSplashImage = this.linearTransition.bind(this);
}
if(!this.options.javascriptFallBack && !Modernizr.csstransitions) {
// then we are using flash
new Swiff(this.options.flashFallBack, this.options.flashConfig);
} else {
splashRotateTimer = this.nextSlide.bind(this).periodical(this.options.rotateDelay);
}
},
nextSlide: function() {
var nextIndex = this.currentIndex + 1;
 
if(nextIndex >= this.splashItemList.length) nextIndex = 0;
 
this.changeSplashImage(nextIndex);
},
 
prevSlide: function() {
var prevIndex = this.currentIndex - 1;
 
if(prevIndex < 0) prevIndex = 0;
 
this.changeSplashImage(prevIndex);
},
linearTransition: function(index) {
this.splashHolder.tween('margin-top', - index * this.splashItemHeight);
this.currentIndex = index;
},
crossFade: function(nextIndex) {
this.splashItemList[this.currentIndex].removeClass(this.options.crossFadeClass);
this.splashItemList[nextIndex].addClass(this.options.crossFadeClass);
this.currentIndex = nextIndex;
}
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.