So erzielen Sie den Parallaxeneffekt eines APPLE TV-Posters basierend auf CSS3 und jQuery

In diesem Artikel wird hauptsächlich der Parallaxeneffekt des APPLE TV-Posters vorgestellt, der auf jQuery und CSS3 basiert. Freunde, die ihn benötigen, können sich auf

Verwenden Sie CSS und jQuery, um ihn zu implementieren, und versuchen Sie, den gleichen Effekt wie der Originaleffekt zu erzielen .

In diesem Tutorial verwende ich CSS, HTML und jQuery, um einen ungefähren Apple TV-Parallaxeneffekt zu erzeugen. Wenn Sie dies lesen, gehe ich davon aus, dass Sie mit dem oben Gesagten vertraut sind Drei Techniken.

Beginnen wir ohne weitere Umschweife mit dem ersten Teil.

HTML-Seite

Unsere Seitenstruktur ist wie folgt:

<p class="poster">
 <p class="shine"></p>
 <p class="layer-1"></p>
 <p class="layer-2"></p>
 <p class="layer-3"></p>
 <p class="layer-4"></p>
 <p class="layer-5"></p>
</p>

Zuallererst: Wir brauchen A p mit der Stilklasse .poster enthält 5 Ebenen p anderer Stile. Auf diese fünf Schichten p gibt es einen Glanz p, der für etwas Glanz sorgt.

CSS-Teil

Fügen Sie zunächst den folgenden Code hinzu, um sicherzustellen, dass die Höhe des Hauptteils der Webseite der gesamten Seitenhöhe entspricht:

body, html { height: 100%; min-height: 100%; }

Geben Sie dem Körper einige Hintergrundverlaufsfarben:

body { background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%); }

Um dem .Poster ein 3D zu verleihen Rotationseffekt: Der übergeordnete Container muss die Perspektive und den Transformationseffekt festlegen. Wie wir sehen können, ist der übergeordnete Container von p der Körper selbst. Fügen Sie daher den folgenden CSS-Code hinzu:

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

Stilen und formatieren Sie nun die Karte so, dass sie passt passt auf die Seite Mitte, fügen Sie einige abgerundete Ecken und Schatteneffekte hinzu:

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

Um das Poster zu zentrieren, müssen Sie den Positionswert auf absolut setzen, oben: 50 %, „links: 50 %“, der obere Randwert ist eine negative Zahl, die der halben Höhe von p entspricht, und der Randwert links ist eine negative Zahl, die der halben Breite von p entspricht. Beachten Sie, dass die Mitte des Posters auch die Mitte der gesamten Seite ist.

Schatteneffekt

Wir können den folgenden CSS-Selektor verwenden, um alle Ebenen auszuwählen:

p[class *= 'layer-']

.poster wurde entworfen, mal sehen, wie es wirkt.

CSS wählt also alle p aus, die „layer-“ im Klassennamen enthalten.

Setzen Sie nun den Positionswert aller Ebenen auf „absolut“, den Hintergrundwiederholungswert auf „keine Wiederholung“, die Hintergrundposition auf „oben links“ und die Größe des Ebenenhintergrunds auf 100 % Breite und automatische Höhe .

p[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 von oben, links, rechts und unten alle -10 Pixel betragen. Der Zweck besteht darin, die Größe der Ebene festzulegen 20 Pixel größer als das Poster, sodass Sie bei der Inspektion der Ebene den Rand der Ebene nicht sehen können.

Im Folgenden wird jeder Ebene ein Hintergrund hinzugefügt:

.layer-1 {
  background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/1.png');
}
.layer-2 {
  background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/2.png');
}
.layer-3 {
  top: 0; bottom: 0;
  left: 0; right: 0;
  background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/3.png');
}
.layer-4 {
  background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/4.png');
}
.layer-5 {
  background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/5.png');
}

Im Layer-3-Teil wird die Ebene nicht verschoben, also Die Größe muss nicht zu groß sein. Groß.

Vervollständigen Sie den statischen Effekt

JavaScript-Teil

Bevor Sie beginnen, stellen Sie sicher, dass Sie dies getan haben Einführung der jQuery-Bibliothek, andernfalls wird ein Fehler gemeldet.

Die Logik des Parallaxeneffekts ist wie folgt: Immer wenn sich die Maus bewegt, ändern sich die Transformationseigenschaften „translateY“, „rotate“, „rotateY“ von .poster entsprechend der Position des Cursors. Je weiter der Cursor von der oberen linken Ecke der Seite entfernt ist, desto deutlicher wird der Animationseffekt.

Die Formel ähnelt dieser: offsetX=0,5 – die Position/Breite des Cursors vom oberen Rand der Seite.

Um für jedes Element einen anderen Wert zu erhalten, multiplizieren Sie den von jeder Cursorformel zurückgegebenen Wert mit einem benutzerdefinierten Wert, geben Sie den HTML-Code zurück und fügen Sie data-offset zu jedem Ebenenelement hinzu, das Animationseigenschaften haben soll von Zahlen.

<p data-offset="15" class="poster">
  <p class="shine"></p>
  <p data-offset="-2" class="layer-1"></p>
  <p class="layer-2"></p>
  <p data-offset="1" class="layer-3"></p>
  <p data-offset="3" class="layer-4"></p>
  <p data-offset="10" class="layer-5"></p>
</p>

Die Regeln für jede .layer sind die gleichen, aber wir wenden sie auf die Eigenschaften TranslateY und TranslateX an.

Je größer der Wert des Datenoffset-Attributs ist, desto offensichtlicher wird der Animationseffekt sein. Sie können diese Werte ändern, um ihn zu erleben.

Für die Lesbarkeit des Codes weisen wir .poster der Variablen $poster in JavaScript zu, .shine der Variablen $shine, die Variable $layer repräsentiert alle Ebenen und w und h repräsentieren die Breite und Höhe der Seite .

var $poster = $('.poster'),
$shine = $('.shine'),
$layer = $('p[class*="layer-"]');

Jetzt müssen wir das Problem betrachten, die Cursorposition zu ermitteln, wenn sich der Cursor bewegt. Um dies zu erreichen, können wir das Mousemove-Ereignis von $(window) verwenden. Dieses Ereignis gibt ein JavaScript-Objekt zurück, das die von uns benötigten Positionsinformationen und einige andere Variablen enthält, die wir noch nicht benötigen.

$(window).on('mousemove', function(e) {
  var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight;
  var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */
  offsetY = 0.5 - e.pageY / h,
  offsetPoster = $poster.data('offset'), /* custom value for animation depth */
  transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';
  /* apply transform to $poster */
  $poster.css('transform', transformPoster);
  /* parallax foreach layer */
  /* loop thought each layer */
  /* get custom parallax value */
  /* apply transform */
  $layer.each(function() {
    var $this = $(this);
    var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */
    var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
    $this.css('transform', transformLayer);
  });
});

Der nächste Schritt besteht darin, die oben erläuterte Formel zu verwenden, um die Werte von offsetY und offsetX zu berechnen und dann den Parallaxeneffekt auf .posert und anzuwenden jede Posterschicht.

Sehr cool, jetzt haben wir ein Widget mit Parallaxeneffekt.

Im Wesentlichen abgeschlossen

Aber es ist noch nicht fertig, der Hochglanzteil auf dem Poster ist noch nicht festgelegt

Jetzt gehen Sie zurück zu Geben Sie den CSS-Teil ein und geben Sie .shine p Absolute Positionierung, fügen Sie einen Farbverlaufseffekt hinzu und setzen Sie den Z-Index-Attributwert auf 100, sodass er über allen Ebenen liegt.

.shine {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%);
  z-index: 100;
}

Auf dem Poster befindet sich bereits eine schöne Glitzerschicht, aber um einen realistischeren Effekt zu erzielen, sollte sich die Beleuchtung ändern, wenn sich der Cursor bewegt.

更逼真些

我们怎么做呢？可能你还记得无聊的初三数学课，当你想着你在学一些你从来都不会用到的公式的时候，我们现在就用到了。

所以，倾斜的角度应该等于光标与海报中心形成三角形的角度的相反值。（还记得吧，海报的中心就是整个页面的中心啊，也就是页面宽度和高度的二分之一）

角度示意图

首先，找到光标与页面中心形成的三角形的直角边，光标与中心连线后作出一个直角三角形。

然后用 Math.atan2() 函数得到中心点的角度值。注意这个函数的返回值使用弧度值来表示的，所以我们得在CSS中转换成角的度数，用以下公式：

弧度值*180/pi = 角度值

var $poster = $('.poster');
  var $shine = $('.shine');
  var $layer = $('p[class *= "layer-"]');
  $poster.data("offset",15);
  $(window).on('mousemove', function(e) {
    var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight;
    var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */
    offsetY = 0.5 - e.pageY / h,
    offsetPoster = $poster.data('offset'), /* custom value for animation depth */
    transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';
    dy = e.pageY - h / 2,
    dx = e.pageX - w / 2,
    theta = Math.atan2(dy,dx), /* get angle in radians */
    angle = theta * 180 / Math.PI; /* convert rad in degrees */
    /* apply transform to $poster */
    $poster.css('transform', transformPoster);
    /* parallax foreach layer */
    /* loop thought each layer */
    /* get custom parallax value */
    /* apply transform */
    $layer.each(function() {
      var $this = $(this);
      var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */
      var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
      $this.css('transform', transformLayer);
    });
  });

你会发现角度值的范围是从-180到180度，以下代码修复这个问题让角度值从0-360度：

if (angle < 0) {
  angle = angle + 360;
}

现在角度有了，就可以随着光标的移动来动态改变渐变颜色的角度值：

$shine.css('background', 'linear-gradient(' + (angle - 90) + 'deg, rgba(255,255,255,' + e.pageY / h + ') 0%,rgba(255,255,255,0) 80%)');

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

利用css3制作煽动翅膀的蝴蝶的代码

使用css3和jQuery实现文字跟随鼠标的上下抖动

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Parallaxeneffekt eines APPLE TV-Posters basierend auf CSS3 und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!