Бабосик Вебмастера

Прокрутка изображения при наведении мыши

 Прокрутка изображения
 
Интересный эффект при наведении мыши на картинку происходит плавня или быстрая прокрутка (скроллинг) изображения, при этом ваша длинная картинка не будет занимать много места на странице, вы сами можете настроить скорость прокрутки изображения и высоту окна в котором будет происходить скроллинг картинки.
 
HTML
<span class="image-bg"><span class="image-shop-scroll" style="background-image: url('http://урл-картинки-для-скроллинга.png');"></span>
 
CSS

                                .image-bg{
                        width: 100%;height: 398px;display:inline-block;position: relative;
                        }
                        .image-bg .image-shop-scroll{
                        background-position: center 0;
                        background-repeat: no-repeat;
                        position:absolute;width:100%;height: 398px;
                        box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.3);
                        border-radius: 2px;
                        left: 0;
                        }
                        
                        .image-bg .image-shop-scroll{
                        transition: all 20s ease-out 0s;
                        -webkit-transition: all 20s ease-out 0s;
                        -moz-transition: all 20s ease-out 0s;
                        -ms-transition: all 20s ease-out 0s;
                        -o-transition: all 20s ease-out 0s;
                        }
                        .image-bg:hover .image-shop-scroll{
                        background-position: center 100%!important;
                        }
                        

Синим цветом выделен фрагмент кода для изменения окна. Красным маркером скорость прокрутки. Все, удачи, пока!
 
Пример можно посмотреть на этой странице.
+0
Добавочные статьи из категории «Создание сайта»
Оставить комментарий
2 умножить на 2 =