Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 21.08.2018, 08:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,039

Malleys,
подскажи можно ли сделать бесконечный зум, при наведении на фото, пример того что хочется ниже, но края картинки "дрожжат", это главная беда и цикл без повтора.
строка 51.
<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <style type="text/css">

.carousel:after, .carousel:before {
    content: "";
    display: block;
    height: 50px;
    background: #f1fff1;
}

.carousel:after {
    background: #fffff1;
}

.carousel .owl-stage-outer {
    padding: 30px 0;
    margin: -30px 0;
}

.carousel .owl-stage {
    display: flex;
    background: black;
}

.carousel .owl-item {
    transition: .15s;
    z-index: 0;
    flex: 1 0 auto;
}

.carousel .owl-item:hover {
    transition: .5s;
    transform: scale(1.25);
    z-index: 10;
}

.carousel .photo {
    display: block;
    overflow: hidden;
    height: 100%;
}

.carousel .photo img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.carousel .owl-item:hover img{
    transition: 5s;
    transform: scale(1.25);
}

    </style>
    <link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet">
    <link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
    <script>
jQuery(window).on("load", function() {
        $("#photo-gallery").owlCarousel({
                loop: true,
                nav: false,
                dots: false,
                responsive: {
                            0: { items: 2 },
                        480: { items: 3 },
                        768: { items: 4 },
                        992: { items: 5 }
                }
        })
});
    </script>
</head>
<body>
    <section id="photo-gallery" class="carousel owl-carousel">
        <a class="photo"><img src="https://picsum.photos/300/190/?random&r=1" alt="photo-1"></a>
        <a class="photo"><img src="https://picsum.photos/304/184/?random&r=2" alt="photo-2"></a>
        <a class="photo"><img src="https://picsum.photos/305/189/?random&r=3" alt="photo-3"></a>
        <a class="photo"><img src="https://picsum.photos/304/189/?random&r=4" alt="photo-4"></a>
        <a class="photo"><img src="https://picsum.photos/305/190/?random&r=5" alt="photo-5"></a>
    </section>
</body>
</html>
Ответить с цитированием
  #12 (permalink)  
Старый 21.08.2018, 11:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,039

OwlCarousel zoom
Malleys,
примерный вариант бесконечного зума, хотелось бы как-то плавнее сделать переходы и в хроме особенно видно, как края картинок 'плывут'.
<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <style type="text/css">

.carousel:after, .carousel:before {
    content: "";
    display: block;
    height: 50px;
    background: #f1fff1;
}

.carousel:after {
    background: #fffff1;
}

.carousel .owl-stage-outer {
    padding: 30px 0;
    margin: -30px 0;
}

.carousel .owl-stage {
    display: flex;
    background: black;
}

.carousel .owl-item {
    transition: .15s;
    z-index: 0;
    flex: 1 0 auto;
}

.carousel .owl-item:hover {
    transition: .5s;
    transform: scale(1.25);
    z-index: 10;
}

.carousel .photo {
    display: block;
    overflow: hidden;
    height: 100%;
}

.carousel .photo img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.carousel .owl-item:hover .photo img{
      animation: zoom 7s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
@keyframes zoom{
   0%{
    transform: scale(1);
   }

   95%{
     transform: scale(2);
   }

   100%{
    transform: scale(10);
   }
}

    </style>
    <link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet">
    <link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
    <script>
jQuery(window).on("load", function() {
        $("#photo-gallery").owlCarousel({
                loop: true,
                nav: false,
                dots: false,
                responsive: {
                          0: { items: 2 },
                        480: { items: 3 },
                        768: { items: 4 },
                        992: { items: 5 }
                }
        })
});
    </script>
</head>
<body>
    <section id="photo-gallery" class="carousel owl-carousel">
        <a class="photo"><img src="https://picsum.photos/300/190/?random&r=1" alt="photo-1"></a>
        <a class="photo"><img src="https://picsum.photos/304/184/?random&r=2" alt="photo-2"></a>
        <a class="photo"><img src="https://picsum.photos/305/189/?random&r=3" alt="photo-3"></a>
        <a class="photo"><img src="https://picsum.photos/304/189/?random&r=4" alt="photo-4"></a>
        <a class="photo"><img src="https://picsum.photos/305/190/?random&r=5" alt="photo-5"></a>
    </section>
</body>
</html>

Последний раз редактировалось рони, 21.08.2018 в 11:12.
Ответить с цитированием
  #13 (permalink)  
Старый 21.08.2018, 11:21
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,386

рони,
Дрожание из за scale. сам часто сталкиваюсь.
если поменять 1.2 например или другое значение пропадает, но при масштабировании или на ретине может появится опять.

в общем универсальный способ избавится был бы кстати.
Ответить с цитированием
  #14 (permalink)  
Старый 21.08.2018, 16:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 393

Это баг в движке браузера. Оно не должно дрожать или «плыть».

Если добавить
/* костыль */		
	overflow: hidden;
	border-radius: .01px;

то в данном случае дрожание скрывается

codepen.io/anon/pen/OoPLrX
Ответить с цитированием
  #15 (permalink)  
Старый 21.08.2018, 16:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,386

Malleys,
костыль работает, спасибо, небольшой косяк при масштабировании нижней границы картинки.
Ответить с цитированием
  #16 (permalink)  
Старый 21.08.2018, 16:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,039

Malleys,
спасибо огромное!!!
Ответить с цитированием
  #17 (permalink)  
Старый 21.08.2018, 22:05
Аспирант
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 92

Сообщение от Malleys
Вместо такой кучи правил @media, можно было указать приблизительно height: 20vw;, но и это не нужно, поскольку (Овальные колёса машины)
Спасибо большое вам с рони! Много нового для себя узнал. Хотел только уточнить по поводу
object-fit: cover;
, которое убирает микроотступы, как я понимаю - оно вель не кроссбраузерное для ie и старщих edge - как-нить это можно решить?
Ответить с цитированием
  #18 (permalink)  
Старый 21.08.2018, 22:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,039

giwuf,
Сообщение от giwuf
object-fit: cover;
Цитата:
меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока:
это не критично, или в каком-то браузере очень заметно?
object-fit
да и вопросы по css, лучше адресовать Malleys, он более продвинутый специалист по этой теме.
Ответить с цитированием
  #19 (permalink)  
Старый 21.08.2018, 22:54
Аспирант
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 92

Сообщение от рони Посмотреть сообщение
giwuf,
это не критично, или в каком-то браузере очень заметно?
object-fit
да и вопросы по css, лучше адресовать Malleys, он более продвинутый специалист по этой теме.
Окей. В ie11 очень заметно - картинка при наведении сразу становится черной, а после этого идет зумирование, в ie10 у меня даже карусель не загружает. Malleys, может быть знаете способ решения?
Нашел нечто подобное на polyfill, но что-то бекграудная картинка даже не перекрывает внутренний img, а если через консоль принудительно картинку удалить, то точно такой же артифакт срабатывает и на бэкграунде. Может быть дело в
Код:
transform: scale(1.25);
? Но сам transform ie11 должен читать без проблем
Ответить с цитированием
  #20 (permalink)  
Старый 21.08.2018, 23:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,039

Сообщение от giwuf
В ie11 очень заметно - картинка при наведении сразу становится черной,
вероятно у вас иное css, или ошибки, чем варианты предлгаемые тут.
проверял в ie11, нет никаких проблем с scale(1.25)
Сообщение от giwuf
в ie10 у меня даже карусель не загружает.
jquery вероятно нужен ниже версии 2, замените на
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не работает передача через POST OklickSpb Общие вопросы Javascript 3 31.03.2012 01:43
ссылка с fadeIn работает через раз oblomov86 jQuery 1 24.03.2011 17:52
скрипт работает в IE через раз jsVAN Internet Explorer 2 10.03.2011 03:27
Регулярные выражения работают через раз San4ezy Общие вопросы Javascript 5 05.10.2010 01:50
Регулярка работает через раз. Andrej_2 Общие вопросы Javascript 17 17.05.2009 15:15