Orang suka melihat gambar & grafik dan efek slider adalah salah satu cara terbaik untuk menampilkan ini di situs web. Sebagai seorang desainer, Anda selalu mencari kode penggeser gambar jQuery/JavaScript di google dan mengintegrasikannya dengan desain Anda. Juga sebagian besar desainer berpikir bahwa akan sulit untuk membuat sendiri kode penggeser gambar khusus. Tetapi tidak terlalu sulit jika Anda ingin membuat slider khusus dengan JavaScript
Di sini, di artikel ini saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat efek penggeser khusus untuk gambar dengan menggunakan JavaScript dengan HTML & CSS. Anda harus memiliki pemahaman dasar tentang HTML, CSS & JavaScript dan bagaimana JavaScript berinteraksi dengan objek dom HTML
Pada awalnya kita akan membuat node elemen HTML yang sangat sederhana
Slide 1
Slide 1
Slide 1
Ini menciptakan area kode tayangan slide. Sekarang kita dapat menulis beberapa kode CSS dasar untuk peragaan slide ini
kami dapat membuat Kode JS untuk aplikasi ini. Di sini kami menulis Kode JS untuk ditambahkan
- sembunyikan status untuk elemen slide HTML
- tampilkan pengaturan status untuk HTML satu slide setelah disembunyikan
Kode JavaScript Untuk ini
var sliderId = "slider"; var count = document.getElementById(sliderId).childElementCount; function hideAll(){ for(var i = 1; i<=count;i++){ var id = 'slide'+i; var slide = document.getElementById(sliderId).children[i-1]; slide.className = 'hide'; } } function show(no,name,duretion){ hideAll(); var slide = document.getElementById(sliderId).children[no-1]; slide.className = 'show'; slide.style.animationName = name; slide.style.animationDuration = duretion; } show();Setelah kode ini Jika Anda dapat menggunakan kode untuk animasi
var current = 1; var time = 5; var effect = 'show'; var effectTime = '1s'; // First Time Init show(current,effect,effectTime); // Auto Slide Mode setInterval(function auto(){ if(current>=count){ current = 1; }else{ current++; } show(current,effect,effectTime); },(1000*time));Melalui kode ini Anda dapat membuat tayangan slide otomatis dengan durasi 5 detik. sintaks setInterval dapat membuat pemanggilan fungsi animasi. Sintaks ini memberikan aktivitas pemanggilan fungsi berulang kali dan juga dapat mengatur beberapa waktu tunda yang dapat kita gunakan di sini misalnya. setInterval(fungsi(){. },1000);
Tetapi ketika kita menggunakan beberapa efek khusus di slider kita, maka kita perlu membuat beberapa kode CSS untuk gaya dan animasi
@keyframes show{ 0%{ opacity: 0.0; } 100%{ opacity: 1.0; } } @keyframes shake { 0% { position: absolute; background-color: black; color: white; left: 0px; } 25%{ background-color: black; color: white; left: -300px; } 50% { background-color:white; color: black; left: 300px; } 100% { background-color: black; color: wheat; left: 0px; } } @keyframes zoom { 0%{ background-color: black; color: white; left: 145px; top: 45px; width: 0px; height: 0px; font-size: 9pt; overflow: hidden; } 50%{ background-color: white; color: black; left: 0px; top: 0px; width: 300px; height: 150px; font-size: 20pt; overflow: hidden; } 100%{ background-color: black; color: wheat; left: 0px; } } @keyframes flip{ 0%{ background-color: black; color: black; opacity: 1.0; overflow: hidden; } 50%{ background-color: white; color: white; opacity: 1.0; width: 1px; left: 150px; overflow: hidden; } 100%{ opacity: 1.0; background-color: black; } }_Kode ini membuat Slideshow Interaktif Anda. Ini adalah konsep utama Slideshow menggunakan HTML, CSS dan JavaScript tanpa menggunakan jQuery
Ada sejumlah cara untuk mengimplementasikan tata letak layar penuh animasi dengan banyak interaksi manusia, dan banyak pengembang akan menggunakan plugin JavaScript untuk menghemat waktu. Dalam artikel ini, Toptal JavaScript Developer Stefan Vitasovic mendemonstrasikan bagaimana Anda dapat melakukannya hanya dengan menggunakan CSS dan JavaScript, tanpa menyertakan library atau plugin yang membengkak di project Anda
Membagikan
Ada sejumlah cara untuk mengimplementasikan tata letak layar penuh animasi dengan banyak interaksi manusia, dan banyak pengembang akan menggunakan plugin JavaScript untuk menghemat waktu. Dalam artikel ini, Toptal JavaScript Developer Stefan Vitasovic mendemonstrasikan bagaimana Anda dapat melakukannya hanya dengan menggunakan CSS dan JavaScript, tanpa menyertakan library atau plugin yang membengkak di project Anda
Oleh Stefan Vitasovic
Pakar Terverifikasi di bidang Teknik
Stefan adalah insinyur front-end yang terinspirasi oleh tata letak interaktif yang modern. Dia telah mengerjakan ratusan proyek, dengan fokus pada UI dan UX kelas atas