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

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

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

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Akan R.E.P.O. Ada Crossplay?

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7549

15

Tutorial CakePHP

1382

52

Apakah format nama akaun stim

83

11

kunci pengaktifan win11 kekal

58

19

Sambungan NYT menunjukkan dan jawapan

22

90

Tunjukkan Lagi