Airpods Pro 페이지 에서 리버스 엔지니어링을 수행 할 때 애니메이션은을 사용하지 않고을 사용 video합니다 canvas. 구현은 다음과 같습니다.
- HTTP2를 통해 약 1500 개의 이미지, 실제로 애니메이션의 프레임을 미리로드
- 다음 형식으로 이미지 배열을 만듭니다.
HTMLImageElement
- 모든
scrollDOM 이벤트에 반응 하고 가장 가까운 이미지에 해당하는 애니메이션 프레임을 요청하십시오.requestAnimationFrame
- 애니메이션 프레임 요청 콜백에서
ctx.drawImage( 요소 ctx의 2d컨텍스트)를 사용하여 이미지를 표시하십시오.canvas
이 requestAnimationFrame기능은 대상 화면의 "초당 프레임"속도로 프레임이 지연되고 동기화되므로보다 부드러운 효과를 얻을 수 있습니다.
스크롤 이벤트에 프레임을 올바르게 표시하는 방법에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event를 참조하십시오.
당신의 주요 문제에 관해 말하면, 나는 다음으로 구성된 작동 솔루션을 가지고 있습니다 :
video요소 와 높이 및 너비가 동일한 자리 표시자를 만듭니다 . absolute위치 설정시 비디오가 HTML의 나머지 부분과 겹치지 않도록하는 것입니다.- 에
scroll로 비디오의 위치를 설정 자리 뷰포트의 상단에 도달 이벤트 콜백,, absolute, 오른쪽 top값
아이디어는 비디오가 항상 흐름에서 벗어나고 맨 아래로 스크롤 할 때 적절한 순간에 자리 표시 자 위에서 발생한다는 것입니다.
JavaScript는 다음과 같습니다.
//Get video element
let video = $("#video-effect-wrapper video").get(0);
video.pause();
let topOffset;
$(window).resize(onResize);
function computeVideoSizeAndPosition() {
const { width, height } = video.getBoundingClientRect();
const videoPlaceholder = $("#video-placeholder");
videoPlaceholder.css("width", width);
videoPlaceholder.css("height", height);
topOffset = videoPlaceholder.position().top;
}
function updateVideoPosition() {
if ($(window).scrollTop() >= topOffset) {
$(video).css("position", "absolute");
$(video).css("left", "0px");
$(video).css("top", topOffset);
} else {
$(video).css("position", "fixed");
$(video).css("left", "0px");
$(video).css("top", "0px");
}
}
function onResize() {
computeVideoSizeAndPosition();
updateVideoPosition();
}
onResize();
//Initialize video effect wrapper
$(document).ready(function () {
//If .first text-element is set, place it in bottom of
//text-display
if ($("#video-effect-wrapper .text.first").length) {
//Get text-display position properties
let textDisplay = $("#video-effect-wrapper #text-display");
let textDisplayPosition = textDisplay.offset().top;
let textDisplayHeight = textDisplay.height();
let textDisplayBottom = textDisplayPosition + textDisplayHeight;
//Get .text.first positions
let firstText = $("#video-effect-wrapper .text.first");
let firstTextHeight = firstText.height();
let startPositionOfFirstText = textDisplayBottom - firstTextHeight + 50;
//Set start position of .text.first
firstText.css("margin-top", startPositionOfFirstText);
}
});
//Code to launch video-effect when user scrolls
$(document).scroll(function () {
//Calculate amount of pixels there is scrolled in the video-effect-wrapper
let n = $(window).scrollTop() - $("#video-effect-wrapper").offset().top + 408;
n = n < 0 ? 0 : n;
//If .text.first is set, we need to calculate one less text-box
let x = $("#video-effect-wrapper .text.first").length == 0 ? 0 : 1;
//Calculate how many percent of the video-effect-wrapper is currenlty scrolled
let percentage = n / ($(".text").eq(1).outerHeight(true) * ($("#video-effect-wrapper .text").length - x)) * 100;
//console.log(percentage);
//console.log(percentage);
//Get duration of video
let duration = video.duration;
//Calculate to which second in video we need to go
let skipTo = duration / 100 * percentage;
//console.log(skipTo);
//Skip to specified second
video.currentTime = skipTo;
//Only allow text-elements to be visible inside text-display
let textDisplay = $("#video-effect-wrapper #text-display");
let textDisplayHeight = textDisplay.height();
let textDisplayTop = textDisplay.offset().top;
let textDisplayBottom = textDisplayTop + textDisplayHeight;
$("#video-effect-wrapper .text").each(function (i) {
let text = $(this);
if (text.offset().top < textDisplayBottom && text.offset().top > textDisplayTop) {
let textProgressPoint = textDisplayTop + (textDisplayHeight / 2);
let textScrollProgressInPx = Math.abs(text.offset().top - textProgressPoint - textDisplayHeight / 2);
textScrollProgressInPx = textScrollProgressInPx <= 0 ? 0 : textScrollProgressInPx;
let textScrollProgressInPerc = textScrollProgressInPx / (textDisplayHeight / 2) * 100;
//console.log(textScrollProgressInPerc);
if (text.hasClass("first"))
textScrollProgressInPerc = 100;
text.css("opacity", textScrollProgressInPerc / 100);
} else {
text.css("transition", "0.5s ease");
text.css("opacity", "0");
}
});
updateVideoPosition();
});
HTML은 다음과 같습니다.
<div id="video-effect-wrapper">
<video muted autoplay>
<source src="https://ndvibes.com/test/video/video.mp4" type="video/mp4" id="video">
</video>
<div id="text-display"/>
<div class="text first">
Scroll down to test this little demo
</div>
<div class="text">
Still a lot to improve
</div>
<div class="text">
So please help me
</div>
<div class="text">
Thanks! :D
</div>
</div>
<div id="video-placeholder">
</div>
<div id="other-parts-of-website">
<p>
Normal scroll behaviour wanted.
</p>
<p>
Normal scroll behaviour wanted.
</p>
<p>
Normal scroll behaviour wanted.
</p>
<p>
Normal scroll behaviour wanted.
</p>
<p>
Normal scroll behaviour wanted.
</p>
<p>
Normal scroll behaviour wanted.
</p>
</div>
여기에서 시도 할 수 있습니다 : https://jsfiddle.net/crkj1m0v/3/