এয়ারপডস প্রো পৃষ্ঠায় কিছু বিপরীত প্রকৌশল করার সময় , আমরা লক্ষ্য করেছি যে অ্যানিমেশনটি একটি ব্যবহার করে না video, তবে একটি canvas। বাস্তবায়ন নিম্নরূপ:
- এইচটিটিপি 2 এর উপরে প্রায় 1500 টি চিত্র প্রিলোড করুন, আসলে অ্যানিমেশনের ফ্রেম
- আকারে চিত্রের একটি অ্যারে তৈরি করুন
HTMLImageElement
- প্রতিটি
scrollডিওএম ইভেন্টের প্রতিক্রিয়া জানান এবং সাথে একটি নিকটতম চিত্রের সাথে সম্পর্কিত অ্যানিমেশন ফ্রেমের জন্য অনুরোধ করুনrequestAnimationFrame
- অ্যানিমেশন ফ্রেমে কলব্যাকের জন্য অনুরোধ জানায়, ব্যবহার করে চিত্রটি প্রদর্শিত করুন
ctx.drawImage( ctxএর 2dপ্রসঙ্গ হতে পারে)canvas উপাদান)
দ্য requestAnimationFrameফাংশন আপনি একটি বাধামুক্ত প্রভাব অর্জন যেমন ফ্রেম ডেফার্ড এবং টার্গেট পর্দার রেট "প্রতি সেকেন্ডে ফ্রেম" সঙ্গে সিঙ্ক্রোনাইজ করতে সাহায্য করা উচিত।
কোনও স্ক্রোল ইভেন্টে ফ্রেমটি কীভাবে সঠিকভাবে প্রদর্শন করতে হয় সে সম্পর্কে আরও তথ্যের জন্য আপনি এটি পড়তে পারেন: https://developer.mozilla.org/en-US/docs/Web/API/Docament/scroll_event
বলা হচ্ছে, আপনার মূল সমস্যা সম্পর্কে, আমার একটি কার্যনির্বাহী সমাধান রয়েছে যা এতে অন্তর্ভুক্ত করে:
videoউপাদানগুলির চেয়ে একই উচ্চতা এবং প্রস্থের একটি স্থানধারক তৈরি করা । এর উদ্দেশ্যটি হ'ল ভিডিওটি এড়ানো যখন সেট করা থাকে তখন বাকি এইচটিএমএলকে ওভারল্যাপ করাabsolute অবস্থানটি- মধ্যে
scrollঘটনা কলব্যাক যখন স্থানধারক ভিউপোর্ট উপরের ছুঁয়েছে, এর ভিডিওর অবস্থান সেট absolute, এবং ডানtop মূল্য
ধারণাটি হ'ল ভিডিওটি সর্বদা প্রবাহের বাইরে থাকে এবং নীচে স্ক্রোল করার সময় সঠিক মুহুর্তে স্থানধারকের উপরে স্থান নেয়।
এখানে জাভাস্ক্রিপ্ট:
//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();
});
এইচটিএমএল:
<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/