تصاویر بندانگشتی یکی از ناب‌ترین بخش‌های کاربردی هستند که عصر دیجیتال ایجاد کرده است. در اصل یک تصویر کوچک یک پیش نمایش است، وعده ای از آنچه که اگر روی پیوند کلیک کنید خواهید دید. نگاهی اجمالی با داده‌های کمتر، بارگیری سریع‌تر و حریص کمتری برای املاک و مستغلات صفحه نمایش نسبت به دارایی با اندازه کامل. آنها برای تصاویر ایده آل هستند، اما ویدیو چطور؟

خوب، با گسترش تکنیکی که قبلاً برای حالت‌های دکمه استفاده می‌کنیم، می‌توانیم تصاویر کوچک متحرک شگفت‌انگیزی با CSS اولیه و کمی جی کوئری ایجاد کنیم.

روش کار CSS sprites

امروزه سرعت دانلود برای توسعه دهندگان وب مشکل چندانی ندارد. البته، اندازه فایل های کوچک هنوز هم مطلوب هستند، اما عملکرد واقعی آن ضربه می زند روی اکثر سایت ها تعداد درخواست های HTTP است. هر بار که سایت شما یک دارایی را بارگیری می کند، مرورگر یک درخواست HTTP ارسال می کند، پردازش می شود و سپس برگردانده می شود. خود را بررسی کنید console، شما تا حد زیادی از تاخیر را خواهید دید روی سایت شما ربطی به اندازه تصویر ندارد، در انتظار پاسخ سرور صرف می شود.

راه حل، تکنیک CSS sprite است. دوختن چندین تصویر در یک فایل تصویری واحد و سپس نمایش انتخابی قسمت های مختلف آن تصویر با استفاده از CSS.

به‌طور سنتی، برای هر دکمه‌ای که نمی‌توانیم با سبک‌های اصلی CSS ایجاد کنیم، سه حالت ایجاد می‌کنیم. یک خاموش، یک تمام و الف پایین:

.button{
 background:url('off-state.png');
}
.button:hover{
 background:url('over-state.png');
}
.button:active{
 background:url('down-state.png');
}

این منجر به دانلود سه تصویر از سرور و ایجاد سه درخواست HTTP می شود.

با ساختن این به عنوان یک sprite CSS، هر سه تصویر را در کنار یکدیگر در یک فایل ذخیره می‌کنیم (به طوری که به جای داشتن سه تصویر با عرض 200 پیکسل، یک تصویر با عرض 600 پیکسل داریم) و موقعیت تصویر را با استفاده از ویژگی پس‌زمینه موقعیت CSS تغییر می‌دهیم. :

.button{
 display:block;
 width:200px;
 height:83px;
 background:url('button-states.jpg');
}
.button:hover{
 background-position:-200px;
}
.button:active{
 background-position:-400px;
}

عنصر را به عنوان یک پنجره در نظر بگیرید که از طریق آن تصویر را مشاهده می کنید. شما می توانید تصویر را جابجا کنید، اما پنجره در همان موقعیت باقی می ماند. مشروط بر اینکه اطمینان حاصل کنید که اندازه عنصر با قسمتی از تصویر که می‌خواهید جلوه را نمایش دهید یکپارچه است:

ساخت یک تصویر کوچک متحرک

محدودیت تکنیک CSS sprite در بالا، تصویر نیست، بلکه تعداد تریگرهای مختلفی است که می توانیم استفاده کنیم. ما فقط خاموش (وضعیت پیش‌فرض)، بیش از حد و پایین داریم.

با این حال، با وصل کردن یک جی کوئری کوچک، می‌توانیم از موقعیت مکان‌نما برای تعیین نقاط ماشه‌ای مختلف که می‌خواهیم استفاده کنیم – یا به‌طور دقیق‌تر، هر تعداد موقعیت مکان‌نمای مختلف را که می‌توانیم داشته باشیم. روی صفحه نمایش:

اولین کاری که باید انجام دهیم این است که چند تصویر را به هم بچسبانیم. من قصد دارم به این زیبا لینک کنم ویدیوی نروژ غربی در طلوع خورشید توسط فوگلفجلتبنابراین من 10 فریم کلیدی را از قسمتی از آن ویدیو که دوست دارم انتخاب کردم و آنها را با استفاده از فتوشاپ در یک تصویر واحد به هم چسباندم.

اکنون که تصویر آماده است، دومین کاری که باید انجام دهیم این است که یک فایل HTML ساده با پیوندی به ویدیویی که تصویر کوچک آن را ایجاد می کنیم، ایجاد کنیم:

Western Norway at sunrise

بعد، ما نیاز داریم import jQuery در سر page:

سپس از jQuery برای تنظیم نوع نمایش (بلاک) عرض (500 پیکسل برای مطابقت با عرض یک قاب تصویر) ارتفاع (203 پیکسل) و پس‌زمینه پیوندمان استفاده می‌کنیم:

$(document).ready(function() {
 $('#preview')
 .css('display', 'block')
 .css('width', 500)
 .css('height', 203)
 .css('background', 'url("our-image.jpg") no-repeat');
});

در نهایت، باید پس‌زمینه را طوری تنظیم کنیم که قسمت صحیح تصویر ما نمایش داده شود. پهنای هر «قاب» 500 پیکسل است، بنابراین برای نشان دادن اولین فریم، موقعیت x تصویر پس‌زمینه باید 0 پیکسل، برای نشان دادن دومی 500- پیکسل، فریم سوم 1000 پیکسل – و غیره باشد.

با استفاده از تابع کنترل کننده موس، می توانیم موقعیت نسبی مکان نما را بر روی عنصر به صورت درصد محاسبه کنیم. موقعیت افست عنصر را از pageX رویداد کم می کنیم (این کار لبه سمت چپ عنصر را 0 در نظر می گیرد)، سپس بر عرض عنصر تقسیم می کنیم.

پس از انجام این کار، موقعیت تصویر پس زمینه را با ضرب موقعیت درصد در اندازه کل تصویر ترکیبی محاسبه می کنیم. ما نیاز داریم که نتیجه نهایی مضربی از عرض عنصر (500px) باشد، بنابراین ما نتیجه را بر آن مقدار تقسیم می کنیم، با استفاده از Math.floor() به پایین گرد می کنیم، سپس برای لغو تقسیم، آن را به بالا ضرب می کنیم. اگر این کار را انجام ندهیم، تصویر به سادگی 1 پیکسل در یک زمان اسکرول می شود.

مقدار حاصل را از 0 کم می کنیم تا همه مقادیر ممکن منفی باشند.

سپس موقعیت پس زمینه را با CSS اعمال می کنیم:

.mousemove(function(e) {
 var elementWidth = 500;
 var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
 var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
 $(this).css('background-position', '-' + bgPosition + 'px 0px');
});

اسکریپت کامل به این صورت است:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('#preview')
 .css('display', 'block')
 .css('width', 500)
 .css('height', 203)
 .css('background', 'url("landscape.jpg") no-repeat')
 .mousemove(function(e) {
 var elementWidth = 500;
 var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
 var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
 $(this).css('background-position', bgPosition + 'px 0px');
 });
 });
 </script>
</head>
<body>
 <a href="https://vimeo.com/8736190" id="preview">Western Norway at sunrise</a>
</body>
</html>

نتیجه گیری

چند نکته وجود دارد که باید در نظر گرفته شود: اولاً، می‌توان یک تصویر کوچک با صدها «فریم» تنظیم کرد، اما در حالی که به انیمیشن بسیار روان منجر می‌شود، بارگذاری آن نیز زمان زیادی را می‌طلبد. ثانیاً، تشخیص موقعیت ماوس به سادگی کار نمی کند روی یک دستگاه صفحه لمسی است، بنابراین در حالی که این تکنیک عملاً به قابلیت استفاده آسیب نمی رساند روی یک دستگاه تلفن همراه شما نیز چیزی به دست نمی آورید.

هدف از یک تصویر کوچک ارائه اطلاعات بیشتر به کاربر در مورد آنچه در انتهای دیگر پیوند نهفته است است، و زمانی که منبعی که به آن پیوند می‌دهید یک ویدیو است، اغلب یک تصویر واحد اطلاعات کافی نیست. گسترش تکنیک CSS sprite یک راه ساده و موثر برای پیش نمایش بیش از یک فریم است.

چگونه پیش‌نمایش ویدیو را در ریز عکسها مشاهده می‌کنید؟ آیا از بیش از یک تصویر استفاده می کنید؟ در نظرات به ما اطلاع دهید.