Berkongsi kod sumber kesan perbezaan visual berdasarkan JQuery dan CSS3 untuk meniru poster Apple TV background_jquery

Kesannya ditunjukkan di bawah:

Lihat demo Muat turun kod sumber

Struktur HTML

Apple TV ialah produk set-top box TV definisi tinggi yang dilancarkan oleh Apple selepas Airport Express. Jika anda pernah menggunakannya, anda pasti akan tertarik dengan kesan visual poster filem yang menarik.

Struktur HTML bagi kesan perbezaan visual ini menggunakan dc6dce4a544fdca2df29d5ac0ea9906b sebagai bekas, dan setiap dc6dce4a544fdca2df29d5ac0ea9906b di dalamnya ialah "lapisan".

<div class="poster">
 <div class="shine"></div>
 <div class="layer-1"></div>
 <div class="layer-2"></div>
 <div class="layer-3"></div>
 <div class="layer-4"></div>
 <div class="layer-5"></div>
</div>
<div.shine>是用于制作流光效果的图层。

Gaya CSS

Untuk elemen .poster yang dibalut menghasilkan kesan putaran 3D, elemen induknya perlu menetapkan perspektif dan gaya transformasi.

body {
 background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%);
 transform-style: preserve-3d;
 transform: perspective(800px);
}

Saiz poster di sini ditetapkan kepada 320x500 piksel tetap, berpusat berbanding halaman, memberikan kesan sudut bulat dan beberapa kesan bayangan.

.poster {
 width: 320px;
 height: 500px;
 position: absolute;
 top: 50%; left: 50%;
 margin: -250px 0 0 -160px;
 border-radius: 5px;
 box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4);
 overflow:hidden;
}

Poster dipusatkan menggunakan kaedah penentududukan mutlak: kiri dan atas masing-masing adalah 50%, kemudian margin-kiri dan margin-atas ditetapkan kepada nilai lebar dan ketinggian negatif.

Semua "lapisan" dalam poster boleh dipilih melalui pemilih div[class*="layer-"]. Semua lapisan ditetapkan kepada kedudukan mutlak, imej latar belakang tidak diulang, kedudukan latar belakang ditetapkan ke sudut kiri atas, dan saiz latar belakang ditetapkan kepada 100% lebar dan ketinggian automatik.

div[class*="layer-"] {
 position: absolute;
 top: -10px;
 left: -10px;
 right: -10px; 
 bottom: -10px;
 background-size: 100% auto;
 background-repeat: no-repeat;
 background-position: 0 0;
 transition:0.1s;
}

Perhatikan bahawa nilai atribut atas, kiri, kanan dan bawah dalam kod di atas adalah -10 piksel. Ia digunakan untuk menjadikan dimensi lapisan 20 piksel lebih besar daripada dimensi poster. Sebabnya adalah untuk menyembunyikan tepi lapisan apabila mencipta kesan perbezaan visual.

Akhirnya tetapkan imej latar belakang untuk setiap lapisan.

.layer-1 {
 background-image: url('images/1.png');
}
.layer-2 {
 background-image: url('images/2.png');
}
.layer-3 {
 top: 0; bottom: 0;
 left: 0; right: 0;
 background-image: url('images/3.png');
}
.layer-4 {
 background-image: url('images/4.png');
}
.layer-5 {
 background-image: url('images/5.png');
}

JavaScript

Prinsip kesan perbezaan visual ini ialah setiap kali pengguna menggerakkan tetikus, sifat transformasi: translateY, rotate dan rotateY .poster akan berubah mengikut kedudukan tetikus. Semakin jauh tetikus dari sudut kiri atas, semakin banyak kawasan animasi akan kelihatan.

Formula pengiraan adalah serupa dengan offsetX = 0.5 – kedudukan tetikus / lebar tetingkap.

Untuk memberikan kelajuan animasi yang berbeza pada setiap lapisan, ia perlu didarab dengan nilai kelajuan animasi tersuai Nilai ini disediakan oleh data-offset="number" pada teg HTML.

<div data-offset="-2" class="layer-1"></div>
<div class="layer-2"></div>
<div data-offset="1" class="layer-3"></div>
<div data-offset="3" class="layer-4"></div>
<div data-offset="10" class="layer-5"></div>

Lebih besar nilai data-offset, lebih besar kawasan animasi yang boleh dilihat.

Kod JS untuk keseluruhan kesan perbezaan visual adalah seperti berikut:

var $poster = $('.poster'),
 $shine = $('.shine'),
 $layer = $('div[class*="layer-"]');
$(window).on('mousemove', function(e) {
 var w = $(window).width(), //窗口宽度
  h = $(window).height(), /窗口高度
  offsetX = 0.5 - e.pageX / w, //鼠标X坐标
  offsetY = 0.5 - e.pageY / h, //鼠标Y坐标
  dy = e.pageY - h / 2, //@h/2 = 海报容器中心
  dx = e.pageX - w / 2, //@w/2 = 海报容器中心
  theta = Math.atan2(dy, dx), //鼠标和海报中心的RAD角度
  angle = theta * 180 / Math.PI - 90, //转换 rad 为 degrees
  offsetPoster = $poster.data('offset'),
  transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) 
            rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)'; 
 //get angle between 0-360
 if (angle < 0) {
  angle = angle + 360;
 }
 //gradient angle and opacity
 $shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + e.pageY / h * .5 + ') 0%,rgba(255,255,255,0) 80%)');
 //poster transform
 $poster.css('transform', transformPoster);
 //parallax foreach layer
 $layer.each(function() {
  var $this = $(this),
   offsetLayer = $this.data('offset') || 0,
   transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
  $this.css('transform', transformLayer);
 });