Меню с анимацией
Делал менюшку с анимацией, веселья ради. Но вот конечный результат меня немного не устраивает.:write: Подскажите как поправить?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <style> body { background-image: radial-gradient(circle farthest-corner at center, #162531 0%, #040E13 100%); } ul, li { margin: 0; padding: 0; list-style-type: none; } .menuBlock { position: relative; width: 300px; height: 400px; margin: 4%; /*border: 1px solid #000;*/ } .pill { position: relative; width: 50%; color: white; margin-top: 10px; padding: 10px 5px; text-align: center; background-color: black; border: 2px solid silver; border-radius: 15px; overflow: hidden; cursor: pointer; } .textBlock { position: relative; } .imgBlock { display: none; } .bordEf { animation: borBot 1s linear infinite; } @keyframes borBot { 0%, 20%, 40%, 60%, 80%, 100% { border-bottom: 4px solid silver; } 10%, 30%, 50%, 70%, 90% { border-bottom: 4px solid white; } } .wobbleEf { animation: wobble 1s linear infinite; animation-fill-mode: forwards; } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .fallOut { position: absolute; } .upGate { position: absolute; top: -70%; left: 0; width: 100%; height: 60%; background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, #111 2px, #111 4px), repeating-linear-gradient(45deg, #222 0px, #222 10px, #1111B5 10px, #111 20px); z-index: 2; } .downGate { position: absolute; top: 100%; left: 0; width: 100%; height: 60%; background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, #111 2px, #111 4px), repeating-linear-gradient(-45deg, #222 0px, #222 10px, #FFDD00 10px, #111 20px); z-index: 2; } </style> </head> <body> <div class="menuBlock"> <ul> <li> <div class="pill"> <div class="upGate"></div> <div class="textBlock">TestBlock1</div> <div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div> <div class="downGate"></div> </div> </li> <li> <div class="pill"> <div class="upGate"></div> <div class="textBlock">TestBlock2</div> <div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div> <div class="downGate"></div> </div> </li> <li> <div class="pill"> <div class="upGate"></div> <div class="textBlock">TestBlock3</div> <div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div> <div class="downGate"></div> </div> </li> <li> <div class="pill"> <div class="upGate"></div> <div class="textBlock">TestBlock4</div> <div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div> <div class="downGate"></div> </div> </li> <li> <div class="pill"> <div class="upGate"></div> <div class="textBlock">TestBlock5</div> <div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div> <div class="downGate"></div> </div> </li> </ul> </div> <script type="text/javascript"> window.onload = function () { var menuBlock = $('.menuBlock'), upGate = $('.upGate'), downGate = $('.downGate'), fallOut = $('.fallOut'), imgBlock = $('.imgBlock'), pill = $(".pill"); menuBlock.on("click", "li", function () { var tp = $(this).find(pill); var prevEl = $(this).prev().find(pill); var nextEl = $(this).next().find(pill); if ($(this).children().hasClass('fallOut')) { return } else { if (pill.hasClass('fallOut')) { var imgBl = $('.fallOut').find(imgBlock); var line = $(".line"); imgBl.fadeOut(500); imgBl.parent().delay(1000).animate({top: "-14%"}, 500).animate({marginLeft: '0%'}, 500).addClass('line'); //создаю временный класс, что б можно было как то взаимодействовать $('.line').parent().prependTo(this.parentNode); line.removeClass('fallOut'); line.first().removeClass('line'); // pill.not(".fallOut ").css("width", "350px"); // Вот эта штука не срабатывает, я хотел что б меню без класса смешалось вниз, для красоты } $(this).find(upGate).animate({top: "0%"}, 500); $(this).find(downGate).animate({top: "55%"}, 500); tp.delay(600).animate({marginLeft: '60%'}, 500); prevEl.delay(1500).addClass('bordEf'); nextEl.delay(1500).addClass('wobbleEf'); $(this).find(upGate).delay(500).animate({top: "-60%"}, 800); $(this).find(downGate).delay(500).animate({top: "100%"}, 800); setTimeout(function () { tp.addClass('fallOut') prevEl.delay(1500).removeClass('bordEf'); nextEl.delay(1500).removeClass('wobbleEf'); }, 1800); $(this).find(imgBlock).delay(2000).fadeIn(500); } }); } </script> </body> </html> 1)Проблема в том что если медленно клацать на блоки меню то всё отыгрывается нормально, по порядку. Но если жать на новый блок пока не отыгралась анимация первого, то всё летит к чертям :cray: 2) Я не понимаю почему у меня не получаеться задать смещение блоков (которые не имеют класса .fallOut ) в конце, что б было крассиво |
Часовой пояс GMT +3, время: 10:52. |