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> |
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> |
рони,
Дрожание из за scale. сам часто сталкиваюсь. если поменять 1.2 например или другое значение пропадает, но при масштабировании или на ретине может появится опять. в общем универсальный способ избавится был бы кстати. |
Это баг в движке браузера. Оно не должно дрожать или «плыть».
Если добавить /* костыль */ overflow: hidden; border-radius: .01px; то в данном случае дрожание скрывается codepen.io/anon/pen/OoPLrX |
Malleys,
костыль работает, спасибо, небольшой косяк при масштабировании нижней границы картинки. |
Malleys,
спасибо огромное!!! :thanks: |
Цитата:
object-fit: cover;, которое убирает микроотступы, как я понимаю - оно вель не кроссбраузерное для ie и старщих edge - как-нить это можно решить? |
giwuf,
Цитата:
Цитата:
object-fit да и вопросы по css, лучше адресовать Malleys, он более продвинутый специалист по этой теме. |
Цитата:
Нашел нечто подобное на polyfill, но что-то бекграудная картинка даже не перекрывает внутренний img, а если через консоль принудительно картинку удалить, то точно такой же артифакт срабатывает и на бэкграунде. Может быть дело в Код:
transform: scale(1.25); |
Цитата:
проверял в ie11, нет никаких проблем с scale(1.25) Цитата:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
Часовой пояс GMT +3, время: 23:45. |