Created
April 30, 2014 03:43
-
-
Save sivagao/11417686 to your computer and use it in GitHub Desktop.
A Pen by siva Gao.
This file contains hidden or 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
| div#da-slider.da-slider | |
| each item in [1,2,3,4] | |
| div.da-slide | |
| h2 Warm Welcome | |
| p When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. | |
| a.da-link Read More | |
| .da-img | |
| img(src='http://tympanus.net/Development/ParallaxContentSlider/images/1.png') | |
| header. | |
| <h1>Parallax Content Slider <span>with CSS3 and jQuery</span></h1> | |
| <h2>A content slider with delayed animations and background parallax effect</h2> | |
| <p><a href="http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/">parallax-content-slider-with-css3-and-jquery</a></p> |
This file contains hidden or 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
| (function( $, undefined ) { | |
| /* | |
| * Slider object. | |
| */ | |
| $.Slider = function( options, element ) { | |
| this.$el = $( element ); | |
| this._init( options ); | |
| }; | |
| $.Slider.defaults = { | |
| current : 0, // index of current slide | |
| bgincrement : 50, // increment the bg position (parallax effect) when sliding | |
| autoplay : false,// slideshow on / off | |
| interval : 4000 // time between transitions | |
| }; | |
| $.Slider.prototype = { | |
| _init : function( options ) { | |
| this.options = $.extend( true, {}, $.Slider.defaults, options ); | |
| this.$slides = this.$el.children('div.da-slide'); | |
| this.slidesCount = this.$slides.length; | |
| this.current = this.options.current; | |
| if( this.current < 0 || this.current >= this.slidesCount ) { | |
| this.current = 0; | |
| } | |
| this.$slides.eq( this.current ).addClass( 'da-slide-current' ); | |
| var $navigation = $( '<nav class="da-dots"/>' ); | |
| for( var i = 0; i < this.slidesCount; ++i ) { | |
| $navigation.append( '<span/>' ); | |
| } | |
| $navigation.appendTo( this.$el ); | |
| this.$pages = this.$el.find('nav.da-dots > span'); | |
| this.$navNext = this.$el.find('span.da-arrows-next'); | |
| this.$navPrev = this.$el.find('span.da-arrows-prev'); | |
| this.isAnimating = false; | |
| this.bgpositer = 0; | |
| this.cssAnimations = Modernizr.cssanimations; | |
| this.cssTransitions = Modernizr.csstransitions; | |
| if( !this.cssAnimations || !this.cssAnimations ) { | |
| this.$el.addClass( 'da-slider-fb' ); | |
| } | |
| this._updatePage(); | |
| // load the events | |
| this._loadEvents(); | |
| // slideshow | |
| if( this.options.autoplay ) { | |
| this._startSlideshow(); | |
| } | |
| }, | |
| _navigate : function( page, dir ) { | |
| var $current = this.$slides.eq( this.current ), $next, _self = this; | |
| if( this.current === page || this.isAnimating ) return false; | |
| this.isAnimating = true; | |
| // check dir | |
| var classTo, classFrom, d; | |
| if( !dir ) { | |
| ( page > this.current ) ? d = 'next' : d = 'prev'; | |
| } | |
| else { | |
| d = dir; | |
| } | |
| if( this.cssAnimations && this.cssAnimations ) { | |
| if( d === 'next' ) { | |
| classTo = 'da-slide-toleft'; | |
| classFrom = 'da-slide-fromright'; | |
| ++this.bgpositer; | |
| } | |
| else { | |
| classTo = 'da-slide-toright'; | |
| classFrom = 'da-slide-fromleft'; | |
| --this.bgpositer; | |
| } | |
| this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' ); | |
| } | |
| this.current = page; | |
| $next = this.$slides.eq( this.current ); | |
| if( this.cssAnimations && this.cssAnimations ) { | |
| var rmClasses = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright'; | |
| $current.removeClass( rmClasses ); | |
| $next.removeClass( rmClasses ); | |
| $current.addClass( classTo ); | |
| $next.addClass( classFrom ); | |
| $current.removeClass( 'da-slide-current' ); | |
| $next.addClass( 'da-slide-current' ); | |
| } | |
| // fallback | |
| if( !this.cssAnimations || !this.cssAnimations ) { | |
| $next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( { | |
| left : '0%' | |
| }, 1000, function() { | |
| _self.isAnimating = false; | |
| }); | |
| $current.stop().animate( { | |
| left : ( d === 'next' ) ? '-100%' : '100%' | |
| }, 1000, function() { | |
| $current.removeClass( 'da-slide-current' ); | |
| }); | |
| } | |
| this._updatePage(); | |
| }, | |
| _updatePage : function() { | |
| this.$pages.removeClass( 'da-dots-current' ); | |
| this.$pages.eq( this.current ).addClass( 'da-dots-current' ); | |
| }, | |
| _startSlideshow : function() { | |
| var _self = this; | |
| this.slideshow = setTimeout( function() { | |
| var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0; | |
| _self._navigate( page, 'next' ); | |
| if( _self.options.autoplay ) { | |
| _self._startSlideshow(); | |
| } | |
| }, this.options.interval ); | |
| }, | |
| page : function( idx ) { | |
| if( idx >= this.slidesCount || idx < 0 ) { | |
| return false; | |
| } | |
| if( this.options.autoplay ) { | |
| clearTimeout( this.slideshow ); | |
| this.options.autoplay = false; | |
| } | |
| this._navigate( idx ); | |
| }, | |
| _loadEvents : function() { | |
| var _self = this; | |
| this.$pages.on( 'click.cslider', function( event ) { | |
| _self.page( $(this).index() ); | |
| return false; | |
| }); | |
| this.$navNext.on( 'click.cslider', function( event ) { | |
| if( _self.options.autoplay ) { | |
| clearTimeout( _self.slideshow ); | |
| _self.options.autoplay = false; | |
| } | |
| var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0; | |
| _self._navigate( page, 'next' ); | |
| return false; | |
| }); | |
| this.$navPrev.on( 'click.cslider', function( event ) { | |
| if( _self.options.autoplay ) { | |
| clearTimeout( _self.slideshow ); | |
| _self.options.autoplay = false; | |
| } | |
| var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1; | |
| _self._navigate( page, 'prev' ); | |
| return false; | |
| }); | |
| if( this.cssTransitions ) { | |
| if( !this.options.bgincrement ) { | |
| this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) { | |
| if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) { | |
| _self.isAnimating = false; | |
| } | |
| }); | |
| } | |
| else { | |
| this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) { | |
| if( event.target.id === _self.$el.attr( 'id' ) ) | |
| _self.isAnimating = false; | |
| }); | |
| } | |
| } | |
| } | |
| }; | |
| var logError = function( message ) { | |
| if ( this.console ) { | |
| console.error( message ); | |
| } | |
| }; | |
| $.fn.cslider = function( options ) { | |
| if ( typeof options === 'string' ) { | |
| var args = Array.prototype.slice.call( arguments, 1 ); | |
| this.each(function() { | |
| var instance = $.data( this, 'cslider' ); | |
| if ( !instance ) { | |
| logError( "cannot call methods on cslider prior to initialization; " + | |
| "attempted to call method '" + options + "'" ); | |
| return; | |
| } | |
| if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { | |
| logError( "no such method '" + options + "' for cslider instance" ); | |
| return; | |
| } | |
| instance[ options ].apply( instance, args ); | |
| }); | |
| } | |
| else { | |
| this.each(function() { | |
| var instance = $.data( this, 'cslider' ); | |
| if ( !instance ) { | |
| $.data( this, 'cslider', new $.Slider( options, this ) ); | |
| } | |
| }); | |
| } | |
| return this; | |
| }; | |
| })( jQuery ); | |
| $(function() { | |
| $('#da-slider').cslider(); | |
| }); |
This file contains hidden or 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
| .da-slider{ | |
| width: 100%; | |
| min-width: 520px; | |
| height: 400px; | |
| position: relative; | |
| margin: 30px auto; | |
| overflow: hidden; | |
| background: transparent url(http://tympanus.net/Development/ParallaxContentSlider/images/waves.gif) repeat 0% 0%; | |
| border-top: 8px solid #efc34a; | |
| border-bottom: 8px solid #efc34a; | |
| box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff; | |
| -webkit-transition: background-position 1.4s ease-in-out 0.3s; | |
| -moz-transition: background-position 1.4s ease-in-out 0.3s; | |
| -o-transition: background-position 1.4s ease-in-out 0.3s; | |
| -ms-transition: background-position 1.4s ease-in-out 0.3s; | |
| transition: background-position 1.4s ease-in-out 0.3s; | |
| } | |
| .da-slide{ | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0px; | |
| left: 0px; | |
| font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; | |
| text-align: left; | |
| } | |
| .da-slide-current{ | |
| z-index: 1000; | |
| } | |
| .da-slider-fb .da-slide{ | |
| left: 100%; | |
| } | |
| .da-slider-fb .da-slide.da-slide-current{ | |
| left: 0px; | |
| } | |
| .da-slide h2, | |
| .da-slide p, | |
| .da-slide .da-link, | |
| .da-slide .da-img{ | |
| position: absolute; | |
| opacity: 0; | |
| left: 110%; | |
| } | |
| .da-slider-fb .da-slide h2, | |
| .da-slider-fb .da-slide p, | |
| .da-slider-fb .da-slide .da-link{ | |
| left: 10%; | |
| opacity: 1; | |
| } | |
| .da-slider-fb .da-slide .da-img{ | |
| left: 60%; | |
| opacity: 1; | |
| } | |
| .da-slide h2{ | |
| color: #fff; | |
| font-size: 66px; | |
| width: 50%; | |
| top: 60px; | |
| white-space: nowrap; | |
| z-index: 10; | |
| text-shadow: 1px 1px 1px rgba(0,0,0,0.1); | |
| font-family: 'Economica', Arial, sans-serif; | |
| font-weight: 700; | |
| } | |
| .da-slide p{ | |
| width: 45%; | |
| top: 155px; | |
| color: #916c05; | |
| font-size: 18px; | |
| line-height: 26px; | |
| height: 80px; | |
| overflow: hidden; | |
| font-style: italic; | |
| font-family: 'Economica', Arial, sans-serif; | |
| font-weight: 400; | |
| font-style: italic; | |
| } | |
| .da-slide .da-img{ | |
| text-align: center; | |
| width: 30%; | |
| top: 70px; | |
| height: 256px; | |
| line-height: 320px; | |
| left: 110%; /*60%*/ | |
| } | |
| .da-slide .da-link{ | |
| top: 270px; /*depends on p height*/ | |
| border-radius: 30px; | |
| box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| color: #fff; | |
| text-shadow: 1px 1px 1px rgba(0,0,0,0.2); | |
| border: 8px solid rgba(255,255,255,0.8); | |
| padding: 2px 20px 0px; | |
| font-size: 18px; | |
| line-height: 30px; | |
| width: 80px; | |
| text-align: center; | |
| background: rgba(255,255,255,0.2); | |
| } | |
| .da-slide .da-link:hover{ | |
| background: rgba(255,255,255,0.3); | |
| } | |
| .da-dots{ | |
| width: 100%; | |
| position: absolute; | |
| text-align: center; | |
| left: 0px; | |
| bottom: 20px; | |
| z-index: 2000; | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .da-dots span{ | |
| display: inline-block; | |
| position: relative; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: #e4b42d; | |
| margin: 3px; | |
| cursor: pointer; | |
| box-shadow: | |
| 1px 1px 1px rgba(0,0,0,0.1) inset, | |
| 1px 1px 1px rgba(255,255,255,0.1); | |
| } | |
| .da-dots span.da-dots-current:after{ | |
| content: ''; | |
| width: 8px; | |
| height: 8px; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| border-radius: 50%; | |
| background: rgb(255,255,255); | |
| background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); | |
| background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); | |
| background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); | |
| background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); | |
| background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); | |
| } | |
| .da-arrows{ | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .da-arrows span{ | |
| position: absolute; | |
| top: 50%; | |
| height: 30px; | |
| width: 30px; | |
| border-radius: 50%; | |
| background: #e4b42d; | |
| cursor: pointer; | |
| z-index: 2000; | |
| opacity: 0; | |
| box-shadow: | |
| 1px 1px 1px rgba(0,0,0,0.1) inset, | |
| 1px 1px 1px rgba(255,255,255,0.1); | |
| -webkit-transition: opacity 0.4s ease-in-out 0.2s; | |
| -moz-transition: opacity 0.4s ease-in-out 0.2s; | |
| -o-transition: opacity 0.4s ease-in-out 0.2s; | |
| -ms-transition: opacity 0.4s ease-in-out 0.2s; | |
| transition: opacity 0.4s ease-in-out 0.2s; | |
| } | |
| .da-slider:hover .da-arrows span{ | |
| opacity: 1; | |
| } | |
| .da-arrows span:after{ | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| top: 5px; | |
| left: 5px; | |
| background: transparent url(../images/arrows.png) no-repeat top left; | |
| border-radius: 50%; | |
| box-shadow: 1px 1px 2px rgba(0,0,0,0.1); | |
| } | |
| .da-arrows span:hover:after{ | |
| box-shadow: 1px 1px 4px rgba(0,0,0,0.3); | |
| } | |
| .da-arrows span:active:after{ | |
| box-shadow: 1px 1px 1px rgba(255,255,255,0.1); | |
| } | |
| .da-arrows span.da-arrows-next:after{ | |
| background-position: top right; | |
| } | |
| .da-arrows span.da-arrows-prev{ | |
| left: 15px; | |
| } | |
| .da-arrows span.da-arrows-next{ | |
| right: 15px; | |
| } | |
| .da-slide-current h2, | |
| .da-slide-current p, | |
| .da-slide-current .da-link{ | |
| left: 10%; | |
| opacity: 1; | |
| } | |
| .da-slide-current .da-img{ | |
| left: 60%; | |
| opacity: 1; | |
| } | |
| /* Animation classes and animations */ | |
| /* Slide in from the right*/ | |
| .da-slide-fromright h2{ | |
| -webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both; | |
| -moz-animation: fromRightAnim1 0.6s ease-in 0.8s both; | |
| -o-animation: fromRightAnim1 0.6s ease-in 0.8s both; | |
| -ms-animation: fromRightAnim1 0.6s ease-in 0.8s both; | |
| animation: fromRightAnim1 0.6s ease-in 0.8s both; | |
| } | |
| .da-slide-fromright p{ | |
| -webkit-animation: fromRightAnim2 0.6s ease-in 0.8s both; | |
| -moz-animation: fromRightAnim2 0.6s ease-in 0.8s both; | |
| -o-animation: fromRightAnim2 0.6s ease-in 0.8s both; | |
| -ms-animation: fromRightAnim2 0.6s ease-in 0.8s both; | |
| animation: fromRightAnim2 0.6s ease-in 0.8s both; | |
| } | |
| .da-slide-fromright .da-link{ | |
| -webkit-animation: fromRightAnim3 0.4s ease-in 1.2s both; | |
| -moz-animation: fromRightAnim3 0.4s ease-in 1.2s both; | |
| -o-animation: fromRightAnim3 0.4s ease-in 1.2s both; | |
| -ms-animation: fromRightAnim3 0.4s ease-in 1.2s both; | |
| animation: fromRightAnim3 0.4s ease-in 1.2s both; | |
| } | |
| .da-slide-fromright .da-img{ | |
| -webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; | |
| -moz-animation: fromRightAnim4 0.6s ease-in 0.8s both; | |
| -o-animation: fromRightAnim4 0.6s ease-in 0.8s both; | |
| -ms-animation: fromRightAnim4 0.6s ease-in 0.8s both; | |
| animation: fromRightAnim4 0.6s ease-in 0.8s both; | |
| } | |
| @-webkit-keyframes fromRightAnim1{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-webkit-keyframes fromRightAnim2{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-webkit-keyframes fromRightAnim3{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-webkit-keyframes fromRightAnim4{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| @-moz-keyframes fromRightAnim1{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-moz-keyframes fromRightAnim2{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-moz-keyframes fromRightAnim3{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-moz-keyframes fromRightAnim4{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| @-o-keyframes fromRightAnim1{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-o-keyframes fromRightAnim2{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-o-keyframes fromRightAnim3{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-o-keyframes fromRightAnim4{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| @-ms-keyframes fromRightAnim1{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-ms-keyframes fromRightAnim2{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-ms-keyframes fromRightAnim3{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-ms-keyframes fromRightAnim4{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| @keyframes fromRightAnim1{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @keyframes fromRightAnim2{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @keyframes fromRightAnim3{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @keyframes fromRightAnim4{ | |
| 0%{ left: 110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| /* Slide in from the left*/ | |
| .da-slide-fromleft h2{ | |
| -webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both; | |
| -moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both; | |
| -o-animation: fromLeftAnim1 0.6s ease-in 0.6s both; | |
| -ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both; | |
| animation: fromLeftAnim1 0.6s ease-in 0.6s both; | |
| } | |
| .da-slide-fromleft p{ | |
| -webkit-animation: fromLeftAnim2 0.6s ease-in 0.6s both; | |
| -moz-animation: fromLeftAnim2 0.6s ease-in 0.6s both; | |
| -o-animation: fromLeftAnim2 0.6s ease-in 0.6s both; | |
| -ms-animation: fromLeftAnim2 0.6s ease-in 0.6s both; | |
| animation: fromLeftAnim2 0.6s ease-in 0.6s both; | |
| } | |
| .da-slide-fromleft .da-link{ | |
| -webkit-animation: fromLeftAnim3 0.4s ease-in 1.2s both; | |
| -moz-animation: fromLeftAnim3 0.4s ease-in 1.2s both; | |
| -o-animation: fromLeftAnim3 0.4s ease-in 1.2s both; | |
| -ms-animation: fromLeftAnim3 0.4s ease-in 1.2s both; | |
| animation: fromLeftAnim3 0.4s ease-in 1.2s both; | |
| } | |
| .da-slide-fromleft .da-img{ | |
| -webkit-animation: fromLeftAnim4 0.6s ease-in 0.6s both; | |
| -moz-animation: fromLeftAnim4 0.6s ease-in 0.6s both; | |
| -o-animation: fromLeftAnim4 0.6s ease-in 0.6s both; | |
| -ms-animation: fromLeftAnim4 0.6s ease-in 0.6s both; | |
| animation: fromLeftAnim4 0.6s ease-in 0.6s both; | |
| } | |
| @-webkit-keyframes fromLeftAnim1{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-webkit-keyframes fromLeftAnim2{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-webkit-keyframes fromLeftAnim3{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-webkit-keyframes fromLeftAnim4{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| @-moz-keyframes fromLeftAnim1{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-moz-keyframes fromLeftAnim2{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-moz-keyframes fromLeftAnim3{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-moz-keyframes fromLeftAnim4{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| @-o-keyframes fromLeftAnim1{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-o-keyframes fromLeftAnim2{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-o-keyframes fromLeftAnim3{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-o-keyframes fromLeftAnim4{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| @-ms-keyframes fromLeftAnim1{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-ms-keyframes fromLeftAnim2{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-ms-keyframes fromLeftAnim3{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @-ms-keyframes fromLeftAnim4{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| @keyframes fromLeftAnim1{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @keyframes fromLeftAnim2{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @keyframes fromLeftAnim3{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 1%{ left: 10%; opacity: 0; } | |
| 100%{ left: 10%; opacity: 1; } | |
| } | |
| @keyframes fromLeftAnim4{ | |
| 0%{ left: -110%; opacity: 0; } | |
| 100%{ left: 60%; opacity: 1; } | |
| } | |
| /* Slide out to the right */ | |
| .da-slide-toright h2{ | |
| -webkit-animation: toRightAnim1 0.6s ease-in 0.6s both; | |
| -moz-animation: toRightAnim1 0.6s ease-in 0.6s both; | |
| -o-animation: toRightAnim1 0.6s ease-in 0.6s both; | |
| -ms-animation: toRightAnim1 0.6s ease-in 0.6s both; | |
| animation: toRightAnim1 0.6s ease-in 0.6s both; | |
| } | |
| .da-slide-toright p{ | |
| -webkit-animation: toRightAnim2 0.6s ease-in 0.3s both; | |
| -moz-animation: toRightAnim2 0.6s ease-in 0.3s both; | |
| -o-animation: toRightAnim2 0.6s ease-in 0.3s both; | |
| -ms-animation: toRightAnim2 0.6s ease-in 0.3s both; | |
| animation: toRightAnim2 0.6s ease-in 0.3s both; | |
| } | |
| .da-slide-toright .da-link{ | |
| -webkit-animation: toRightAnim3 0.4s ease-in both; | |
| -moz-animation: toRightAnim3 0.4s ease-in both; | |
| -o-animation: toRightAnim3 0.4s ease-in both; | |
| -ms-animation: toRightAnim3 0.4s ease-in both; | |
| animation: toRightAnim3 0.4s ease-in both; | |
| } | |
| .da-slide-toright .da-img{ | |
| -webkit-animation: toRightAnim4 0.6s ease-in both; | |
| -moz-animation: toRightAnim4 0.6s ease-in both; | |
| -o-animation: toRightAnim4 0.6s ease-in both; | |
| -ms-animation: toRightAnim4 0.6s ease-in both; | |
| animation: toRightAnim4 0.6s ease-in both; | |
| } | |
| @-webkit-keyframes toRightAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-webkit-keyframes toRightAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-webkit-keyframes toRightAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-webkit-keyframes toRightAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 30%{ left: 55%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-moz-keyframes toRightAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-moz-keyframes toRightAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-moz-keyframes toRightAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-moz-keyframes toRightAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 30%{ left: 55%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-o-keyframes toRightAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-o-keyframes toRightAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-o-keyframes toRightAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-o-keyframes toRightAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 30%{ left: 55%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-ms-keyframes toRightAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-ms-keyframes toRightAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-ms-keyframes toRightAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @-ms-keyframes toRightAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 30%{ left: 55%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @keyframes toRightAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @keyframes toRightAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @keyframes toRightAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| @keyframes toRightAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 30%{ left: 55%; opacity: 1; } | |
| 100%{ left: 100%; opacity: 0; } | |
| } | |
| /* Slide out to the left*/ | |
| .da-slide-toleft h2{ | |
| -webkit-animation: toLeftAnim1 0.6s ease-in both; | |
| -moz-animation: toLeftAnim1 0.6s ease-in both; | |
| -o-animation: toLeftAnim1 0.6s ease-in both; | |
| -ms-animation: toLeftAnim1 0.6s ease-in both; | |
| animation: toLeftAnim1 0.6s ease-in both; | |
| } | |
| .da-slide-toleft p{ | |
| -webkit-animation: toLeftAnim2 0.6s ease-in 0.3s both; | |
| -moz-animation: toLeftAnim2 0.6s ease-in 0.3s both; | |
| -o-animation: toLeftAnim2 0.6s ease-in 0.3s both; | |
| -ms-animation: toLeftAnim2 0.6s ease-in 0.3s both; | |
| animation: toLeftAnim2 0.6s ease-in 0.3s both; | |
| } | |
| .da-slide-toleft .da-link{ | |
| -webkit-animation: toLeftAnim3 0.4s ease-in both; | |
| -moz-animation: toLeftAnim3 0.4s ease-in both; | |
| -o-animation: toLeftAnim3 0.4s ease-in both; | |
| -ms-animation: toLeftAnim3 0.4s ease-in both; | |
| animation: toLeftAnim3 0.4s ease-in both; | |
| } | |
| .da-slide-toleft .da-img{ | |
| -webkit-animation: toLeftAnim4 0.6s ease-in 0.6s both; | |
| -moz-animation: toLeftAnim4 0.6s ease-in 0.6s both; | |
| -o-animation: toLeftAnim4 0.6s ease-in 0.6s both; | |
| -ms-animation: toLeftAnim4 0.6s ease-in 0.6s both; | |
| animation: toLeftAnim4 0.6s ease-in 0.6s both; | |
| } | |
| @-webkit-keyframes toLeftAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-webkit-keyframes toLeftAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-webkit-keyframes toLeftAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-webkit-keyframes toLeftAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 40%{ left: 70%; opacity: 1; } | |
| 90%{ left: 0%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-moz-keyframes toLeftAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-moz-keyframes toLeftAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-moz-keyframes toLeftAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-moz-keyframes toLeftAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 40%{ left: 70%; opacity: 1; } | |
| 90%{ left: 0%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-o-keyframes toLeftAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-o-keyframes toLeftAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-o-keyframes toLeftAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-o-keyframes toLeftAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 40%{ left: 70%; opacity: 1; } | |
| 90%{ left: 0%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-ms-keyframes toLeftAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-ms-keyframes toLeftAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-ms-keyframes toLeftAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @-ms-keyframes toLeftAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 40%{ left: 70%; opacity: 1; } | |
| 90%{ left: 0%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @keyframes toLeftAnim1{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @keyframes toLeftAnim2{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 30%{ left: 15%; opacity: 1; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @keyframes toLeftAnim3{ | |
| 0%{ left: 10%; opacity: 1; } | |
| 99%{ left: 10%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } | |
| @keyframes toLeftAnim4{ | |
| 0%{ left: 60%; opacity: 1; } | |
| 40%{ left: 70%; opacity: 1; } | |
| 90%{ left: 0%; opacity: 0; } | |
| 100%{ left: -50%; opacity: 0; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment