Membuat Transisi Pada SlideShow

Hari ini kami ingin menunjukkan kepada Anda cara membuat efek transisi yang menarik namun sederhana dengan menggunakan Masker CSS. Bersama dengan kliping, masking adalah cara lain untuk menentukan visibilitas dan komposit dengan elemen. Dalam tutorial berikut, kami akan menunjukkan cara menerapkan properti baru untuk efek transisi modern pada tayangan slide sederhana. Kami akan menerapkan animasi dengan memanfaatkan langkah-langkah () fungsi timing dan memindahkan mask mask ke atas gambar untuk mencapai efek transisi yang menarik.

Markup
Untuk demo kami, kami akan membuat slideshow sederhana untuk menampilkan efek topeng. Tayangan kami akan mengisi keseluruhan layar dan kami akan menambahkan beberapa panah yang akan memicu transisi slide. Idenya adalah untuk memperbesar slide dan kemudian mengubah indeks-z dari slide yang masuk saat animasi selesai. Struktur untuk tayangan slide kami terlihat seperti berikut:

<div class="page-view">
 <div class="project">
  <div class="text">
   <h1>“All good things are <br> wild & free”</h1>
   <p>Photo by Andreas Rønningen</p>
  </div>
 </div>
 <div class="project">
  <div class="text">
   <h1>“Into the wild”</h1>
   <p>Photo by John Price</p>
  </div>
 </div>
 <div class="project">
  <div class="text">
   <h1>“Is spring coming?”</h1>
   <p>Photo by Thomas Lefebvre</p>
  </div>
 </div>
 <div class="project">
  <div class="text">
   <h1>“Stay curious”</h1>
   <p>Photo by Maria</p>
  </div>
 </div>
 <nav class="arrows">
  <div class="arrow previous">
   <svg viewBox="208.3 352 4.2 6.4">
    <polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/>
   </svg>
  </div>
  <div class="arrow next">
   <svg viewBox="208.3 352 4.2 6.4">
    <polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/>
   </svg>
  </div>
 </nav>
</div>

Tampilan halaman divisi adalah wadah global kami, ini berisi semua slide kami. Divisi proyek adalah slide dari slideshow kami; masing-masing berisi judul dan legenda. Selain itu, kami akan menetapkan gambar latar belakang individual untuk setiap slide.
Panah akan berfungsi sebagai pemicu animasi berikutnya atau sebelumnya, dan untuk menavigasi slide.
Mari kita lihat gayanya.

CSS
Pada bagian ini kita akan mendefinisikan CSS untuk efek kita.
Kami akan menyiapkan tata letak untuk slider fullscreen klasik, dengan beberapa judul terpusat dan navigasi di kiri bawah halaman. Selain itu, kami akan menentukan beberapa kueri media untuk menyesuaikan gaya perangkat seluler.
Selanjutnya, kami akan menetapkan gambar sprite kami sebagai latar belakang tak terlihat pada wadah global kami sehingga kami memulainya saat loading saat kami membuka halaman:

.demo-1 {
 background: url(../img/nature-sprite.png) no-repeat -9999px -9999px;
 background-size: 0;
}

.demo-1 .page-view {
 background: url(../img/nature-sprite-2.png) no-repeat -9999px -9999px;
 background-size: 0;
}

Setiap slide akan memiliki background-image yang berbeda:

.demo-1 .page-view .project:nth-child(1) {
 background-image: url(../img/nature-1.jpg);
}

.demo-1 .page-view .project:nth-child(2) {
 background-image: url(../img/nature-2.jpg);
}

.demo-1 .page-view .project:nth-child(3) {
 background-image: url(../img/nature-3.jpg);
}

.demo-1 .page-view .project:nth-child(4) {
 background-image: url(../img/nature-4.jpg);
}

Ini tentu saja akan menjadi sesuatu yang akan Anda implementasikan secara dinamis namun kami tertarik pada efeknya, jadi mari kita tetap sederhana.
Kita mendefinisikan sebuah kelas bernama hide yang akan kita tambahkan ke slide kapanpun kita ingin menyembunyikannya. Definisi kelas berisi sprite kita yang diaplikasikan sebagai topeng.
Mengetahui bahwa frame adalah 100% dari layar dan animasi kita berisi 23 gambar, kita perlu mengatur lebar menjadi 23 * 100% = 2300%.
Sekarang kita tambahkan animasi CSS kita dengan memanfaatkan langkah-langkahnya. Kami ingin sprite kami berhenti di awal frame terakhir kami. Oleh karena itu, untuk mencapai hal ini, kita perlu menghitung satu langkah kurang dari total, yaitu 22 langkah:

.demo-1 .page-view .project:nth-child(even).hide {
 -webkit-mask: url(../img/nature-sprite.png);
 mask: url(../img/nature-sprite.png);
 -webkit-mask-size: 2300% 100%;
 mask-size: 2300% 100%;
 -webkit-animation: mask-play 1.4s steps(22) forwards;
 animation: mask-play 1.4s steps(22) forwards;
}

.demo-1 .page-view .project:nth-child(odd).hide {
 -webkit-mask: url(../img/nature-sprite-2.png);
 mask: url(../img/nature-sprite-2.png);
 -webkit-mask-size: 7100% 100%;
 mask-size: 7100% 100%;
 -webkit-animation: mask-play 1.4s steps(70) forwards;
 animation: mask-play 1.4s steps(70) forwards;
}

Akhirnya, kita mendefinisikan keyframes animasi:

@-webkit-keyframes mask-play {
  from {
 -webkit-mask-position: 0% 0;
 mask-position: 0% 0;
  }
  to {
 -webkit-mask-position: 100% 0;
 mask-position: 100% 0;
  }
}

@keyframes mask-play {
  from {
 -webkit-mask-position: 0% 0;
 mask-position: 0% 0;
  }
  to {
 -webkit-mask-position: 100% 0;
 mask-position: 100% 0;
  }
}

Dan inilah kita pergi; Kami sekarang memiliki slideshow terstruktur dan bergaya. Mari kita ubah menjadi sesuatu yang fungsional!

JavaScript
Kami akan menggunakan zepto.js untuk demo ini yang merupakan kerangka JavaScript yang sangat ringan yang mirip dengan jQuery.
Kita mulai dengan mendeklarasikan semua variabel kita, menetapkan jangka waktu dan elemennya.
Kemudian kita menginisialisasi kejadian, mendapatkan arus dan slide berikutnya, mengatur z-index yang benar:

function Slider() {
 // Durations
 this.durations = {
  auto: 5000,
  slide: 1400
 };
 // DOM
 this.dom = {
  wrapper: null,
  container: null,
  project: null,
  current: null,
  next: null,
  arrow: null
 };
 // Misc stuff
 this.length = 0;
 this.current = 0;
 this.next = 0;
 this.isAuto = true;
 this.working = false;
 this.dom.wrapper = $('.page-view');
 this.dom.project = this.dom.wrapper.find('.project');
 this.dom.arrow = this.dom.wrapper.find('.arrow');
 this.length = this.dom.project.length;
 this.init();
 this.events();
 this.auto = setInterval(this.updateNext.bind(this), this.durations.auto);
}
/**
 * Set initial z-indexes & get current project
 */
Slider.prototype.init = function () {
 this.dom.project.css('z-index', 10);
 this.dom.current = $(this.dom.project[this.current]);
 this.dom.next = $(this.dom.project[this.current + 1]);
 this.dom.current.css('z-index', 30);
 this.dom.next.css('z-index', 20);
};

Kami mendengarkan acara klik pada anak panah, dan jika tayangan slide saat ini tidak terlibat dalam animasi, kami akan memeriksa apakah klik itu ada pada panah berikutnya atau sebelumnya. Seperti itu kita menyesuaikan nilai variabel "next" dan kita lanjutkan untuk mengganti slide:

/**
 * Initialize events
 */
Slider.prototype.events = function () {
 var self = this;
 this.dom.arrow.on('click', function () {
  if (self.working)
   return;
  self.processBtn($(this));
 });
};
Slider.prototype.processBtn = function (btn) {
 if (this.isAuto) {
  this.isAuto = false;
  clearInterval(this.auto);
 }
 if (btn.hasClass('next'))
  this.updateNext();
 if (btn.hasClass('previous'))
  this.updatePrevious();
};
/**
 * Update next global index
 */
Slider.prototype.updateNext = function () {
 this.next = (this.current + 1) % this.length;
 this.process();
};
/**
 * Update next global index
 */
Slider.prototype.updatePrevious = function () {
 this.next--;
 if (this.next < 0)
  this.next = this.length - 1;
 this.process();
};

Fungsi ini adalah jantung dari slideshow kita: kita mengatur kelas "hide" ke slide saat ini dan begitu animasi selesai, kita mengurangi indeks-z dari slide sebelumnya, meningkatkan salah satu slide saat ini dan kemudian menghapus hide kelas slide sebelumnya:

/**
 * Process, calculate and switch between slides
 */
Slider.prototype.process = function () {
 var self = this;
 this.working = true;
 this.dom.next = $(this.dom.project[this.next]);
 this.dom.current.css('z-index', 30);
 self.dom.next.css('z-index', 20);
 // Hide current
 this.dom.current.addClass('hide');
 setTimeout(function () {
  self.dom.current.css('z-index', 10);
  self.dom.next.css('z-index', 30);
  self.dom.current.removeClass('hide');
  self.dom.current = self.dom.next;
  self.current = self.next;
  self.working = false;
 }, this.durations.slide);
};

Menambahkan kelas masing-masing akan memicu animasi kita yang pada gilirannya menerapkan gambar topeng ke slide kita. Ide utamanya adalah memindahkan masker dalam fungsi animasi langkah demi terciptanya arus transisi.

Lihat Unduh

Password: www.duniadesain.net

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

Dan itu dia! Saya harap Anda menemukan tutorial ini bermanfaat dan bersenang-senang menciptakan efek topeng keren Anda sendiri! Jangan ragu untuk membagikan ciptaan Anda, saya ingin melihatnya!
Source: Tympanus