Teilen Sie den Quellcode visueller Differenzeffekte basierend auf JQuery und CSS3, um den Apple TV-Poster „background_jquery' zu imitieren

Der Effekt ist unten dargestellt:

Demo ansehen Quellcode herunterladen

HTML-Struktur

Apple TV ist ein hochauflösendes TV-Set-Top-Box-Produkt, das Apple nach Airport Express auf den Markt gebracht hat. Wenn Sie es jemals verwendet haben, werden Sie sicherlich von den coolen visuellen Filmplakateffekten angezogen sein.

Die HTML-Struktur dieses visuellen Differenzeffekts verwendet ein

als Container und jedes

darin ist eine „Ebene“.

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

CSS-Stil

Damit das umhüllte Element .poster einen 3D-Rotationseffekt erzeugt, muss sein übergeordnetes Element die Perspektive und den Transformationsstil festlegen.

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

Die Postergröße ist hier auf feste 320 x 500 Pixel eingestellt, zentriert relativ zur Seite, was einen abgerundeten Eckeneffekt und einige Schatteneffekte ergibt.

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

Das Poster wird mit der absoluten Positionierungsmethode zentriert: links und oben sind jeweils 50 % und dann werden margin-left und margin-top auf negative Breiten- und Höhenwerte gesetzt.

Alle „Ebenen“ im Poster können über den div[class*="layer-"]-Selektor ausgewählt werden. Alle Ebenen sind auf absolute Positionierung eingestellt, das Hintergrundbild wird nicht wiederholt, die Hintergrundposition ist auf die obere linke Ecke eingestellt und die Größe des Hintergrunds ist auf 100 % Breite und automatische Höhe eingestellt.

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

Beachten Sie, dass die Werte der oberen, linken, rechten und unteren Attribute im obigen Code alle -10 Pixel betragen. Sie werden verwendet, um die Abmessungen der Ebene um 20 Pixel größer zu machen als die Abmessungen des Posters. Der Grund hierfür besteht darin, die Kanten der Ebene auszublenden und so einen visuellen Unterschiedseffekt zu erzielen.

Legen Sie schließlich für jede Ebene ein Hintergrundbild fest.

.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

Das Prinzip dieses visuellen Differenzeffekts besteht darin, dass sich jedes Mal, wenn der Benutzer die Maus bewegt, die Eigenschaften „TranslateY“, „Rotate“ und „RotateY“ von .poster entsprechend der Position der Maus ändern. Je weiter die Maus von der oberen linken Ecke entfernt ist, desto größer ist der Bereich, in dem die Animation sichtbar ist.

Die Berechnungsformel ähnelt offsetX = 0,5 – Mausposition / Breite des Fensters.

Um jeder Ebene unterschiedliche Animationsgeschwindigkeiten zu verleihen, muss diese mit einem benutzerdefinierten Animationsgeschwindigkeitswert multipliziert werden. Dieser Wert wird durch data-offset="number" im HTML-Tag bereitgestellt.

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

Je größer der Wert des Datenversatzes ist, desto größer ist der sichtbare Animationsbereich.

Der JS-Code für den gesamten visuellen Differenzeffekt lautet wie folgt:

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

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7403

15

Java-Tutorial

1630

14

CakePHP-Tutorial

1358

52

Laravel-Tutorial

1268

25

PHP-Tutorial

1218

29

Mehr anzeigen