SlideShow / Slider Dengan Layar Khusus

Beberapa saat yang lalu, Franklin Ta menulis sebuah artikel dan membuat naskah yang sangat berguna untuk mengubah elemen dalam 3D agar sesuai dengan mockup perspektif. Dalam artikelnya, ia menjelaskan bagaimana script pembantu dapat digunakan untuk membuat transformasi matriks 3D untuk menyisipkan iframe ke dalam gambar mockup. Kami berpikir bahwa itu harus benar-benar menarik untuk menambahkan tayangan slide agar bisa menampilkan karya.
Jadi, kami telah menggunakan skrip Franklin untuk menciptakan elemen yang berubah dan menambahkan tayangan slide di dalamnya. Agar semuanya responsif (transformasi didasarkan pada piksel), kami mengukur mockup utama agar sesuai dengan wadah induknya. Hal yang menyenangkan dengan menggunakan transformasi matriks 3D adalah bahwa kita dapat menggunakan ukuran "sebenarnya" untuk gambar dalam tayangan slide (yaitu berdasarkan perangkat yang kita tampilkan). Pergilah ke artikel Franklin untuk mengetahui bagaimana naskahnya bekerja secara rinci dan untuk memahami Matematika yang menarik di baliknya.
Berikut beberapa Screenshot dari Slider ini, Slide terdapat pada layar laptop atau hp:

Singkatnya, script dapat dieksekusi dengan menggunakan konsol alat dev anda. Sudut elemen yang dipilih kemudian dapat diseret ke posisi dan nilai transformasi dapat disalin (jika Anda memeriksa elemen Anda, Anda akan melihat nilainya) dan menempelkannya ke masing-masing elemen layar.
Berikut adalah contoh bagaimana kami menambahkan transformasi ke salah satu layar mockup kami (demo 1):

.mobile {
 overflow: hidden;
 position: absolute;
 z-index: 100;
 background: #333;
 width: 320px;
 height: 480px;
 top: 200px;
 left: 500px;
 outline: 1px solid transparent; /* For Firefox (jagged edges bug) */
 transform-origin: 0 0 0;
 transform: matrix3d(0.846234173238242, 0.251585817964749, 0, 0.000085171934399447, -0.115203182108559, 0.800700357116676, 0, -0.000214263459947427, 0, 0, 1, 0, 23, 14, 0, 1);
}

Jangan lupa tambahkan awalan -webkit untuk dukungan di Safari, iOS Safari dan browser Android.
Plugin slideshow sederhana menggunakan animasi CSS untuk menampilkan dan menyembunyikan slide. Kami telah menggunakan beberapa animasi khusus, namun Anda bisa memasukkan animasi apa pun dari anime.css Daniel Eden.
Gaya untuk tayangan slide adalah sebagai berikut:

.slideshow {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
 list-style-type: none;
}

.slideshow__item {
 width: 100%;
 height: 100%;
 position: absolute;
 overflow: hidden;
 pointer-events: none;
 z-index: 1;
 transform: translate3d(-100%, 0, 0);
}

.slideshow__item.current{
 pointer-events: auto;
 z-index: 100;
 transform: translate3d(0, 0, 0);
}

.slideshow img {
 width: 100%;
}

Kami "menyembunyikan" slide dengan menerjemahkannya ke kiri (alih-alih menggunakan opacity, misalnya). Item saat ini akan mendapatkan kelas "current".
Contoh untuk kelas animasi adalah sebagai berikut (demo 2):

.slideshow__item.in--next {
 animation: inNext 0.5s forwards;
}

.slideshow__item.out--next {
 animation: outNext 0.5s forwards;
}

.slideshow__item.in--prev {
 animation: inPrev 0.5s forwards;
}

.slideshow__item.out--prev {
 animation: outPrev 0.5s forwards;
}

@keyframes inPrev {
 0% {
  transform: translate3d(0, 100%, 0);
 }
 100% {
  transform: none;
 }
}

@keyframes inNext {
 0% {
  transform: scale3d(0.5, 0.5, 1);
 }
 100% {
  transform: none;
 }
}

@keyframes outPrev {
 100% {
  transform: scale3d(0.5, 0.5, 1);
 }
}

@keyframes outNext {
 100% {
  transform: translate3d(0, 100%, 0);
 }
}

Lihat  Unduh

Password: www.duniadesain.net

Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)

Dalam contoh terakhir ini, kita memiliki dua tayangan slide yang berjalan pada waktu yang berbeda. Ini mungkin ide yang menarik untuk menampilkan karya responsif.
Kami harap Anda menyukai gagasan kecil ini dan merasa berguna!
Source: Tympanus