Created
November 19, 2011 21:01
-
-
Save iloveitaly/1379356 to your computer and use it in GitHub Desktop.
CSS3 Cross Fade Slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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 { | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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