How to Create a “Sticky” Floating Video on Page Scroll
যদি আপনি নিজেকে সম্প্রসারিত মিডিয়া ওয়েবসাইটগুলি সম্প্রসারিত করে দেখেন-ভিডিও স্ট্রিমিং পরিষেবা, সংবাদ ওয়েবসাইট, ফেসবুক এবং আরও-আপনি হয়ত তাদের ভিডিও প্লেয়ারগুলির সাথে একটি প্রবণতা লক্ষ্য করেছেন। যদি আমরা কোন পৃষ্ঠাটি স্ক্রোল করি যেখানে কোনও ভিডিও উপস্থিত থাকে তবে এটি প্লেয়ারটিকে ভাসতে এবং সঙ্কুচিত করবে, ভিউপোর্টের পাশে এটি দৃঢ়ভাবে দেখতে হবে তবে এটি দৃশ্য থেকে হারানোর পরিবর্তে
এটি ব্যবহারকারীদের একই সময়ে অন্য কন্টেন্ট মাধ্যমে খুঁজছেন, যখন ভিডিওতে নজর রাখতে পারবেন। এই টিউটোরিয়ালে আমি আপনাদের দেখাবো কিভাবে একই অভিজ্ঞতা পুনরায় তৈরী করতে হয়- তাই এইরকম আরো ঝামেলা ছাড়াই শুরু করা যাক!
উদাহরণ
শুধু তাই আমরা একই পৃষ্ঠায় সব, এখানে বন্য মধ্যে উদাহরণ কয়েকটি হয়:
YouTube ভিডিও যুক্ত করা হচ্ছে
শুরু করার জন্য, একটি ইউটিউব ভিডিও সহ পৃষ্ঠার মার্কআপ তৈরি করা যাক। Crucially, আমরা
enablejsapi=1 যুক্ত পরামিতি সঙ্গে ভিডিও এম্বেড ; এই প্যারামিটারটি আমাদের ইউটিউব আইফ্রেম API এরমাধ্যমে ভিডিওর সাথে যোগাযোগ করতে অনুমতি দেবে ।
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="site-content"><div class="container"> <header class="content-header"> <h1>Lorem ipsum dolor sit amet.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minima!</p> <!-- The YouTube video --> <figure class="content-media content-media--video" id="featured-media"> <iframe class="content-media__object" id="featured-video" src="https://www.youtube.com/embed/SF4aHwxHtZ0?enablejsapi=1&rel=0&showinfo=0&controls=0" frameborder="0"></iframe> </figure> </header> <!-- Content Body --> <div class="content-body"> </div></div></div><script src="scripts/main.js"></script> |
পৃষ্ঠার নীচে, আপনি দেখতে পাচ্ছেন, আমরা তিনটি জাভাস্ক্রিপ্ট ফাইলও যোগ করেছি; যথা jQuery, স্ক্রিপ্ট যা আমাদের ইউটিউব এফ্রেমে API- এর সাথে সরবরাহ করে এবং
main.js যেখানে আমরা আমাদের কাস্টম জাভাস্ক্রিপ্ট লিখতে যাচ্ছি।স্টাইল
আপনি যে কোনও উপায়ে পৃষ্ঠাটি শৈলী করতে পারেন, তবে আমরা এখানে বিশেষভাবে সংশ্লিষ্ট শৈলীগুলি YouTube ভিডিওর সাথে সংযুক্ত। প্রথমত, আমরা ইউটিউব ভিডিও প্রতিক্রিয়াশীল করতে শৈলী যোগ করুন। এই নিয়মগুলি শেষ পর্যন্ত কনটেইনারটি সক্ষম করবে,
.content-media--videoযখন ইউটিউব ভিডিও পুনঃস্থাপিত হবে তখন তার প্রেক্ষাপটে অনুপাত বজায় রাখতে হবে।
01
02
03
04
05
06
07
08
09
10
11
12
13
| .content-media--video { background-color: #ddd; display: block; position: relative; padding: 0 0 56.25% 0;}.content-media--video iframe { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;} |
ফ্লোটিং ভিডিও প্লেয়ার শৈলী
আমাদের পরের সিএসএস নিয়ম নির্ধারণ করে যে YouTube ভিডিওটি কীভাবে ভাসাবেন আমরা একটি নির্বাচক ব্যবহার করছি
.is-sticky-, যা আমরা পৃষ্ঠাতে ভিডিও ভাসতে, জাভাস্ক্রিপ্ট দিয়ে গতিশীলভাবে প্লেয়ারে যোগ করব। এটি ভিডিওটিকে স্কেলে স্কেল করবে, এটি বাম দিকে অবস্থান করবে এবং কয়েকটি ভিউপোর্ট আকারের জন্য এটি সামঞ্জস্য করবে।
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| #featured-video { transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out;}/** Use .sticky */#featured-video.is-sticky { position: fixed; top: 15px; left: auto; max-width: 280px; max-height: 158px; width: 280px; height: 158px;}@media screen and (min-width: 1120px) { #featured-video.is-sticky { transform: translateX(-80%); }}@media screen and (min-width: 1300px) { #featured-video.is-sticky { transform: translateX(-115%); }} |
নোট : আপনি আপনার শ্রোতা এবং আপনার ওয়েবসাইটের প্রকৃতি অনুযায়ী এই বৈশিষ্ট্য (আকার এবং অবস্থান) সমন্বয় করা উচিত। উদাহরণস্বরূপ, উদাহরণস্বরূপ, আপনার ওয়েবসাইটের সামগ্রী ডান-থেকে-বামে লেখা হয়, এটি আপনার ভিডিও প্লেয়ারটি স্থাপন করার জন্য সবচেয়ে ভাল মনে যেখানে প্রভাবিত হতে পারে।
এখন আমরা যখন এই পৃষ্ঠাটি লোড করি তখন আমরা দেখতে পাই YouTube ভিডিওটি আমাদের কিছু অবাধ বিষয়বস্তু সহ প্রদর্শিত হয়।
জাভাস্ক্রিপ্ট লেখা
আমরা এই টিউটোরিয়ালের উত্তেজনাপূর্ণ অংশে এসেছি; জাভাস্ক্রিপ্ট!
main.js এই বিন্দুতে আমাদের ফাইলের সামগ্রী নিম্নরূপ:
1
2
3
| jQuery( function( $ ) { // Write Code here.} ); |
এই উপরের স্নিপেট সমতুল্য
$(document).ready(), যা আমাদের জাভাস্ক্রিপ্ট চালানোর অনুমতি দেয় একবার সমস্ত পৃষ্ঠার উপাদান প্যাড এবং উপলব্ধ।
এর পরে, আমরা কয়েকটি ভেরিয়েবল সংজ্ঞায়িত করি। আমি কি কি চলছে ব্যাখ্যা করার জন্য প্রতিটি পরিবর্তনশীল পাশে ইনলাইন মন্তব্য যোগ করেছি।
1
2
3
4
5
6
7
| var $window = $( window ); // 1. Window Object.var $featuredMedia = $( "#featured-media" ); // 1. The Video Container.var $featuredVideo = $( "#featured-video" ); // 2. The Youtube Video.var player; // 3. Youtube player object.var top = $featuredMedia.offset().top; // 4. The video position from the top of the document;var offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) ); //5. offset. |
ইউটিউব ইফ্রেম এপিআই
যেমন আগে উল্লেখ করা হয়েছে, আমরা জাভাস্ক্রিপ্ট ফাইলটি যুক্ত করেছি যা YouTube এফ্রেমে API এ প্রবেশ করে।এই এপিআই, একবার লোড, নামক একটি ফাংশন ট্রিগার হবে
onYouTubeIframeAPIReady। এই ফাংশন গ্লোবাল স্তরে উপলব্ধ। এবং যেহেতু আমাদের স্ক্রিপ্টটি নীচের দিকে অবস্থিত jQuery( function( $ ) { });, তাই আমরা এই ফাংশনটি window বস্তুর মধ্যে পৌঁছতে হবে , নিম্নরূপ:
1
2
3
4
5
6
7
| window.onYouTubeIframeAPIReady = function() {player = new YT.Player( "featured-video", { events: { "onStateChange": onPlayerStateChange }} );}; |
আপনি ফাংশনের মধ্যে দেখতে পারেন, আমরা
iframe নামটি একটি ফাংশন পাশাপাশি আইডি বৈশিষ্ট্য নির্বাচন করেছি onPlayerStateChange। ইউটিউব ভিডিও প্লেয়ার যখন প্লে করা হয়, বিরতি দেওয়া হয় বা শেষ হয়ে যায় তখন এই ফাংশনটি চালু হবে।onPlayerStateChange একটি ইভেন্ট বস্তুর যা আমাদের তথ্য ব্যবহারযোগ্য টুকরা প্রদান করে প্রেরণ করা হয়। এই ক্ষেত্রে, উদাহরণস্বরূপ, আমরা .data ভিডিও বস্তুটি পেতে ভিডিও ইভেন্টটি ব্যবহার করব ।
ভিডিও স্টেট, যেহেতু আপনি নীচের অংশটি দেখতে পারেন, একটি সংখ্যা দিয়ে প্রতিনিধিত্ব করা হয়;
1 যখন ভিডিওটি বাজানো 2 হয় তখন ভিডিওটি বিরাম দেওয়া 3 হয় এবং ভিডিওটি শেষ হয়ে গেলে। রাষ্ট্র পরিবর্তিত হলে আমরা সেই অনুযায়ী একটি শ্রেণী নাম যুক্ত করব এবং সরিয়ে দেব।
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| /** * Run when the Youtube video state (play, pause, etc.) is changed. * * @param {Object} event The Youtube Object Event. * @return {Void} */function onPlayerStateChange( event ) { var isPlay = 1 === event.data; var isPause = 2 === event.data; var isEnd = 0 === event.data; if ( isPlay ) { $featuredVideo.removeClass( "is-paused" ); $featuredVideo.toggleClass( "is-playing" ); } if ( isPause ) { $featuredVideo.removeClass( "is-playing" ); $featuredVideo.toggleClass( "is-paused" ); } if ( isEnd ) { $featuredVideo.removeClass( "is-playing", "is-paused" ); }} |
ভিডিওটি ভাসমান এবং স্টিকিং
আমাদের ভিডিও প্লেয়ারটি ভাসতে এবং স্টিক করতে কোডটি কীভাবে অনুসরণ করে। এটা উল্লেখ করা উচিৎ যে ভিডিওটি চলছে তখন ভিডিওটি ভাসা উচিত। অতএব, আমরা প্রথমে আইফ্রেমটি পরীক্ষা করে দেখি যে
is-playing ক্লাস যোগ করার আগে ক্লাসটি আছে কিনা is-sticky :
01
02
03
04
05
06
07
08
09
10
11
| $window.on( "resize", function() { top = $featuredMedia.offset().top; offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) );} ).on( "scroll", function() { $featuredVideo.toggleClass( "is-sticky", $window.scrollTop() > offset && $featuredVideo.hasClass( "is-playing" ) );} ); |
আপনি কি কাজ করেছেন তা পরীক্ষা করুন এবং আপনি জিনিস কাজ দেখতে হবে!
উপসংহার
সম্পন্ন করা হয়েছে! এই টিউটোরিয়ালটি আপনাকে শুরু করার লক্ষ্যে লক্ষ্য রাখে যে আপনি যে ভিডিওগুলি দেখাতে পারেন সেগুলিও একইভাবে একটি ভিডিও ভাসাবেন কিভাবে মৌলিক বিষয়গুলি প্রদান করবেন। আমরা সাধারণভাবে পাঠকদের জন্য বুঝতে সহজ, সংক্ষিপ্ত, এবং সহজ কোড তোলে jQuery ব্যবহার।
একটি বাস্তব প্রকল্পে, যাইহোক, সম্ভবত প্রকল্প বিবরণীর উপর ভিত্তি করে এখানে আপনাকে বিস্তারিত জানানো হবে। উদাহরণস্বরূপ, ফাংশন কলগুলি কমাতে আপনি থ্রোটলিং ফাংশনে স্ক্রোলিং ফাংশনটি চালাতে চান । আপনি একটি মোবাইল ডিভাইসের সাইট লেআউট অনুসরণ ভিডিও অবস্থান এবং আকার সামঞ্জস্য প্রয়োজন হতে পারে, তাই এবং তাই ঘোষণা।
তবুও, ডেমো দেখুন, ভিডিওটি প্লে করুন এবং স্ক্রোলিং করুন!
Comments
Post a Comment