HTML/CSS/JS
| post-views6857 post-comments0
Anton An2 Anton An2

Создаем красивый баннер на CSS и jQuery

Вы используете блокировщик рекламы

Пожалуйста, отключите блокировщик рекламы

Подробнее

Сегодня мы расскажем как создать красивый баннер на CSS и jQuery. Этот вариант мы придумали сами для нашего сайта и нам кажется, что он имеент право на существование. Поэтому мы решили поделиться им. Как будет выглядеть результат вы можете увидеть на баннере этой статьи или по этой ссылке.

Суть скрипта заключается в том, что мы создаем четыре копии основного изображения и распределяем из по обертке так, чтобы они состовляли немного увеличинную исходную копию изображения. После загрузки страницы мы запускаем анимацию разделительных линий и клонированных картинок.

Итак, начнем с HTML разметки:

    <div class="thumbnail-wrap">
        <!-- Линии на баннере -->
        <span class="thumbnail-line thumbnail-line-1"></span>
        <span class="thumbnail-line thumbnail-line-2"></span>
        <span class="thumbnail-line thumbnail-line-3"></span>
 
        <div class="img-thumb">
            <img width="2000" height="800" src="https://an2-studio.xyz/koala/wp-content/uploads/2017/09/nadine-shaabana-226967-2000x800.jpg" alt="">
        </div>
 
        <!-- Контейнеры для клонированных изображений -->
        <div class="clone clone-1"></div>
        <div class="clone clone-2"></div>
        <div class="clone clone-3"></div>
        <div class="clone clone-4"></div>
    </div>

Мы создали обертку для картинки, контейнеры, куда будут вставлены клонированные изображения и линии на баннере. Далее пишем CSS:

	/* Стили контейнера картинки */
    .thumbnail-wrap {
        background: #fcff00;
        margin: 0 0 50px;
        min-height: 100px;
        position: relative;
        width: 100%;
    }
    .no-thumbnail-wrap {
        min-height: 100px;
        background: #fbed2c;
    }
 
    /* Линии на баннере с высотой = 0,
    делим изображение на 4 равные части */
    .thumbnail-line {
        background: #fff;
        display: block;
        height: 100%;
        max-height: 0;
        position: absolute;
        top: 0;
        width: 1px;
        z-index: 9;
    }
    .thumbnail-line-1 {
        left: 25%;
        transition: all 0.3s ease;
    }
    .thumbnail-line-2 {
        left: 50%;
        transition: all 0.5s ease;
    }
    .thumbnail-line-3 {
        left: 75%;
        transition: all 0.7s ease;
    }
 
    /* Стили картинки */
    .thumbnail-wrap img {
        display: block;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
    }
 
    /* Стили для контейнеров клонированных изображений,
    каждый контейнер равен 1/4 всего блока,
    с помощью overflow: hidden скрываем не
    влезающуючасть клонированых картинок*/
    .clone {
        height: 100%;
        max-height: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 25%;
    }
    .clone-1 {
        left: 0;
        transition: all 0.5s ease;
    }
    .clone-2 {
        left: 25%;
        transition: all 1s ease;
    }
    .clone-3 {
        left: 50%;
        transition: all 1.5s ease;
    }
    .clone-4 {
        left: 75%;
        transition: all 2s ease;
    }
    .clone img {
        top: 0;
        max-width: none;
        transition: all 0.3s ease;
    }
 
    /* При ховере увеличиваем изображение */
    .clone:hover img {
        transform: scale(1.1);
    }
 
    /* Стили клонированных картинок,
    позиционируем их с помощью свойства left,
    чтобы они составляли единое изображение */
    .clone-1 img {
        left: 0;
        position: absolute;
    }
    .clone-2 img {
        left: -100%;
        position: absolute;
    }
    .clone-3 img {
        left: -200%;
        position: absolute;
    }
    .clone-4 img {
        left: -300%;
        position: absolute;
    }

И добавляем немного JS, чтобы все это заработало как нам нужно. Не забываем подключить jQuery библиотеку.

	// Запускаем после полной загрузки страницы
	$(window).on('load', function(){ 
        // Запускаем анимацию линий
        $( '.thumbnail-line-1' ).css( 'max-height', '100%' );
        $( '.thumbnail-line-2' ).css( 'max-height', '100%' );
        $( '.thumbnail-line-3' ).css( 'max-height', '100%' );
        var pageWidth = $( window ).width(); // Ширина окна браузера
        if( $( '.img-thumb img' ).width() &gt;= pageWidth ){ // Если ширина картинки больше ширины окна браузера, то запукаем анимацию
            setTimeout( function () { // Запустить анимацию картинок через секунду после загрузки страницы
                // Клонируем исходную картинку в контейнеры с увеличением ширины на 20px
                $( '.img-thumb img' ).clone().css( 'width', pageWidth+20 ).appendTo( '.clone-1' );
                $( '.img-thumb img' ).clone().css( 'width', pageWidth+20 ).appendTo( '.clone-2' );
                $( '.img-thumb img' ).clone().css( 'width', pageWidth+20 ).appendTo( '.clone-3' );
                $( '.img-thumb img' ).clone().css( 'width', pageWidth+20 ).appendTo( '.clone-4' );
                $( '.clone-1, .clone-2, .clone-3, .clone-4' ).css( 'max-height', '100%' );
            }, 1000);
        }
    });
 
    // При ресайзе браузера высчитываем новую ширину окна и меняем размеры клонированных картинок
    $( window ).resize(function() {
        var pageWidth = $(window).width();
        $( '.clone-1 img' ).css( 'width', pageWidth+20 );
        $( '.clone-2 img' ).css( 'width', pageWidth+20 );
        $( '.clone-3 img' ).css( 'width', pageWidth+20 );
        $( '.clone-4 img' ).css( 'width', pageWidth+20 );
    });

Вот и все, ниже приведу полный код полученной страницы.

<html lang="ru-RU">
<head>
<style type="text/css">
    body {
        padding: 0;
        margin: 0;
    }
    /* Стили контейнера картинки */
    .thumbnail-wrap {
        background: #fcff00;
        margin: 0 0 50px;
        min-height: 100px;
        position: relative;
        width: 100%;
    }
    .no-thumbnail-wrap {
        min-height: 100px;
        background: #fbed2c;
    }
 
    /* Линии на баннере с высотой = 0,
    делим изображение на 4 равные части */
    .thumbnail-line {
        background: #fff;
        display: block;
        height: 100%;
        max-height: 0;
        position: absolute;
        top: 0;
        width: 1px;
        z-index: 9;
    }
    .thumbnail-line-1 {
        left: 25%;
        transition: all 0.3s ease;
    }
    .thumbnail-line-2 {
        left: 50%;
        transition: all 0.5s ease;
    }
    .thumbnail-line-3 {
        left: 75%;
        transition: all 0.7s ease;
    }
 
    /* Стили картинки */
    .thumbnail-wrap img {
        display: block;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
    }
 
    /* Стили для контейнеров клонированных изображений,
    каждый контейнер равен 1/4 всего блока,
    с помощью overflow: hidden скрываем не
    влезающуючасть клонированых картинок*/
    .clone {
        height: 100%;
        max-height: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 25%;
    }
    .clone-1 {
        left: 0;
        transition: all 0.5s ease;
    }
    .clone-2 {
        left: 25%;
        transition: all 1s ease;
    }
    .clone-3 {
        left: 50%;
        transition: all 1.5s ease;
    }
    .clone-4 {
        left: 75%;
        transition: all 2s ease;
    }
    .clone img {
        top: 0;
        max-width: none;
        transition: all 0.3s ease;
    }
 
    /* При ховере увеличиваем изображение */
    .clone:hover img {
        transform: scale(1.1);
    }
 
    /* Стили клонированных картинок,
    позиционируем их с помощью свойства left,
    чтобы они составляли единое изображение */
    .clone-1 img {
        left: 0;
        position: absolute;
    }
    .clone-2 img {
        left: -100%;
        position: absolute;
    }
    .clone-3 img {
        left: -200%;
        position: absolute;
    }
    .clone-4 img {
        left: -300%;
        position: absolute;
    }
</style>
</head>
<body>
    <div class="thumbnail-wrap">
        <!-- Линии на баннере -->
        <span class="thumbnail-line thumbnail-line-1"></span>
        <span class="thumbnail-line thumbnail-line-2"></span>
        <span class="thumbnail-line thumbnail-line-3"></span>
 
        <div class="img-thumb">
            <img width="2000" height="800" src="https://an2-studio.xyz/koala/wp-content/uploads/2017/09/nadine-shaabana-226967-2000x800.jpg" alt="">
        </div>
 
        <!-- Контейнеры для клонированных изображений -->
        <div class="clone clone-1"></div>
        <div class="clone clone-2"></div>
        <div class="clone clone-3"></div>
        <div class="clone clone-4"></div>
    </div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
        $(window).on('load', function(){ // Запускаем после полной загрузки страницы
 
            // Запускаем анимацию линий
            $( '.thumbnail-line-1' ).css( 'max-height', '100%' );
            $( '.thumbnail-line-2' ).css( 'max-height', '100%' );
            $( '.thumbnail-line-3' ).css( 'max-height', '100%' );
            var pageWidth = $( window ).width(); // Ширина окна браузера
            if( $( '.img-thumb img' ).width() >= pageWidth ){ // Если ширина картинки больше ширины окна браузера, то запукаем анимацию
                setTimeout( function () { // Запустить анимацию картинок через секунду после загрузки страницы
 
                    // Клонируем исходную картинку в контейнеры с увеличением ширины на 20px
                    $( '.img-thumb img' ).clone().css( 'width', pageWidth+20 ).appendTo( '.clone-1' );
                    $( '.img-thumb img' ).clone().css( 'width', pageWidth+20 ).appendTo( '.clone-2' );
                    $( '.img-thumb img' ).clone().css( 'width', pageWidth+20 ).appendTo( '.clone-3' );
                    $( '.img-thumb img' ).clone().css( 'width', pageWidth+20 ).appendTo( '.clone-4' );
                    $( '.clone-1, .clone-2, .clone-3, .clone-4' ).css( 'max-height', '100%' );
 
                }, 1000);
            } else {
                $('.thumbnail-line').hide(); // Если ширина картинки меньше ширины окна браузера, то скрываем линии
            }
        });
 
        // При ресайзе браузера высчитываем новую ширину окна и меняем размеры клонированных картинок
        $( window ).resize(function() {
            var pageWidth = $(window).width();
            $( '.clone-1 img' ).css( 'width', pageWidth+20 );
            $( '.clone-2 img' ).css( 'width', pageWidth+20 );
            $( '.clone-3 img' ).css( 'width', pageWidth+20 );
            $( '.clone-4 img' ).css( 'width', pageWidth+20 );
        });
</script>
</body>
</html>
Демо
Вы используете блокировщик рекламы

Пожалуйста, отключите блокировщик рекламы

Подробнее

Подписывайтесь на наш Telegram канал, чтобы не пропускать наши статьи 😎

Читай еще
Комментарии (0)
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *