Ротация блоков с эффектом анимации на jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotating Blocks</title>
<link rel="stylesheet" href="css/style.css">
<style>
#rotator { width: 920px; height: 280px; position: relative; background: white; padding: 20px; }
#block-1 { background: #d5fcff; }
#block-2 { background: #e1ffd5; }
#block-3 { background: #ffffd8; }
#rotator > div {
position: absolute;
overflow: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#rotator > div > div {
padding: 20px;
}
#rotator > div > div img {
float: right;
margin: 0 20px 2px 10px;
}
#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
#rotator .non-active-top { top: 20px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-bottom { top: 170px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-top:hover, #rotator .non-active-bottom:hover {
cursor: pointer;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
#rotator h2 {
text-align: center;
line-height: 130px;
}
#rotator .active h2 {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<!--
Thought of using jQuery UI's .addClass transitions as fallback (or primary) but doesn't work as well
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
-->
<script>
// DOM Ready
$(function() {
var current;
function rotate() {
// This seems like a sucky way to do it, but you can't select by classes because they execute in order
if (current == 1) {
$("#block-1").removeClass().addClass("active");
$("#block-2").removeClass().addClass("non-active-top");
$("#block-3").removeClass().addClass("non-active-bottom");
} else if (current == 2) {
$("#block-1").removeClass().addClass("non-active-bottom");
$("#block-2").removeClass().addClass("active");
$("#block-3").removeClass().addClass("non-active-top");
} else {
$("#block-1").removeClass().addClass("non-active-top");
$("#block-2").removeClass().addClass("non-active-bottom");
$("#block-3").removeClass().addClass("active");
}
}
$("#rotator div").click(function() {
// Enables reversing, idea via Andrea Canton: https://twitter.com/andreacanton/status/24954634279849985
current = this.id.substr(6);
rotate();
});
});
</script>
<script type="text/javascript" src="//s3.buysellads.com/ac/bsa.js"></script><script type="text/javascript" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" src="http://s3.buysellads.com/r/s_3469a2a501a9e18091036aa0c89f9dcb.js?v=1296385200000" async="async"></script><style type="text/css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}</style><script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script></head><body>
<style type="text/css">.bsa_it_ad{border:0 !important;padding:6px !important;overflow:hidden !important;background:#eae3c0 !important;-moz-box-shadow:0 0 48px black;-webkit-box-shadow:0 0 48px black}.bsa_it_ad a{margin:0 !important;padding:0 !important}.bsa_it_ad a img{border:0 !important;position:static !important}.bsa_it_ad a:hover img{margin:0 !important}.bsa_it_ad a:hover{background:none !important}.bsa_it_i{margin:0 15px 0 0 !important}.bsa_it_t{margin:12px 0 0 0 !important;font:16px Georgia,Serif !important}.bsa_it_d{font:11px Verdana,Helvetica,Arial,Sans-Serif;padding-right:10px}.bsa_it_p{display:none !important;}#bsap_aplink{position: absolute; color: #999; text-decoration: none; bottom:5px !important;right:5px !important;padding:0 !important}.bsa_it_p a:hover{background:none !important}</style><div id="hook-just-in-case" style="height: 77px; background: black url(/examples/images/examples-header-bg.png) repeat-x; color: white !important; font: 14px Georgia, Serif !important; position: relative; zoom: 1; width: 100% !important; z-index: 6000;"><div style="width: 960px; height: 77px; margin: 0 auto; position: relative;"><img src="/examples/images/example-logo.png" alt="Demo Page" style="position: absolute; top: 0; left: 0;"><div style="position: absolute; left: 140px; top: 52px; width: 400px; text-align: left;"><a class="header-button" href="/rotating-feature-boxes/">← Back to Article</a> <a class="header-button" href="/examples/">More Demos →</a></div><div style="width: 420px; position: absolute; right: 0; top: 0;"><div id="bsap_1255488" class="bsap_1255488 bsap"><div class="bsa_it one"><div class="bsa_it_ad ad1 odd" id="bsa_759117"><a href="http://stats.buysellads.com/click.go?z=1255488&b=759117&g=&s=&sw=1920&sh=1080&br=opera,9.8,win&r=0.8179444662665488&link=http://www.activecampaign.com/emailmarketing/?utm_source=adpack&utm_medium=banner&utm_term=adpack1&utm_content=rad1&utm_campaign=adpack-wd-1" onmouseover="window.status = 'http://www.activecampaign.com/emailmarketing/?utm_source=adpack&utm_medium=banner&utm_term=adpack1&utm_content=rad1&utm_campaign=adpack-wd-1'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_i"><img src="http://s3.buysellads.com/1255475/47715-1294942593.gif" width="130" height="100" alt="Email Marketing Bliss"></span></a><a href="http://stats.buysellads.com/click.go?z=1255488&b=759117&g=&s=&sw=1920&sh=1080&br=opera,9.8,win&r=0.4762574393104556&link=http://www.activecampaign.com/emailmarketing/?utm_source=adpack&utm_medium=banner&utm_term=adpack1&utm_content=rad1&utm_campaign=adpack-wd-1" onmouseover="window.status = 'http://www.activecampaign.com/emailmarketing/?utm_source=adpack&utm_medium=banner&utm_term=adpack1&utm_content=rad1&utm_campaign=adpack-wd-1'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_t">Email Marketing Bliss</span><span class="bsa_it_d">Experience beautiful email marketing with power you have never seen before.</span></a></div><span class="bsa_it_p"><a href="http://buysellads.com/buy/detail/1098/zone/1255488?utm_source=site_1098_zone_1255488&utm_medium=website&utm_campaign=imagetext">ads by BSA</a></span></div></div><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div></div></div>
<div id="page-wrap">
<h1>Rotating Blocks</h1>
<p>Click on the smaller blocks on right to rotate. Browsers that support transitions will unleash radness, otherwise, hey, it still works.</p>
<div id="rotator">
<div id="block-1" class="active">
<h2>Subtitle #1</h2>
<div>
<h1>Seven Space Frogs Descend On Canada's Largest City</h1>
<img src="spacefrog.jpg" alt="space frog">
<p>Commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<div id="block-2" class="non-active-top">
<h2>Subtitle #2</h2>
<div>
<h1>The Power of the Voodoo. Who do? You do.</h1>
<img src="goblins.jpg" alt="goblins">
<p>Ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<div id="block-3" class="non-active-bottom">
<h2>Subtitle #3</h2>
<div>
<h1>You May Find Yourself Living in a Shotgun Shack</h1>
<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
</div>
<!-- IGNORE: BuySellAds.com Ad Code -->
<script type="text/javascript">(function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })();</script>
<!-- IGNORE: Just Google Analytics -->
<script type="text/javascript">var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-68528-29']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); })();</script>
<!-- IGNORE: View Source Stuff -->
<style type="text/css">.header-button{ border-top:1px solid #cf942d !important; border-bottom:0 !important; background:#964418 !important; background:-webkit-gradient(linear,left top,left bottom,from(#e86e36),to(#964418)) !important; background:-moz-linear-gradient(top,#e86e36,#964418) !important; padding:3px 10px !important; -webkit-border-radius:8px !important; -moz-border-radius:8px !important; border-radius:8px !important; -webkit-box-shadow:rgba(0,0,0,1) 0 1px 0 !important; -moz-box-shadow:rgba(0,0,0,1) 0 1px 0 !important; box-shadow:rgba(0,0,0,1) 0 1px 0 !important; text-shadow:rgba(0,0,0,.4) 0 1px 0 !important; color:white !important; font-size:13px !important; font-family:Georgia,serif !important; text-decoration:none !important; vertical-align:middle !important; display:inline !important; margin:0 !important;float:none !important}.header-button:hover{ border-top:1px solid #4f220d !important; background:#4f220d !important; color:#ccc !important; text-decoration:none !important; margin:0 !important}.header-button:active{ border-top:1px solid #261105 !important; background:#261105}.header-button:visited:before,.header-button:visited:after{ content:""!important}#source-code{z-index:7000;display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8)}#source-code:target{display:block}#source-code pre{padding:20px;font:14px/1.6 Monaco,Courier,MonoSpace;margin:50px auto;background:rgba(0,0,0,0.8);color:white;width:80%;height:80%;overflow:auto}#source-code pre a,#source-code pre a span{text-decoration:none;color:#0cf !important}#x{position:absolute;top:30px;left:10%;margin-left:-41px}#x img{border:0}.view-source-button{position:fixed;bottom:10px;right:10px}.str{color:#61ff74}.kwd{color:white}.com{color:white}.typ{color:#f1915d}.lit{color:white}.pun{color:white}.pln{color:#ffef97}.tag{color:#ffab58}.atn{color:#fabb4e}.atv{color:#ffd996}.dec{color:red}</style>
<div id="source-code"><a href="#" id="x"><img src="http://css-tricks.com/examples/ViewSourceButton/images/x.png" alt="close"></a></div>
<a class="view-source-button header-button" href="#source-code" id="view-source">Fancy View Source</a>
<script type="text/javascript" src="/prettify/prettify.js"></script><script>if(typeof jQuery=='undefined'){function getScript(url,success){var script=document.createElement('script');script.src=url;var head=document.getElementsByTagName('head')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script)}};head.appendChild(script)};getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',function(){if(typeof jQuery=='undefined'){}else{fancyCode()}})}else{fancyCode()}function fancyCode(){$("<pre />",{"html":'<!DOCTYPE html>\n<html>\n'+$("html").html().replace(/[<>]/g,function(m){return{'<':'<','>':'>'}[m]}).replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href=""></a>')+'\n</html>',"class":"prettyprint"}).appendTo("#source-code");prettyPrint()}</script>
</html>
Поделиться в
Facebook
Мой мир
Вконтакте
Одноклассники
Google+