Cara membuat Tampilan Gambar Bergerak Seperti Sponsor TV HTML,CSS,JS

Cara membuat Tampilan Gambar Bergerak Seperti Sponsor TV HTML,CSS,JS

Konten [Tampil]

 

Cara membuat Tampilan Gambar Bergerak Seperti Sponsor TV HTML,CSS,JS


Tampilan website yang unik dan menarik sangat manrik pengunjung untuk mempir ke website kita nah maka dari itu kali iki Poil akan membuat tampilan gambar bergerak seperti sponsor TV.

Yang pertama yang harus kita lakukan adalah membuat rangkaian tubuh HTML dengan cara simpan file lalu ketik ‘!’ dan enter maka akan otomatis mambuat rangkain tubuh HMTL seperti di bawah ini

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    

</body>

</html>

Lanjut karena saya akan membuat tampilan gambar bergerak di Body maka kita akan masuk ke body

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>E Store - eCommerce HTML Template</title>

        <meta content="width=device-width, initial-scale=1.0" name="viewport">

        <meta content="eCommerce HTML Template Free Download" name="keywords">

        <meta content="eCommerce HTML Template Free Download" name="description">

 

        <!-- Favicon -->

        <link href="img/favicon.ico" rel="icon">

 

        <!-- Google Fonts -->

        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Source+Code+Pro:700,900&display=swap" rel="stylesheet">

 

        <!-- CSS Libraries -->

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

        <link href="lib/slick/slick.css" rel="stylesheet">

        <link href="lib/slick/slick-theme.css" rel="stylesheet">

 

        <!-- Template Stylesheet -->

        <link href="css/style.css" rel="stylesheet">

    </head>

 

    <body>

          

        

        <!-- Brand Start -->

        <div class="brand">

            <div class="container-fluid">

                <div class="brand-slider">

                    <div class="brand-item"><img src="img/brand-1.png" alt=""></div>

                    <div class="brand-item"><img src="img/brand-2.png" alt=""></div>

                    <div class="brand-item"><img src="img/brand-3.png" alt=""></div>

                    <div class="brand-item"><img src="img/brand-4.png" alt=""></div>

                    <div class="brand-item"><img src="img/brand-5.png" alt=""></div>

                    <div class="brand-item"><img src="img/brand-6.png" alt=""></div>

                </div>

            </div>

        </div>

        <!-- Brand End -->      

        

           

        

        <!-- Back to Top -->

        <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

        

        <!-- JavaScript Libraries -->

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

        <script src="lib/easing/easing.min.js"></script>

        <script src="lib/slick/slick.min.js"></script>

        

        <!-- Template Javascript -->

        <script src="js/main.js"></script>

    </body>

</html>

 

 

Nah jika sudah maka selanjutkan adalah membuat CSS atau Style-nya

 

/**********************************/

/*********** Brand CSS ************/

/**********************************/

.brand {

    position: relative;

    margin-bottom: 30px;

    padding: 30px 0;

    background: #ffffff;

}

 

.brand .brand-item {

    text-align: center;

}

 

.brand .brand-item img {

    max-width: 100%;

    margin: auto;

}

 

.brand .slick-prev,

.brand .slick-next {

    width: 40px;

    height: 40px;

    z-index: 1;

    opacity: 0;

    transition: .5s;

    background: #FF6F61;

    border-radius: 4px;

}

 

.brand .slick-prev {

    left: 55px;

}

 

.brand .slick-next {

    right: 55px;

}

 

.brand .slick-slider:hover .slick-prev {

    left: 15px;

    opacity: 1;

}

 

.brand .slick-slider:hover .slick-next {

    right: 15px;

    opacity: 1;

}

 

.brand .slick-prev:hover,

.brand .slick-prev:focus,

.brand .slick-next:hover,

.brand .slick-next:focus {

    background: #000000;

}

 

.brand .slick-prev:hover::before,

.brand .slick-prev:focus::before,

.brand .slick-next:hover::before,

.brand .slick-next:focus::before {

    color: #FF6F61;

}

 

.brand .slick-prev::before,

.brand .slick-next::before {

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    font-size: 30px;

    color: #000000;

}

 

.brand .slick-prev::before {

    content: "\f104";

}

 

.brand .slick-next::before {

    content: "\f105";

}

Maka hasilnya nanti akan seperti ini 

Cara membuat Tampilan Gambar Bergerak Seperti Sponsor TV HTML,CSS,JS

Nah gimana sobat Poil Mudah bukan membuat Tampilan Gambar Bergerak Seperti Sponsor TV

Semoga membantu ingat untuk menggerkan kita butuh JS maka dari itu jangan lupa untuk menambahkannya  

0 Comments