Файловый менеджер - Редактировать - /home/lmsyaran/public_html/templates/g5_hydrogen/custom/particles/headroom.html.twig
Назад
{% extends '@nucleus/partials/particle.html.twig' %} {% block stylesheets %} {% if particle.enabled %} {{ parent() }} <style type="text/css"> {{ particle.cssselector|e }} { /* Needed for Safari (Mac) */ width: 100%; } {{ particle.cssselector|e }}.g-fixed-active { position: fixed; width: 100%; top: 0; z-index: 1003; left: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .animated { -webkit-transition: transform 200ms linear; -moz-transition: transform 200ms linear; -ms-transition: transform 200ms linear; -o-transition: transform 200ms linear; transition: transform 200ms linear; } .slideDown { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .slideUp { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .animated { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -ms-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideDownHR { 0% { -webkit-transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes slideDownHR { 0% { -moz-transform: translateY(-100%); } 100% { -moz-transform: translateY(0); } } @-o-keyframes slideDownHR { 0% { -o-transform: translateY(-100%); } 100% { -o-transform: translateY(0); } } @keyframes slideDownHR { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .animated.slideDown { -webkit-animation-name: slideDownHR; -moz-animation-name: slideDownHR; -o-animation-name: slideDownHR; animation-name: slideDownHR; } @-webkit-keyframes slideUpHR { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); } } @-moz-keyframes slideUpHR { 0% { -moz-transform: translateY(0); } 100% { -moz-transform: translateY(-100%); } } @-o-keyframes slideUpHR { 0% { -o-transform: translateY(0); } 100% { -o-transform: translateY(-100%); } } @keyframes slideUpHR { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } .animated.slideUp { -webkit-animation-name: slideUpHR; -moz-animation-name: slideUpHR; -o-animation-name: slideUpHR; animation-name: slideUpHR; } @-webkit-keyframes swingInX { 0% { -webkit-transform: perspective(400px) rotateX(-90deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); } } @-moz-keyframes swingInX { 0% { -moz-transform: perspective(400px) rotateX(-90deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); } } @-o-keyframes swingInX { 0% { -o-transform: perspective(400px) rotateX(-90deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); } } @keyframes swingInX { 0% { transform: perspective(400px) rotateX(-90deg); } 100% { transform: perspective(400px) rotateX(0deg); } } .animated.swingInX { -webkit-transform-origin: top; -moz-transform-origin: top; -ie-transform-origin: top; -o-transform-origin: top; transform-origin: top; -webkit-backface-visibility: visible !important; -webkit-animation-name: swingInX; -moz-backface-visibility: visible !important; -moz-animation-name: swingInX; -o-backface-visibility: visible !important; -o-animation-name: swingInX; backface-visibility: visible !important; animation-name: swingInX; } @-webkit-keyframes swingOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); } 100% { -webkit-transform: perspective(400px) rotateX(-90deg); } } @-moz-keyframes swingOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); } 100% { -moz-transform: perspective(400px) rotateX(-90deg); } } @-o-keyframes swingOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); } 100% { -o-transform: perspective(400px) rotateX(-90deg); } } @keyframes swingOutX { 0% { transform: perspective(400px) rotateX(0deg); } 100% { transform: perspective(400px) rotateX(-90deg); } } .animated.swingOutX { -webkit-transform-origin: top; -webkit-animation-name: swingOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: swingOutX; -moz-backface-visibility: visible !important; -o-animation-name: swingOutX; -o-backface-visibility: visible !important; animation-name: swingOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .animated.flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .animated.flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-200px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-200px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-200px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-200px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .animated.bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 30% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-200px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 30% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-200px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 30% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-200px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 30% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-200px); } } .animated.bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } </style> {% endif %} {% endblock %} {% block javascript_footer %} {% if particle.enabled %} {% do gantry.load('jquery') %} {{ parent() }} <script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/headroom.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/jQuery.headroom.js"></script> {% if particle.cssselector %} <script> (function($) { $(window).load(function() { $("{{ particle.cssselector|e }}").headroom({ "offset": {{ particle.offset|default(300)|e }}, "tolerance": 5, "classes": { "initial": "animated", "pinned": "{% if particle.animation|default('slide')|e =='slide' %}slideDown{% endif %}{% if particle.animation|default('slide')|e =='swing' %}swingInX{% endif %}{% if particle.animation|default('slide')|e =='flip' %}flipInX{% endif %}{% if particle.animation|default('slide')|e =='bounce' %}bounceInDown{% endif %}", "unpinned": "{% if particle.animation|default('slide')|e =='slide' %}slideUp{% endif %}{% if particle.animation|default('slide')|e =='swing' %}swingOutX{% endif %}{% if particle.animation|default('slide')|e =='flip' %}flipOutX{% endif %}{% if particle.animation|default('slide')|e =='bounce' %}bounceOutUp{% endif %}" } }); var stickyOffset = $('{{ particle.cssselector|e }}').offset().top; var stickyContainerHeight = $('{{ particle.cssselector|e }}').height(); $('{{ particle.cssselector|e }}').wrap( "<div class='g-fixed-container'><\/div>" ); $('.g-fixed-container').css("height", stickyContainerHeight); {% if particle.mobile|default('disable') == 'disable' %} $(window).resize(function() { if( $(window).width() < 768 && $('.g-fixed-container').length ) { $('{{ particle.cssselector|e }}').unwrap(); } if( $(window).width() > 767 && $('.g-fixed-container').length == 0 ) { $('{{ particle.cssselector|e }}').wrap( "<div class='g-fixed-container'><\/div>" ); $('.g-fixed-container').css("height", stickyContainerHeight); } }); {% endif %} $(window).scroll(function(){ var sticky = $('{{ particle.cssselector|e }}'), scroll = $(window).scrollTop(); if (scroll > stickyOffset {% if particle.mobile|default('disable') == 'disable' %}&& $(window).width() > 767{% endif %}) sticky.addClass('g-fixed-active'); else sticky.removeClass('g-fixed-active'); }); }); })(jQuery); </script> {% endif %} {% endif %} {% endblock %}
| ver. 1.4 |
Github
|
.
| PHP 8.1.33 | Генерация страницы: 0.02 |
proxy
|
phpinfo
|
Настройка