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

Kesannya ditunjukkan di bawah:

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

sebagai bekas, dan setiap

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>是用于制作流光效果的图层。

Salin selepas log masuk

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);
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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');
}

Salin selepas log masuk

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>

Salin selepas log masuk

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);
 });

Salin selepas log masuk

Label berkaitan：

jquery_css3 jquery控制css3动画

sumber：php.cn

Artikel sebelumnya：jQuery melaksanakan kesan menu dinamik yang bertindak balas kepada scrolling_jquery tetikus Artikel seterusnya：Tutorial Asas untuk Bermula dengan Java Mybatis Framework_Pengetahuan Asas

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang