Team:Shenzhen/css/demo.css

From 2012.igem.org

(Difference between revisions)
(Created page with "<html lang="en"> <head> <title>Creative CSS3 Animation Menus</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chro...")
Line 1: Line 1:
-
<html lang="en">
+
/**
-
    <head>
+
* jquery.swatchbook.js v1.0.0
-
        <title>Creative CSS3 Animation Menus</title>
+
* http://www.codrops.com
-
        <meta charset="UTF-8" />
+
*
-
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
* Licensed under the MIT license.
-
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
* http://www.opensource.org/licenses/mit-license.php
-
        <meta name="description" content="Creative CSS3 Animation Menus" />
+
*
-
        <meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
+
* Copyright 2012, Codrops
-
        <meta name="author" content="Codrops" />
+
* http://www.codrops.com
-
        <link rel="shortcut icon" href="../favicon.ico">
+
*/
-
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
+
 
-
        <link rel="stylesheet" type="text/css" href="css/style1.css" />
+
( function( window, $, undefined ) {
-
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
+
-
    </head>
+
'use strict';
-
    <body>
+
 
-
        <div class="container">
+
var Modernizr = window.Modernizr;
-
            <div class="header">
+
 
-
                <a href="http://tympanus.net/Tutorials/BlurMenu/"><strong>&laquo; Previous Demo: </strong>Blur Menu</a>
+
jQuery.fn.reverse = [].reverse;
-
                <span class="right">
+
-
                    <a href="http://www.justbenicestudio.com/studio/websymbols/" target="_blank">Font/Icons by Just Be Nice</a>
+
$.SwatchBook = function( options, element ) {
-
                    <a href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/"><strong>Back to the Codrops Article</strong></a>
+
-
                </span>
+
this.$el = $( element );
-
                <div class="clr"></div>
+
this._init( options );
-
            </div>
+
-
            <h1>Creative CSS3 Animation Menus <span>Experimenting with CSS3 Transitions &amp; Animations</span></h1>
+
};
-
            <div class="content">
+
 
-
                <div class="more">
+
$.SwatchBook.defaults = {
-
                    <ul>
+
// index of initial centered item
-
                        <li class="selected"><a href="index.html">Example 1</a></li>
+
center : 6,
-
                        <li><a href="index2.html">Example 2</a></li>
+
// number of degrees that is between each item
-
                        <li><a href="index3.html">Example 3</a></li>
+
angleInc : 8,
-
                        <li><a href="index4.html">Example 4</a></li>
+
speed : 700,
-
                        <li><a href="index5.html">Example 5</a></li>
+
easing : 'ease',
-
                        <li><a href="index6.html">Example 6</a></li>
+
// amount in degrees for the opened item's next sibling
-
                        <li><a href="index7.html">Example 7</a></li>
+
proximity : 45,
-
                        <li><a href="index8.html">Example 8</a></li>
+
// amount in degrees between the opened item's next siblings
-
                        <li><a href="index9.html">Example 9</a></li>
+
neighbor : 4,
-
                        <li><a href="index10.html">Example 10</a></li>
+
// animate on load
-
                    </ul>
+
onLoadAnim : true,
-
                </div>
+
// if it should be closed by default
-
                <ul class="ca-menu">
+
initclosed : false,
-
                    <li>
+
// index of the element that when clicked, triggers the open/close function
-
                        <a href="#">
+
// by default there is no such element
-
                            <span class="ca-icon">A</span>
+
closeIdx : -1
-
                            <div class="ca-content">
+
};
-
                                <h2 class="ca-main">Exceptional Service</h2>
+
 
-
                                <h3 class="ca-sub">Personalized to your needs</h3>
+
$.SwatchBook.prototype = {
-
                            </div>
+
 
-
                        </a>
+
_init : function( options ) {
-
                    </li>
+
-
                    <li>
+
this.options = $.extend( true, {}, $.SwatchBook.defaults, options );
-
                        <a href="#">
+
 
-
                            <span class="ca-icon">I</span>
+
this.$items = this.$el.children( 'div' );
-
                            <div class="ca-content">
+
this.itemsCount = this.$items.length;
-
                                <h2 class="ca-main">Creative Storytelling</h2>
+
this.current = -1;
-
                                <h3 class="ca-sub">Advanced use of technology</h3>
+
this.support = Modernizr.csstransitions;
-
                            </div>
+
this.cache = [];
-
                        </a>
+
-
                    </li>
+
if( this.options.onLoadAnim ) {
-
                    <li>
+
 
-
                        <a href="#">
+
this._setTransition();
-
                            <span class="ca-icon">C</span>
+
 
-
                            <div class="ca-content">
+
}
-
                                <h2 class="ca-main">Infographical Education</h2>
+
 
-
                                <h3 class="ca-sub">Understanding visually</h3>
+
if( !this.options.initclosed ) {
-
                            </div>
+
 
-
                        </a>
+
this._center( this.options.center, this.options.onLoadAnim );
-
                    </li>
+
 
-
                    <li>
+
}
-
                        <a href="#">
+
else {
-
                            <span class="ca-icon">S</span>
+
 
-
                            <div class="ca-content">
+
this.isClosed = true;
-
                                <h2 class="ca-main">Sophisticated Team</h2>
+
if( !this.options.onLoadAnim ) {
-
                                <h3 class="ca-sub">Professionals in action</h3>
+
 
-
                            </div>
+
this._setTransition();
-
                        </a>
+
 
-
                    </li>
+
}
-
                    <li>
+
 
-
                        <a href="#">
+
}
-
                            <span class="ca-icon">d</span>
+
-
                            <div class="ca-content">
+
this._initEvents();
-
                                <h2 class="ca-main">Unconditional Support</h2>
+
-
                                <h3 class="ca-sub">24/7 for you needs</h3>
+
},
-
                            </div>
+
_setTransition : function() {
-
                        </a>
+
 
-
                    </li>
+
if( !this.support ) {
-
                </ul>
+
 
-
            </div><!-- content -->
+
return false;
-
        </div>
+
 
-
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+
}
-
    </body>
+
 
-
</html>
+
this.$items.css( {
 +
'-webkit-transition': '-webkit-transform ' + this.options.speed + 'ms ' + this.options.easing,
 +
'-moz-transition' : '-moz-transform ' + this.options.speed + 'ms ' + this.options.easing,
 +
'-o-transition' : '-o-transform ' + this.options.speed + 'ms ' + this.options.easing,
 +
'-ms-transition' : '-ms-transform ' + this.options.speed + 'ms ' + this.options.easing,
 +
'transition' : 'transform ' + this.options.speed + 'ms ' + this.options.easing
 +
} );
 +
 
 +
},
 +
_openclose : function() {
 +
 
 +
var _self = this;
 +
 
 +
if( this.isClosed ) {
 +
 
 +
this._center( this.options.center, true );
 +
 
 +
}
 +
else {
 +
 
 +
this.$items.each( function( i ) {
 +
 
 +
var transformStr = 'rotate(0deg)';
 +
 
 +
$( this ).css( {
 +
'-webkit-transform' : transformStr,
 +
'-moz-transform' : transformStr,
 +
'-o-transform' : transformStr,
 +
'-ms-transform' : transformStr,
 +
'transform' : transformStr
 +
} );
 +
 
 +
} );
 +
 
 +
}
 +
 
 +
this.isClosed = !this.isClosed;
 +
 
 +
},
 +
_center : function( idx, anim ) {
 +
 
 +
var _self = this;
 +
 
 +
this.$items.each( function( i ) {
 +
 
 +
var transformStr = 'rotate(' + ( _self.options.angleInc * ( i - idx ) ) + 'deg)';
 +
 
 +
$( this ).css( {
 +
'-webkit-transform' : transformStr,
 +
'-moz-transform' : transformStr,
 +
'-o-transform' : transformStr,
 +
'-ms-transform' : transformStr,
 +
'transform' : transformStr
 +
} );
 +
 
 +
} );
 +
 
 +
},
 +
_initEvents : function() {
 +
 
 +
var _self = this;
 +
 
 +
this.$items.on( 'click.swatchbook', function( event ) {
 +
 
 +
var $item = $( this ),
 +
itmIdx = $item.index();
 +
 
 +
if( itmIdx !== _self.current ) {
 +
 
 +
if( _self.options.closeIdx !== -1 && itmIdx === _self.options.closeIdx ) {
 +
 
 +
_self._openclose();
 +
_self._setCurrent();
 +
 
 +
}
 +
else {
 +
 
 +
_self._setCurrent( $item );
 +
 
 +
var transformStr = 'rotate(0deg)';
 +
 
 +
$item.css( {
 +
'-webkit-transform' : transformStr,
 +
'-moz-transform' : transformStr,
 +
'-o-transform' : transformStr,
 +
'-ms-transform' : transformStr,
 +
'transform' : transformStr
 +
} );
 +
 
 +
_self._rotateSiblings( $item );
 +
 
 +
}
 +
 
 +
}
 +
 
 +
} );
 +
 
 +
},
 +
_rotateSiblings : function( $item ) {
 +
 
 +
var _self = this,
 +
idx = $item.index(),
 +
$cached = this.cache[ idx ],
 +
$siblings;
 +
 
 +
if( $cached ) {
 +
 
 +
$siblings = $cached;
 +
 
 +
}
 +
else {
 +
 
 +
$siblings = $item.siblings();
 +
this.cache[ idx ] = $siblings;
 +
 
 +
}
 +
 
 +
$siblings.each( function( i ) {
 +
 
 +
var rotateVal = ( i < idx ) ?
 +
_self.options.angleInc * ( i - idx ) :
 +
( i - idx === 1 ) ? _self.options.proximity : _self.options.proximity + ( i - idx - 1 ) * _self.options.neighbor;
 +
 
 +
var transformStr = 'rotate(' + rotateVal + 'deg)';
 +
 
 +
$( this ).css( {
 +
'-webkit-transform' : transformStr,
 +
'-moz-transform' : transformStr,
 +
'-o-transform' : transformStr,
 +
'-ms-transform' : transformStr,
 +
'transform' : transformStr
 +
} );
 +
 
 +
} );
 +
 
 +
},
 +
_setCurrent : function( $el ) {
 +
 
 +
this.current = $el ? $el.index() : -1;
 +
this.$items.removeClass( 'ff-active' );
 +
if( $el ) {
 +
 
 +
$el.addClass( 'ff-active' );
 +
 
 +
}
 +
 
 +
}
 +
 
 +
};
 +
 +
var logError = function( message ) {
 +
 
 +
if ( window.console ) {
 +
 
 +
window.console.error( message );
 +
 +
}
 +
 
 +
};
 +
 +
$.fn.swatchbook = function( options ) {
 +
 +
if ( typeof options === 'string' ) {
 +
 +
var args = Array.prototype.slice.call( arguments, 1 );
 +
 +
this.each(function() {
 +
 +
var instance = $.data( this, 'swatchbook' );
 +
 +
if ( !instance ) {
 +
 
 +
logError( "cannot call methods on swatchbook prior to initialization; " +
 +
"attempted to call method '" + options + "'" );
 +
return;
 +
 +
}
 +
 +
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
 +
 
 +
logError( "no such method '" + options + "' for swatchbook instance" );
 +
return;
 +
 +
}
 +
 +
instance[ options ].apply( instance, args );
 +
 +
});
 +
 +
}
 +
else {
 +
 +
this.each(function() {
 +
 +
var instance = $.data( this, 'swatchbook' );
 +
if ( !instance ) {
 +
 
 +
$.data( this, 'swatchbook', new $.SwatchBook( options, this ) );
 +
 +
}
 +
 
 +
});
 +
 +
}
 +
 +
return this;
 +
 +
};
 +
 +
} )( window, jQuery );

Revision as of 11:12, 17 July 2012

/** 

* jquery.swatchbook.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* Copyright 2012, Codrops
* http://www.codrops.com
*/

( function( window, $, undefined ) {

'use strict';

var Modernizr = window.Modernizr;

jQuery.fn.reverse = [].reverse;

$.SwatchBook = function( options, element ) {

this.$el = $( element ); this._init( options );

};

$.SwatchBook.defaults = { // index of initial centered item center : 6, // number of degrees that is between each item angleInc : 8, speed : 700, easing : 'ease', // amount in degrees for the opened item's next sibling proximity : 45, // amount in degrees between the opened item's next siblings neighbor : 4, // animate on load onLoadAnim : true, // if it should be closed by default initclosed : false, // index of the element that when clicked, triggers the open/close function // by default there is no such element closeIdx : -1 };

$.SwatchBook.prototype = {

_init : function( options ) {

this.options = $.extend( true, {}, $.SwatchBook.defaults, options );

this.$items = this.$el.children( 'div' ); this.itemsCount = this.$items.length; this.current = -1; this.support = Modernizr.csstransitions; this.cache = [];

if( this.options.onLoadAnim ) {

this._setTransition();

}

if( !this.options.initclosed ) {

this._center( this.options.center, this.options.onLoadAnim );

} else {

this.isClosed = true; if( !this.options.onLoadAnim ) {

this._setTransition();

}

}

this._initEvents();

}, _setTransition : function() {

if( !this.support ) {

return false;

}

this.$items.css( { '-webkit-transition': '-webkit-transform ' + this.options.speed + 'ms ' + this.options.easing, '-moz-transition' : '-moz-transform ' + this.options.speed + 'ms ' + this.options.easing, '-o-transition' : '-o-transform ' + this.options.speed + 'ms ' + this.options.easing, '-ms-transition' : '-ms-transform ' + this.options.speed + 'ms ' + this.options.easing, 'transition' : 'transform ' + this.options.speed + 'ms ' + this.options.easing } );

}, _openclose : function() {

var _self = this;

if( this.isClosed ) {

this._center( this.options.center, true );

} else {

this.$items.each( function( i ) {

var transformStr = 'rotate(0deg)';

$( this ).css( { '-webkit-transform' : transformStr, '-moz-transform' : transformStr, '-o-transform' : transformStr, '-ms-transform' : transformStr, 'transform' : transformStr } );

} );

}

this.isClosed = !this.isClosed;

}, _center : function( idx, anim ) {

var _self = this;

this.$items.each( function( i ) {

var transformStr = 'rotate(' + ( _self.options.angleInc * ( i - idx ) ) + 'deg)';

$( this ).css( { '-webkit-transform' : transformStr, '-moz-transform' : transformStr, '-o-transform' : transformStr, '-ms-transform' : transformStr, 'transform' : transformStr } );

} );

}, _initEvents : function() {

var _self = this;

this.$items.on( 'click.swatchbook', function( event ) {

var $item = $( this ), itmIdx = $item.index();

if( itmIdx !== _self.current ) {

if( _self.options.closeIdx !== -1 && itmIdx === _self.options.closeIdx ) {

_self._openclose(); _self._setCurrent();

} else {

_self._setCurrent( $item );

var transformStr = 'rotate(0deg)';

$item.css( { '-webkit-transform' : transformStr, '-moz-transform' : transformStr, '-o-transform' : transformStr, '-ms-transform' : transformStr, 'transform' : transformStr } );

_self._rotateSiblings( $item );

}

}

} );

}, _rotateSiblings : function( $item ) {

var _self = this, idx = $item.index(), $cached = this.cache[ idx ], $siblings;

if( $cached ) {

$siblings = $cached;

} else {

$siblings = $item.siblings(); this.cache[ idx ] = $siblings;

}

$siblings.each( function( i ) {

var rotateVal = ( i < idx ) ? _self.options.angleInc * ( i - idx ) : ( i - idx === 1 ) ? _self.options.proximity : _self.options.proximity + ( i - idx - 1 ) * _self.options.neighbor;

var transformStr = 'rotate(' + rotateVal + 'deg)';

$( this ).css( { '-webkit-transform' : transformStr, '-moz-transform' : transformStr, '-o-transform' : transformStr, '-ms-transform' : transformStr, 'transform' : transformStr } );

} );

}, _setCurrent : function( $el ) {

this.current = $el ? $el.index() : -1; this.$items.removeClass( 'ff-active' ); if( $el ) {

$el.addClass( 'ff-active' );

}

}

};

var logError = function( message ) {

if ( window.console ) {

window.console.error( message );

}

};

$.fn.swatchbook = function( options ) {

if ( typeof options === 'string' ) {

var args = Array.prototype.slice.call( arguments, 1 );

this.each(function() {

var instance = $.data( this, 'swatchbook' );

if ( !instance ) {

logError( "cannot call methods on swatchbook prior to initialization; " + "attempted to call method '" + options + "'" ); return;

}

if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {

logError( "no such method '" + options + "' for swatchbook instance" ); return;

}

instance[ options ].apply( instance, args );

});

} else {

this.each(function() {

var instance = $.data( this, 'swatchbook' ); if ( !instance ) {

$.data( this, 'swatchbook', new $.SwatchBook( options, this ) );

}

});

}

return this;

};

} )( window, jQuery );

Retrieved from "http://2012.igem.org/Team:Shenzhen/css/demo.css"