Глючный полосатый фон на CSS3 и jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
html,body{ background-color:#333; height:100%; overflow:hidden; width:100%; } div.container { background-color: #4c9ee8; height: 100%; margin: 0; overflow: hidden; position: relative; top: 0; left: 0; width: 100%; } div.blocks { transition: background-color 5s; background-color: #4c9ee8; display: block; height: 100%; position: relative; width: 100%; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } div.blocks div { border: solid 4px #67b2f8; border-width: 0 0 0 32px; transition: background .9s, height 1s, width .8s; background: transparent; display: block; float: left; height: 50px; margin: 0; padding: 0; width: 5%; } div.blocks div.lighten { background: #6fb7f9; width: 8%; } div.blocks div.darken { background: #54a2ea; height: 40%; } .bgLite { background-color: #67b0f2 !important; } .randA { color: #fff; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<div class="container clearfix"> <div class="blocks"></div> </div> <script> var total = 400; $(function() { for (var i = 1; i < total; i++) { $(".blocks").prepend('<div class="b' + i + '">'); } }); function blockA() { $(".blocks div").removeClass("lighten"); randNumA = Math.floor(Math.random() * total) + 1; $(".randA").text(randNumA); $(".blocks div.b" + randNumA).addClass("lighten"); } function blockB() { $(".blocks div").removeClass("lighten"); randNumB = Math.floor(Math.random() * total) + 1; $(".blocks div.b" + randNumB).addClass("lighten"); } function blockC() { $(".blocks div").removeClass("darken"); randNumB = Math.floor(Math.random() * total) + 1; $(".blocks div.b" + randNumB).addClass("darken"); } function blockD() { $(".blocks div").removeClass("darken"); randNumB = Math.floor(Math.random() * total) + 1; $(".blocks div.b" + randNumB).addClass("darken"); } var bgStatus = 1; function backgroundShift() { if (bgStatus === 1) { $(".blocks").addClass("bgdivte"); bgStatus = 0; } else { $(".blocks").removeClass("bgdivte"); bgStatus = 1; } } setInterval(function() { backgroundShift(); }, 6000); (function loopA() { var rand = Math.round(Math.random() * (300 - 100)) + 100; setTimeout(function() { blockA(); blockB(); loopA(); }, rand); }()); (function loopB() { var rand = Math.round(Math.random() * (300 - 100)) + 100; setTimeout(function() { blockC(); blockD(); loopB(); }, rand); }()); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
