Скрипт для создания онлайн эффекта было-стало, либо разница между двумя изображениями.
Код в сайт
<div class="container"> <div class="divider-wrapper"> <div class="code-wrapper"> <div class="design-wrapper"> <div class="design-image"></div> </div> </div> <div class="divider-bar"></div> </div> <br><br> </div>
Скрипт в подвал
<script> (function($){ $(function(){ $('.code-wrapper').on( "mousemove", function(e) { var offsets = $(this).offset(); var fullWidth = $(this).width(); var mouseX = e.pageX - offsets.left; if (mouseX < 0) { mouseX = 0; } else if (mouseX > fullWidth) { mouseX = fullWidth } $(this).parent().find('.divider-bar').css({ left: mouseX, transition: 'none' }); $(this).find('.design-wrapper').css({ transform: 'translateX(' + (mouseX) + 'px)', transition: 'none' }); $(this).find('.design-image').css({ transform: 'translateX(' + (-1*mouseX) + 'px)', transition: 'none' }); }); $('.divider-wrapper').on( "mouseleave", function() { $(this).parent().find('.divider-bar').css({ left: '50%', transition: 'all .3s' }); $(this).find('.design-wrapper').css({ transform: 'translateX(50%)', transition: 'all .3s' }); $(this).find('.design-image').css({ transform: 'translateX(-50%)', transition: 'all .3s' }); }); }); // end of document ready })(jQuery); // end of jQuery name space </script>
CSS
/* Эффект с ретушью */ .container { height: 100%; text-align: center; } /* Divider Styles */ .divider-wrapper { width: 800px; height: 458px; margin: 0 auto; position: relative; } .divider-wrapper:hover { cursor: none; } .divider-bar { position: absolute; width: 2px; left: 50%; top: 2px; bottom: -2px; color:fff; background-color:#fbedc8; /*background-image: -webkit-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%); background-image: -moz-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%); background-image: -o-linear-gradient(top,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%); background-image: linear-gradient(to bottom,rgba(59,144,203,0) 0,#64b700 2%,#64b700 98%,rgba(59,144,203,0) 100%);*/ -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.4); box-shadow: 0 0 10px 1px rgba(0,0,0,0.4); } .code-wrapper { border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border: 2px solid #222; display: block; overflow: hidden; width: 100%; height: 100%; position: relative; background: url("https://opttour.ru/wp-content/uploads/2016/07/photo0.jpg") no-repeat; } .design-wrapper, .design-image { border-radius: 0 8px 8px 0; -moz-border-radius: 0 8px 8px 0; -webkit-border-radius: 0 8px 8px 0; } .design-wrapper { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translateX(50%); transform: translateX(50%); } .design-image { display: block; width: 100%; height: 100%; position: relative; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: url("https://opttour.ru/wp-content/uploads/2016/07/photo.jpg") no-repeat; }
Пример:
Здравствуйте.
Подскажите как сделать чтобы картинка из блока design-image показывалась слева, а не справа?
Просто поменять местами background с code-wrapper не подходит, потому что на работающем сайте используются png.
И нужно именно чтобы исчезающее изображение в блоке design-image появлялось слева.
Я Вас не совсем понял. Я чтобы поменять местами лево/право (было/стало) просто поменял местами ссылки на изображения в стилях code-wrapper и design-image. У Вас PNG накладывается на другое изображение? Объясните подробнее.
да у меня png. и одно изображение имеет отличие в краях. и если их поменять местами. т.е. то что было в design-image, поставить в code-wrapper. эти края проступают снизу тогда, чего не должно быть. поэтому картинка с небольшими краями должна остаться в design-image, потому как при движении курсора именно этот блок как бы скрывается, но нужно чтобы картинка отображалась слева. т.е. накладывалась слева-направо.
удалось сделать реверс картинки.. чтобы она появлялась слева направо
https://jsfiddle.net/8jpanmd6/
но скрипт не срабатывает при наведении
изменения были внесены в скрипте строки 7, 14, 28, 32, 36
и в css 22, 63, 64, 72, 73
были попытки изменить скрипт, но не получилось
может Вы быстрее поймете что нужно чтобы заработало снова при наведении?
Не работает с мобилы