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

Perfect banner on CSS and jQuery

You block advertising

Please disable ad blocker

Read more

Today we will tell you how to create a perfect banner in CSS and jQuery. This script we created for our site and we decided to share it. The result you can see on the banner of this article or follow this link.

The essence of the script is that we create four copies of the main image and distribute it from the wrapper so that they make up a slightly larger original copy of the image. After loading the page, we start the animation of dividing lines and cloned pictures.

So, let’s start with HTML markup:

     <div class="thumbnail-wrap">
        <!-- Lines on the banner -->
        <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>
 
        <!-- Containers for cloned images -->
        <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>

We created a wrapper for pictures, containers, where the cloned images and lines on the banner will be inserted. Next we write CSS:

    /* Styles of picture's container */
    .thumbnail-wrap {
        background: #fcff00;
        margin: 0 0 50px;
        min-height: 100px;
        position: relative;
        width: 100%;
    }
    .no-thumbnail-wrap {
        min-height: 100px;
        background: #fbed2c;
    }
 
    /* Lines on a banner with height = 0,
     divide the image into 4 equal parts */
    .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;
    }
 
    /* Picture's style */
    .thumbnail-wrap img {
        display: block;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
    }
 
    /* Styles for containers of cloned images,
     each container is 1/4 of the main block,
     with the help of overflow: hidden we hide
     uncoupling part of cloned pictures */
    .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;
    }
 
    /* On hover scale the image */
    .clone:hover img {
        transform: scale(1.1);
    }
 
    /* Styles of cloned pictures,
     position them using the left property,
     so that they make up a single image */
    .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;
    }

And add a bit of JS so that it all works as we need. Do not forget to connect the jQuery library.

	// Run after page load
	$(window).on('load', function(){ 
        // Run the animation lines
        $( '.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(); // Browser width
        if( $( '.img-thumb img' ).width() &gt;= pageWidth ){ // If the width of the picture is larger than the width of the browser window we run the animation
            setTimeout( function () { // Start the animation of the images a second after loading the page
                // We clone the source image into containers with an increase in width by 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);
        }
    });
 
    // When resizing the browser, calculate the new width of the window and resize the cloned images
    $( 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 );
    });

That’s all, below I will give the full code of the received page.

<html>
<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;
    }
    .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%;
    }
    .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);
    }
    .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 () {
 
                    $( '.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>
Demo
You block advertising

Please disable ad blocker

Read more
Читай еще
Comments (0)
Leave a Reply

Your email address will not be published. Required fields are marked *