Cara Membuat Animasi Slide Show dengan CSS3

Cara Membuat Animasi Slide Show dengan CSS3 - STK BLOGS

Hallo semua kali ini saya ingin berbagi artikel tentang Cara Membuat Animasi Slide Show dengan CSS3. Pada pembuatan animasi slideshow kali ini saya tidak akan menggunakan javascript ataupun jQuery,

Dibawah ini beberapa langahkah yang harus kalian lakukan untuk pembuatan animasi slide show.

Membuat Kerangka HTML

Untuk langkah pertama ini kita akan membuat kerangka HTML, di proses pertama ini sangat penting jadi HTML adalah inti dasar dari aplikasi web, jadi kalian yang ingin belajar dalam bahasa pemograman saya saranin untuk memperkuat ilmu HTML kalian karena HTML ini sangat penting untuk pembuatan website. Oke untuk membuat kerangka Slide Show kalian bisa membuat sesuka kalian dan disini saya akan memberi contoh untuk pembuatan kerangka HTML dibawah ini:

Source Code :

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="slider">
<div class="view_slider">
<div class="slide_1">Slide 1</div>
<div class="slide_1">Slide 2</div>
<div class="slide_1">Slide 3</div>
<div class="slide_1">Slide 4</div>
</div>
</div>
</body>
</html>

Membuat Animasi Slide Show dengan CSS

Untuk proses ke dua ini kita akan membuat CSS nya untuk menjalankan Animasi Slide Show nya, dan kalian bisa mendesign sesuai keinginan dan kesukaan kalian, Untuk di proses kedua ini kita wajib untuk bisa CSS karena dalam pembuatan website kita di haruskan bisa menggunakan CSS untuk mendesign tampilan website kalian dan mempercantik website kalian dengan CSS. Oke di bawah sini contoh CSS yang akan berfunsi sebagai pembuatan Slide Show dan kalian bisa merubahnya sesuai keinginan kalian.

Source Code :

*{
margin: 0px;
padding: 0px;
}

.slider {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}

.slider .view_slider {
width: 400%;
height: 600px;
display:flex;
align-items: center;
justify-content:center;
position: absolute;
animation-name: slider;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}

.slider .view_slider .slide_1 {
width: 25%;
height: 600px;
text-align: center;
background: #f0f;
}

@keyframes slider {
0% {left: 0; opacity: 1}
2% {left: 0; opacity: 1}
10% {left: 0; opacity: 1}
25% {left: -100%; opacity: 1}
26% {left: -100%; opacity: 1}
40% {left:-100%; opacity: 1}
45% {opacity: 1}
50% {left: -200%; opacity: 1}
60% {left: -200%; opacity: 1}
70% {left: -200%; opacity: 1}
72% {opacity: 1}
75% {left: -300%; opacity: 1}
90% {left: -300%; opacity: 1}
99% {left: -300%; opacity: 1}
100% {left: 0; opacity: 0}
}

Jika setelah selesai semua silahkan kalian bisa jalankan source code ini pada browser. Nah itulah beberapa langkah cara membuat animasi slide show dengan menggunakan CSS3, Semoga artikel ini bisa membantu anda dalam pembuatan animasi slide show, Terima kasih sudah berkunjung dan jangan lupa baca artikel lainnya.

Cara Membuat Animasi Slide Show dengan CSS3 - STK BLOGS