templates/_include/_onLoadunLoadPageAnimation.html.twig line 1

Open in your IDE?
  1. {# NOTE: after this include there will be a div with class wrapper - that needs to have display:none #}
  2. <div id="layers">
  3. <div class="top-layer"></div>
  4. <div class="top-layer top-layer--2"></div>
  5. <div class="top-layer top-layer--3"></div>
  6. <div class="top-layer top-layer--4"></div>
  7. <div class="top-layer top-layer--5"></div>
  8. <div class="bottom-layer"></div>
  9. <div class="bottom-layer bottom-layer--2"></div>
  10. <div class="bottom-layer bottom-layer--3"></div>
  11. <div class="left-layer"></div>
  12. <div class="left-layer left-layer--2"></div>
  13. <div class="left-layer left-layer--3"></div>
  14. <div class="left-layer left-layer--4"></div>
  15. <div class="right-layer"></div>
  16. <div class="right-layer right-layer--2"></div>
  17. <div class="right-layer right-layer--3"></div>
  18. </div>
  19. <script>
  20. document.addEventListener("DOMContentLoaded", function() {
  21. const $body = $('body');
  22. const $layers = $('#layers');
  23. const layers = document.querySelectorAll(".top-layer");
  24. $layers.height('100%');
  25. $body.css('overflow','hidden');
  26. let myEvent = window.attachEvent || window.addEventListener;
  27. let chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compitable
  28. myEvent(chkevent, async (e) => {
  29. $layers.height('100%');
  30. $body.css('overflow','hidden');
  31. toggleActive(layers);
  32. setTimeout(function() {
  33. $body.removeClass('modal-open');
  34. $('#wrapper-loader, .modal-backdrop, .modal, .marker-app, #alerts').hide();
  35. },500);
  36. return true;
  37. });
  38. toggleActive(layers);
  39. setTimeout(function(){
  40. $('#wrapper-loader').show();
  41. $layers.height('0%');
  42. $body.css('overflow','initial');
  43. },1000);
  44. function toggleActive(layers){
  45. for (const layer of layers) {
  46. layer.classList.toggle("active");
  47. }
  48. }
  49. });
  50. </script>
  51. <style>
  52. html {
  53. height:100%;
  54. }
  55. html, body {
  56. background: url(data:image/png;base64,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) #6c18c9 no-repeat center / cover;
  57. background-size: 40% auto;
  58. box-sizing: border-box;
  59. }
  60. #layers{
  61. position: absolute;
  62. width: 100%;
  63. top: 0;
  64. z-index: 99999;
  65. }
  66. #layers::after {
  67. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
  68. content: '';
  69. width: 100px;
  70. height: 100px;
  71. display: block;
  72. background-repeat: no-repeat;
  73. background-position: center center;
  74. margin: auto;
  75. bottom: 5%;
  76. left: 50%;
  77. position: absolute;
  78. }
  79. body {
  80. background-color: #6c18c9;
  81. height: 100%;
  82. }
  83. .top-layer {
  84. position: absolute;
  85. width: 100%;
  86. height: 100%;
  87. top: -100%;
  88. left: 0;
  89. bottom: auto;
  90. right: auto;
  91. background: #706cef;
  92. transition: all 1s cubic-bezier(0.6, 0.05, 0.4, 1);
  93. }
  94. .top-layer.active {
  95. top: 100%;
  96. }
  97. .top-layer--2 {
  98. background: #ffffff;
  99. transition-delay: 0.6s;
  100. }
  101. .top-layer--3 {
  102. background: #986af8;
  103. transition-delay: 0.4s;
  104. }
  105. .top-layer--4 {
  106. background: #F39F56;
  107. transition-delay: 0.2s;
  108. }
  109. .top-layer--5 {
  110. background: #69d7b1;
  111. transition-delay: 0.1s;
  112. }
  113. </style>