Minimal design

Egyedi CSS design

Forráskódok

Javascript

[cc lang="javascript" tab_size=2 lines=80]
(function($) {
// -------------- INIT PAGE ----------------
var sb_slide_time = 1000;
var rsSize = $('.rotatesquare').innerWidth();
var titleHeight = $('.rs_title').outerHeight();
var titleWidth = rsSize - titleHeight;
var centerSize = rsSize - titleHeight - titleHeight;
initRotateSquare();

function initRotateSquare() {
$('.rotatesquare').each(function(i) {
$(this).height( $(this).width() );

var pos = 0;
$(this).children().each(function(j) {
if ( $(this).is(".rscenter") ) {
$(this).css({
"width": centerSize,
"height": centerSize,
"top": titleHeight,
"left": titleHeight
});
$(this).attr( "z-index", 1000);
} else if ( $(this).is(".rotatesquare_content") ) {
$(this).attr( "z-index", 1010);
} else {
pos++;
$(this).attr( "rspos", pos);
$(this).attr( "z-index", 1000+pos);
$(this).css( "width", titleWidth);
setCardPosition( this, pos );
}
});

$(this).append("

");
$(this).find('.rotatesquare_content').css({
"width": rsSize,
"height": rsSize - titleHeight,
"left": rsSize,
"top": titleHeight
});
$(this).find('.rotatesquare_content').hide();

$(this).css( "transition-duration", sb_slide_time+"ms" );
$(this).find('.rscenter').css( "transition-duration", sb_slide_time+"ms" );
$(this).find('.rscard').css( "transition-duration", sb_slide_time+"ms" );
$(this).find('.rs_title').css( "transition-duration", sb_slide_time+"ms" );
$(this).find('.rscard').append( '

' );
$(this).find('.rscard').append( '

' );
$(this).find(".rscard .closer").hide();
$(this).find('.rscard .rs_body').hide();

$(this).parent().append('

');
$(this).appendTo( $(this).parent().find('.rotatesquare_area') );

});

}

function setCardPosition( obj, pos ) {
if (typeof obj === 'object' && obj !== null) {
switch(pos) {
case 1:
$(obj).css( "margin-left", titleHeight);
$(obj).css( "margin-top", "0px");
break;
case 2:
$(obj).css( "margin-left", titleWidth);
$(obj).css( "margin-top", "0px");
break;
case 3:
$(obj).css( "margin-left", titleWidth);
$(obj).css( "margin-top", titleWidth-titleHeight-1);
break;
case 4:
$(obj).css( "margin-left", titleHeight);
$(obj).css( "margin-top", titleWidth-titleHeight-1);
break;
default:
break;
}
}
}

$(".rotatesquare .opener").on( "click", function () {
var $thisObj = $(this);
$(this).closest('.rotatesquare').find('.rs_body').hide();
$(this).closest('.rotatesquare').find('.closer').hide();
$(this).closest('.rotatesquare').find('.opener').hide();
$(this).closest('.rotatesquare').find('.rs_title').addClass( "rs_title_off" );
$(this).closest('.rscard').find('.rs_title').removeClass( "rs_title_off" );

$('.rotatesquare').css( "transition-duration", sb_slide_time+"ms" );
$('.rscenter').css( "transition-duration", sb_slide_time+"ms" );

$(this).hide();

// --- Open selected DIVs ----
var pos = $(this).closest(".rscard").attr("rspos");
pos = parseInt( pos );

var openDelay = sb_slide_time;
switch(pos) {
case 1:
openDelay = 100;
break;
case 2:
$(this).closest('.rotatesquare').css( "transform", "rotate(-90deg)");
$(this).closest('.rotatesquare').find('.rscenter').css( "transform", "rotate(90deg)");
break;
case 3:
$(this).closest('.rotatesquare').css( "transform", "rotate(180deg)");
$(this).closest('.rotatesquare').find('.rscenter').css( "transform", "rotate(-180deg)");
break;
case 4:
$(this).closest('.rotatesquare').css( "transform", "rotate(90deg)");
$(this).closest('.rotatesquare').find('.rscenter').css( "transform", "rotate(-90deg)");
break;
default:
break;
}

$thisObj.closest('.rotatesquare_area').find('.rotatesquare_content').html( $thisObj.closest('.rscard').find('.rs_body').html() );

setTimeout( function( obj ){
for (i=1; i <= 4; i++) { var n = Math.abs( ( ( ( 4 + i - pos) % 4) ) + 1) + 10; obj.closest('.rotatesquare').find('.rscard[rspos='+i+']').attr("rspos", n); } for (i=1; i <= 4; i++) { var n = 10 + i; obj.closest('.rotatesquare').find('.rscard[rspos='+n+']').attr("rspos", i); $rscard = obj.closest('.rotatesquare').find('.rscard[rspos='+i+']'); setCardPosition( $rscard, i ); } $('.rotatesquare').css( "transition-duration", "0ms" ); $('.rscenter').css( "transition-duration", "0ms" ); obj.closest('.rotatesquare').css( "transform", "rotate(0deg)"); obj.closest('.rotatesquare').find('.rscenter').css( "transform", "rotate(0deg)"); setTimeout( function ( obj ) { $('.rotatesquare').css( "transition-duration", sb_slide_time + "ms" ); obj.closest('.rotatesquare').css( "width", 2*rsSize ); obj.closest('.rotatesquare').find('.rscard[rspos=1]').css( "width", titleWidth + rsSize ); obj.closest('.rotatesquare_area').find('.rotatesquare_content').show( sb_slide_time ); setTimeout( function ( obj ) { obj.closest('.rscard').find('.rs_title').addClass( "rs_title_on" ); obj.closest('.rscard').find(".closer").show(200); }, sb_slide_time, obj); }, sb_slide_time / 4, obj); }, openDelay, $thisObj); }); $(".rotatesquare .closer").on( "click", function () { $rscard = $(this).closest( ".rscard" ); $rscard.find(".rs_body").hide( sb_slide_time ); $rscard.find(".opener").show(); $rscard.find(".closer").hide(); $rscard.css( "width", titleWidth ); $(this).closest('.rotatesquare_area').find('.rotatesquare_content').hide( sb_slide_time / 2 ); $(this).closest('.rotatesquare').find('.rs_title').removeClass( "rs_title_off" ); $(this).closest('.rotatesquare').find('.rs_title').removeClass( "rs_title_on" ); $(this).closest('.rotatesquare').find('.opener').show(); $(this).closest('.rotatesquare').css({ "transition-duration": sb_slide_time +"ms" , "width": rsSize, "height": rsSize }); }); })(jQuery); [/cc]

HTML

[cc lang="html5" tab_size=2 lines=40]

[/cc]