Задать вопрос
  • Почему происходит мигание анимации в Safari?

    @Elena_11 Автор вопроса
    modelair, по поводу translate3d пробовала разные рекомендации из интернета, которые выглядят уже устрашающе, но по-прежнему не работают . Советуют еще 1px по z оси задавать, якобы кому-то помогает. Но не в этом случае..

    .page-layer {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;
      right: 0;
      transform-origin: left;
      transform-style: preserve-3d;
      transition: transform 2.5s;
      transform: translate3d(0,0,1px);
      -webkit-transform: translate3d(0,0,1px);
      will-change: transform;
    }
    
    .page-layer.active {
      transform: rotateY(-180deg) translate3d(0,0,1px);
      -webkit-transform: rotateY(-180deg) translate3d(0,0,1px);
    }
    
    .page-back {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 2px;
      left: 0;
      transform-style: preserve-3d;
      transform: rotateY(180deg) translate3d(0,0,1px);
      -webkit-transform: rotateY(180deg) translate3d(0,0,1px);
      will-change: transform;
    }
    
    .page-back img {
       backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    .page-face {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0;
      transform-style: preserve-3d;
      transform: translate3d(0,0,1px);
      -webkit-transform: translate3d(0,0,1px);
      will-change: transform;
    }
    Написано
  • Почему происходит мигание анимации в Safari?

    @Elena_11 Автор вопроса
    modelair, это выдержка кода из рабочего проекта. Весь код не привожу по понятным причинам, он будет занимать слишком много места. Единственное что стоило упомянуть, что через js добавляется класс active который листает страницы

    setTimeout(function () {
            $('.page-1').addClass('active');
    
    
                     setTimeout(function () {
                             $('.page-2').addClass('active');
                              $('.page-2').css({ "z-index": "2" });
    
    ..........
    
                      }, 3500);
     }, 3500);
    Написано
  • Как сделать ссылку на слайд Swiper с текущей и другой страницы?

    @Elena_11 Автор вопроса
    Виталий Першин, Спасибо! Это полностью решает задачу
  • Как сделать ссылку на слайд Swiper с текущей и другой страницы?

    @Elena_11 Автор вопроса
    а ссылку-то как писать корректную? с другой страницы особенно интересует как осуществляется переход (если он возможен вообще)
  • Как оптимизировать новостной сайт на 16000 записей?

    @Elena_11 Автор вопроса
    mayton2019, предпочитаю общаться на вы. Вы же понимаете, что перед тем, как задавать такие вопросы, была проведена некоторая аналитика. "Конечно не огромных", это означает что каждая картинка весит не более 100-200кб в среднем. Есть конечно исключения. Если бегло пробежаться по папкам - видео занимает не более 10-20%. Но как понимаете зайти в каждую папку с 2010 года и достоверно убедиться физически нереально.
    Опять же при любом объеме медиа-файлов новостной сайт будет расти со временем и тут возникает вопрос как грамотно организовать процесс хранения данных, чтобы не вырастить неповоротливого монстра, который растёт с геометрической прогрессией
  • Как оптимизировать новостной сайт на 16000 записей?

    @Elena_11 Автор вопроса
    GeKskill, 1) повышать планируем, но на будущее все равно возник вопрос, 50гб для сайта это большая цифра. А когда будет 100гб, то по фтп сайт скопировать будет наверное неделю занимать?)
    2) Предложение с CDN звучит разумно, правда осилят ли контент-менеджеры работу с ними. И опять же они платны, но вариант рабочий вполне, в крайнем случае думаю можно прибегнуть.
    3) Разумный совет, можно обратить внимание.
    Спасибо за толковые мысли
  • Как оптимизировать новостной сайт на 16000 записей?

    @Elena_11 Автор вопроса
    mayton2019, конечно именно медиа (картинки и видео) занимают основной объём данных. Хотя сами отдельные медиа не огромных размеров, но из-за их кол-ва сжирается объём памяти
  • Остановка замедленного owl-carousel?

    @Elena_11
    William Miller, подскажите, при помощи какого плагина в итоге решили проблему?
  • Что быстрее: Owl carowsel или Slick Slider?

    @Elena_11 Автор вопроса
    Виталий Першин, странное заявление, т.к. каждый выбирает инструменты исходя из задачи и потребностей. Owl и Slick используют по сей день, т.к. они обладают необходимым функционалом и позволяют реализовать поставленные задачи. Хотя про Slick не могу ручаться, но owl меня ещё ни разу пока не подводил) Если уж и хвалите какой-то плагин, то хотя бы обоснуйте чем он лучше
  • Остановка замедленного owl-carousel?

    @Elena_11
    William Miller, да всё верно, а вы её пытались под себя приспособить? подошло?
  • Остановка замедленного owl-carousel?

    @Elena_11
    William Miller, вроде где-то мельком видела, что в slick слайдер можно реализовать. Но в демо у них на сайте такого не вижу, также на сайте на котором видела такую карусель используется вот этот скрипт https://swiperjs.com/swiper-api
    Но там в демо тоже нет такого. Надо пробовать.
    У меня проблема в том, что на owl вся страница свёрстана и менять из-за одной карусели скрипт совсем уж не хочется. Тем более пока уверенности полной нет на что именно.
  • Остановка замедленного owl-carousel?

    @Elena_11
    William Miller, а вы уже знаете с какой каруселью можно реализовать это? Или тоже пока в поиске?
  • Остановка замедленного owl-carousel?

    @Elena_11
    William Miller, хотя озвученные проблемы наверное вас не касаются, потому что у вас стартует при наведении, а у меня вообще постоянно должна скользить. Если найдёте решение лучше, то поделитесь, пожалуйста
  • Остановка замедленного owl-carousel?

    @Elena_11
    Сделала пока так. Проверку через счётчик, чтобы для первого запуска задать setTimeout отличный от других. Но у этого решения есть нюанс, по-моему перемена скорости происходит не так плавно, если всматриваться, то можно заметить некую перемену в скольжении. Но это если знать) у меня без ховера, вы можете с ховером под себя доработать и свои значения задать.
    Также после изменения размера экрана и переключения активной вкладки - карусель стартует медленно опять.
    Пробовала что-то вроде window.onresize = function( event ) {count = 0}; но анимация неровная какая-то получается. Видимо owl carousel не особо заточена под такие задачи

    var owl=$("#reviews")
    
    var count = 0;
    
     owl.owlCarousel({
            items: 5,
            nav: false,
            dots: false,
            loop: true,
            center: false,
            margin: 30,
            autoWidth: false,
            autoplay: false,
            rewind: false,
            slideTransition: 'linear',
            autoplaySpeed: 6000,
            smartSpeed: 6000,
            onChanged: callBack,
            responsive: {
                1200:{
                    items: 5
                }
            }
    })
    
    function callBack(event) {
    
        if(count ===0) {
          owl.trigger('stop.owl.autoplay')
          setTimeout(function() { owl.trigger('play.owl.autoplay',[3500])});
          count++ 
         }
    
         if (count >0) {
               owl.trigger('play.owl.autoplay',[6000])
        }
       
        
    }
  • Остановка замедленного owl-carousel?

    @Elena_11
    присоединяюсь к вашему вопросу. Только мне нужно без ховера) но проблема та же. Уже несколько дней голову ломаю