@SilencerWeb

Как обвернуть функцию, чтобы она применялась лишь для мобильного разрешения?

Вот тут есть меню silencer.website/consulex , оно скрывается и появляется лишь при нажатии на кнопку, но это должно же быть только на мобильных разрешениях. Так как это сделать? Может можно с помощью jQuery обвернуть и задать брейкпоинт? Разрешение если что нужно 767px. Надеюсь есть легкий способ это реализовать, а то вообще идей нет...

Вот сама функция:
$(document).ready(function () {
    //OPEN TRIGGER
    var openTrigger = $('.page-header__open-trigger');
    var openTriggerTop = openTrigger.find('.page-header__open-bar--top');
    var openTriggerMiddle = openTrigger.find('.page-header__open-bar--middle');
    var openTriggerBottom = openTrigger.find('.page-header__open-bar--bottom');

//CLOSE TRIGGER
    var closeTrigger = $('.page-header__close-trigger');
    var closeTriggerLeft = closeTrigger.find('.page-header__close-bar--left');
    var closeTriggerRight = closeTrigger.find('.page-header__close-bar--right');

    var logo = $('.logo');

//MENU
    var menuContainer = $('.main-nav__list-wrapper');
    var menu = $('.main-nav__list');
    var menuTop = $('.main-nav__background--top');
    var menuMiddle = $('.main-nav__background--middle');
    var menuBottom = $('.main-nav__background--bottom');

//TL
    var tlOpen = new TimelineMax({paused: true});
    var tlClose = new TimelineMax({paused: true});

//OPEN TIMELINE
    tlOpen.add("preOpen")
        .to(logo, 0.4, {
            scale: 0.8,
            opacity: 0,
            ease: Power2.easeOut
        }, "preOpen")
        .to(openTriggerTop, 0.4, {
            x: "+80px", y: "-80px", delay: 0.1, ease: Power4.easeIn, onComplete: function () {
                closeTrigger.css('z-index', '25');
            }
        }, "preOpen")
        .to(openTriggerMiddle, 0.4, {
            x: "+=80px", y: "-=80px", ease: Power4.easeIn,
            onComplete: function () {
                openTrigger.css('visibility', 'hidden');
            }
        }, "preOpen")
        .to(openTriggerBottom, 0.4, {
            x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn
        }, "preOpen")
        .add("open", "-=0.4")
        .to(menuTop, 0.8, {
            y: "13%",
            ease: Power4.easeInOut
        }, "open")
        .to(menuMiddle, 0.8, {
            scaleY: 1,
            ease: Power4.easeInOut
        }, "open")
        .to(menuBottom, 0.8, {
            y: "-114%",
            ease: Power4.easeInOut
        }, "open")
        .fromTo(menu, 0.6, {
            y: 30, opacity: 0, visibility: 'hidden'
        }, {
            y: 0, opacity: 1, visibility: 'visible', ease: Power4.easeOut
        }, "-=0.2")
        .add("preClose", "-=0.8")
        .to(closeTriggerLeft, 0.8, {
            x: "-=100px", y: "+=100px", ease: Power4.easeOut
        }, "preClose")
        .to(closeTriggerRight, 0.8, {
            x: "+=100px", y: "+=100px", delay: 0.2, ease: Power4.easeOut
        }, "preClose");

//CLOSE TIMELINE
    tlClose.add("close")
        .to(menuTop, 0.2, {
            backgroundColor: "#6295ca", ease: Power4.easeInOut, onComplete: function () {
                logo.css('z-index', '26');
                closeTrigger.css('z-index', '5');
                openTrigger.css('visibility', 'visible');
            }
        }, "close")
        .to(menuMiddle, 0.2, {
            backgroundColor: "#6295ca", ease: Power4.easeInOut
        }, "close")
        .to(menuBottom, 0.2, {
            backgroundColor: "#6295ca", ease: Power4.easeInOut
        }, "close")
        .to(menu, 0.6, {
            y: 20, opacity: 0, ease: Power4.easeOut, onComplete: function () {
                menu.css('visibility', 'hidden');
            }
        }, "close")
        .to(logo, 0.8, {
            scale: 1, opacity: 1, ease: Power4.easeInOut
        }, "close", "+=0.2")
        .to(menuTop, 0.8, {
            y: "-113%",
            ease: Power4.easeInOut
        }, "close", "+=0.2")
        .to(menuMiddle, 0.8, {
            scaleY: 0,
            ease: Power4.easeInOut 
        }, "close", "+=0.2")
        .to(menuBottom, 0.8, {
            y: "23%",
            ease: Power4.easeInOut,
            onComplete: function () {
                menuTop.css('background-color', '#ffa000');
                menuMiddle.css('background-color', '#ffffff');
                menuBottom.css('background-color', '#ffa000');
            }
        }, "close", "+=0.2")
        .to(closeTriggerLeft, 0.2, {
            x: "+=100px", y: "-=100px", ease: Power4.easeIn
        }, "close")
        .to(closeTriggerRight, 0.2, {
            x: "-=100px", y: "-=100px", delay: 0.1, ease: Power4.easeIn
        }, "close")
        .to(openTriggerTop, 1, {
            x: "-=80px", y: "+=80px", delay: 0.2, ease: Power4.easeOut
        }, "close")
        .to(openTriggerMiddle, 1, {
            x: "-=80px", y: "+=80px", ease: Power4.easeOut
        }, "close")
        .to(openTriggerBottom, 1, {
            x: "-=80px", y: "+=80px", delay: 0.1, ease: Power4.easeOut
        }, "close");

//EVENTS
    openTrigger.on('click', function () {
        if (tlOpen.progress() < 1) {
            tlOpen.play();
        } else {
            tlOpen.restart();
        }
    });

    closeTrigger.on('click', function () {
        if (tlClose.progress() < 1) {
            tlClose.play();
        } else {
            tlClose.restart();
        }
    });

        $(function(){
            $('.page-header__trigger').click(function(){
                $('body').toggleClass('body--overflow');
            });
        });

});
  • Вопрос задан
  • 283 просмотра
Решения вопроса 1
nevkusniy
@nevkusniy
KRATOR
Вам следует сделать проверку на девайс или на разрешение экрана и в зависимости от результата разрешать выполнение вашей функции.
if( isMobile() ) yourFunction();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы