Форум

рони · #11 (**permalink**) 21.08.2018, 07:06

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, 10:08

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>

j0hnik · #13 (**permalink**) 21.08.2018, 10:21

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

в общем универсальный способ избавится был бы кстати.

Malleys · #14 (**permalink**) 21.08.2018, 15:08

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

Если добавить

/* костыль */		
	overflow: hidden;
	border-radius: .01px;

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

codepen.io/anon/pen/OoPLrX

j0hnik · #15 (**permalink**) 21.08.2018, 15:15

Malleys,
костыль работает, спасибо, небольшой косяк при масштабировании нижней границы картинки.

рони · #16 (**permalink**) 21.08.2018, 15:34

Malleys,
спасибо огромное!!!

giwuf · #17 (**permalink**) 21.08.2018, 21:05

Сообщение от Malleys

Вместо такой кучи правил @media, можно было указать приблизительно height: 20vw;, но и это не нужно, поскольку (Овальные колёса машины)

Спасибо большое вам с рони! Много нового для себя узнал. Хотел только уточнить по поводу

object-fit: cover;

, которое убирает микроотступы, как я понимаю - оно вель не кроссбраузерное для ie и старщих edge - как-нить это можно решить?

рони · #18 (**permalink**) 21.08.2018, 21:23

giwuf,

Сообщение от giwuf

object-fit: cover;

Цитата:

меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока:

это не критично, или в каком-то браузере очень заметно?
object-fit
да и вопросы по css, лучше адресовать Malleys, он более продвинутый специалист по этой теме.

giwuf · #19 (**permalink**) 21.08.2018, 21:54

Сообщение от рони

giwuf,
это не критично, или в каком-то браузере очень заметно?
object-fit
да и вопросы по css, лучше адресовать Malleys, он более продвинутый специалист по этой теме.

Окей. В ie11 очень заметно - картинка при наведении сразу становится черной, а после этого идет зумирование, в ie10 у меня даже карусель не загружает. Malleys, может быть знаете способ решения?
Нашел нечто подобное на polyfill, но что-то бекграудная картинка даже не перекрывает внутренний img, а если через консоль принудительно картинку удалить, то точно такой же артифакт срабатывает и на бэкграунде. Может быть дело в

Код:

transform: scale(1.25);

? Но сам transform ie11 должен читать без проблем

рони · #20 (**permalink**) 21.08.2018, 22:16

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript