Membuat Slideshow Konten Miring

Sebuah tutorial tentang cara membuat slide terlihat pada halaman arahan FWA dengan efek 3D yang melibatkan animasi acak.

Halaman arahan FWA memiliki slider konten yang benar-benar baik bermain dengan perspektif 3D pada screenshot dan menjiwai mereka dengan cara yang menarik. Hari ini kami ingin menciptakan bagian dari efek itu dan membuat slideshow konten yang sederhana dengan beberapa animasi 3D mewah. Slide tidak akan sama dengan yang ada di halaman FWA: item tidak akan "mengambang" atau bergerak di hover dan kita hanya akan memiliki navigasi sederhana.

Jika Anda telah melihat efek lebih pada halaman arahan FWA Anda akan melihat bahwa arah pergerakan screenshot yang acak (bergerak naik atau turun dan meluncur ke sisi). Kami ingin mencapai efek yang sama secara acak menambahkan beberapa data-atribut yang mengontrol jenis animasi.

Harap dicatat bahwa kami akan menggunakan CSS 3D Mentransformasi dan CSS Animasi yang mungkin tidak bekerja di lebih tua atau mobile browser.

The Markup

Slideshow ini memiliki wadah utama dengan kelas dan ID "slide" dan kita dapat menggunakan daftar memerintahkan untuk slide kami. Setiap item daftar berisi deskripsi dengan judul dan paragraf. Hal ini juga akan berisi sebuah divisi dengan kelas "tiltview" di mana kita akan menambahkan screenshot kami. Kelas "col" an "row" akan membantu kita mengatur tata letak tepat untuk jangkar dalam:

<div class="slideshow" id="slideshow">

    <ol class="slides">

        <li class="current">

            <div class="description">

                <h2>Some Title</h2>

                <p>Some description</p>

            </div>

            <div class="tiltview col">

                <a href="http://grovemade.com/"><img src="img/1_screen.jpg"/></a>

                <a href="https://tsovet.com/"><img src="img/2_screen.jpg"/></a>

            </div>

        </li>

        <li>

            <div class="description">

                <!-- ... -->

            </div>

            <div class="tiltview row">

                <!-- ... -->

            </div>

        </li>

        <li>

            <!-- ... -->

        </li>

    </ol>

</div>




Kami juga akan menambahkan elemen navigasi dalam JavaScript yang kami kami akan menempatkan tepat setelah daftar memerintahkan. Ini akan terdiri dari nav dengan jumlah yang tepat dari rentang.

Mari kita telah memiliki pemikiran tentang bagaimana kita akan mengontrol animasi untuk setiap screenshot. Dalam naskah kami menetapkan data atribut untuk masuk dan keluar animasi acak. Kami akan menggunakan data-data yang atribut-efek-in dan data-efek-out untuk mengontrol animasi kami dalam CSS. Kami akan memeriksa nilai-nilai untuk atribut-atribut sementara. 

Mari kita cek pertama dari gaya utama slideshow.

The CSS

Perhatikan bahwa CSS tidak akan mengandung awalan penjual, tetapi Anda akan menemukan mereka dalam file (-webkit-).

Slideshow kami wrapper dan daftar memerintahkan akan memiliki gaya berikut:

.slideshow {

    position: relative;

    margin-bottom: 100px;

}

.slides {

    list-style: none;

    padding: 0;

    margin: 0;

    position: relative;

    height: 500px;

    width: 100%;

    overflow: hidden;

    background: #ddd;

    color: #333;

}




Slide akan 500px tinggi dan kita perlu mengatur meluap ke tersembunyi, sehingga kita tidak melihat item terbang keluar.
Ketika kita tidak bisa membangun slideshow kita karena JavaScript tidak diaktifkan, kita perlu memastikan bahwa semua slide yang ditampilkan, jadi kami mengatur ketinggian ke auto:

.no-js .slides {

    height: auto;

}

Setiap item daftar akan diposisikan benar-benar dan menempati semua lebar dan tinggi yang tersedia. Secara default, kami akan menetapkan visibilitas ke Hidden.

Setiap slide

juga akan berfungsi sebagai wadah perspektif dan kita akan menentukan nilai perspektif 1600px:

.slides > li {

    width: 100%;

    height: 100%;

    position: absolute;

    visibility: hidden;

    perspective: 1600px;

}

Jangan lupa fallback:

.no-js .slides > li {

    position: relative;

    visibility: visible;

}




Navigasi yang ditambahkan secara dinamis, akan muncul sebagai satu set garis. Setiap item navigasi adalah rentang dan meskipun kita menggunakan garis kecil, kami ingin memastikan bahwa daerah yang dapat diklik sebenarnya lebih besar. Ini kita dapat mensimulasikan dengan menambahkan border putih:

.slideshow > nav {

    text-align: center;

    margin-top: 20px;

}

.slideshow > nav span {

    display: inline-block;

    width: 60px;

    height: 25px;

    border-top: 10px solid #fff;

    border-bottom: 10px solid #fff;

    background-color: #ddd;

    cursor: pointer;

    margin: 0 3px;

    transition: background-color 0.2s;

}

.slideshow > nav span:hover {

    background-color: #333;

}

.slideshow > nav span.current {

    background-color: #aaa;

}

Deskripsi akan mengisi setengah dari lebar dan karena kita ingin transisi pada opacity, kita perlu set ke 0 awalnya:

.description {

    width: 50%;

    padding: 2em 4em;

    font-size: 1.5em;

    position: relative;

    z-index: 1000;

    opacity: 0;

}

.no-js .description {

    opacity: 1;

}

.description h2 {

    font-size: 200%;

}

Sekarang, mari kita gaya elemen yang paling penting dalam slideshow kita. Pembagian dengan kelas "tiltview" akan membantu kami menempatkan barang-barang kami ke dalam perspektif. Kita perlu menambahkan preserve-3d seperti mengubah gaya karena beberapa item batin akan perlu untuk bergerak pada sumbu Z dalam beberapa animasi.

The "tiltview" wrapper akan dipusatkan dengan menetapkan atas ke 50% dan mengubahnya -50% pada Y-axis. Kami juga akan memutar pada X dan Z-axis untuk menciptakan tampilan 3D:

.tiltview {

    position: absolute;

    left: 50%;

    width: 50%;

    top: 50%;

    transform-style: preserve-3d;

    transform: translateY(-50%) rotateX(60deg) rotateZ(35deg);

}

Dan jangkar dan gambar akan memiliki gaya berikut (garis besar membantu untuk menghindari tepi bergerigi di Firefox):

.tiltview a {

    outline: 1px solid transparent;

    backface-visibility: hidden;

}

.tiltview a,

.tiltview a img {

    max-width: 100%;

    display: block;

    margin: 0 auto;

}

.tiltview a:first-child {

    margin-bottom: 30px;

}

Untuk baris dan kolom kasus kita akan mengatur lebar sesuai:

.tiltview.row a {

    width: 48%;

    width: calc(50% - 15px);

    margin: 0;

}

.tiltview.row a:nth-child(2) {

    left: 50%;

    left: calc(50% + 15px);

    position: absolute;

    top: 0;

}

Dalam naskah kita akan menggunakan kelas "show" dan "hide" untuk mengontrol visibilitas slide:

/* Show/Hide */

.slides > li.current,

.slides > li.show {

    visibility: visible;

}

Deskripsi akan memudar dalam dan keluar:

.description {

    transition: opacity 0.75s;

}

.current .description,

.show .description {

    opacity: 1;

}

.hide .description {

    opacity: 0;

}

Seperti yang telah disebutkan sebelumnya, kita akan mengontrol animasi dengan menggunakan beberapa data-atribut. Kita harus mendefinisikan dua jenis animasi: yang masuk (ketika kita menunjukkan slide berikutnya) dan yang keluar (ketika kita menyembunyikan slide sebelumnya).
Kami ingin dapat menghidupkan item dalam segala arah yang mungkin, jadi kita akan membutuhkan enam jenis: bergerak ke atas, bergerak ke bawah, geser ke atas, geser ke bawah, geser kiri, geser kanan. Hal ini membuat total 12 animasi (masuk dan keluar).

Jadi, mari kita mendefinisikan yang pertama untuk memindahkan elemen keluar up:

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

/* Move up */

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

.hide[data-effect-out="moveUpOut"] .tiltview a {

    animation: moveUpOut 1.5s both;

}

.hide[data-effect-out="moveUpOut"] .tiltview a:nth-child(2) {

    animation-delay: 0.25s;

}

@keyframes moveUpOut {

    25% {

        animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);

        transform: translateZ(-30px);

    }

    100% {

        transform: translateZ(3000px);

    }

}

Kami mendefinisikan penundaan animasi sedikit untuk item kedua dan kami menggunakan kustom kubik-bezier fungsi waktu untuk menambahkan beberapa momentum yang menarik.

Animasi kedua untuk gerakan ini adalah yang masuk yang memiliki langkah awal dan akhir dibalik:

.show[data-effect-in="moveUpIn"] .tiltview a {

    animation: moveUpIn 1.5s 0.5s both;

}

.show[data-effect-in="moveUpIn"] .tiltview a:nth-child(2) {

    animation-delay: 0.75s;

}

@keyframes moveUpIn {

    0% {

        animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);

        transform: translateZ(-3000px);

    }

    75% {

        transform: translateZ(30px);

    }

    100% {

        transform: translateZ(0);

    }

}




Seperti Anda mungkin telah menyadari, kita bisa menyederhanakan delay animasi untuk kasus "hide" dan "show", tetapi menjaga dua aturan terpisah akan memungkinkan untuk adaptasi lebih mudah jika anda ingin mendefinisikan beberapa penundaan yang berbeda.


Browse More Articles

Tweet

Written by Unknown

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.