Skip to content

Instantly share code, notes, and snippets.

@iloveitaly
Created November 19, 2011 21:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iloveitaly/1379356 to your computer and use it in GitHub Desktop.
Save iloveitaly/1379356 to your computer and use it in GitHub Desktop.
CSS3 Cross Fade Slider
.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 {
}
}
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;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment