Miniatury jsou jedním z nejčistších kusů použitelnosti digitálního věku. V podstatě náhled je náhled, slib toho, co uvidíte, pokud kliknete na odkaz. Malý záblesk s méně datami, rychlejší načítání a méně chamtivý pro obrazovku nemovitostí než plnohodnotný majetek. Jsou ideální pro obrázky, ale co video?
Vylepšením techniky, kterou již používáme pro stavy tlačítek, můžeme vytvořit úžasné animované miniatury se základním CSS a malým jQuery.
V současné době nejsou stahování rychlostí pro vývojáře webu takový problém. Samozřejmě, malé velikosti souborů jsou stále žádoucí, ale skutečný výkon na většině webů je počet požadavků HTTP. Pokaždé, když vaše stránky načte daný materiál, provede prohlížeč požadavek HTTP, který je odeslán, zpracován a vrácen. Zkontrolujte konzolu, uvidíte, že většina zpoždění na vašem webu nemá nic společného s velikostí obrazu, je to strávil čekání na odpověď serveru.
Řešením je technologie CSS sprite; šití více obrázků do jednoho obrazového souboru a poté selektivně zobrazovat různé části obrazu pomocí CSS.
Tradičně pro všechna tlačítka, která nelze vytvořit se základními styly CSS, bychom vytvořili tři stavy; mimo , nad a dolů :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}To by vedlo ke stahování tří snímků ze serveru a generování tří požadavků HTTP.
Budeme-li to jako CSS sprite, uložíme všechny tři obrázky vedle sebe v jednom souboru (takže místo toho, abychom měli tři 200px širokoúhlé obrázky, máme jeden 600px širokoúhlý obraz) a změníme pozici obrazu pomocí vlastnosti CSS na pozici pozadí :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Přemýšlejte o prvku jako o okně, pomocí něhož zobrazujete obrázek. Obraz můžete přesunout, ale okno zůstane ve stejné pozici. Za předpokladu, že se ujistíte, že prvek má stejnou velikost jako část obrázku, kterou chcete zobrazit, je efekt hladký:
První věc, kterou musíme udělat, je spojit některé obrázky. Budu spojovat s touto krásnou video ze západního Norska při východu slunce podle Fuglefjellet , takže jsem z obrazovky uchopil 10 klíčových snímků z části videa, které se mi líbí a spojilo je do jednoho obrazu pomocí Photoshopu.
Nyní, když je obrázek připraven, druhá věc, kterou musíme udělat, je vytvořit jednoduchý soubor HTML s odkazem na video, které vytváříme miniaturu:
http://vimeo.com/8736190" id=preview> Western Norway at sunriseNext, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise
$(document).ready(function() {$('#preview').css('display', 'block').css('width', 500).css('height', 203).css('background', 'url("our-image.jpg") no-repeat');}Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunriseNext, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise
Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise
Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise
Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise
Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise
.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');});Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrise
Next, we need to import jQuery in the head of the page: Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link: ); Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth. Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element. Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time. We subtract the resulting value from 0 so that all possible values are negative. Then we apply the background-position with CSS: The full script looks like this: );}); Western Norway at sunrisedemo Závěr
Existuje několik věcí, které je třeba zvážit: zaprvé by bylo možné vytvořit miniaturu se stovkami "rámců", ale zatímco to povede k velmi hladké animaci, bude také trvat dlouho, než se načte; za druhé, detekce polohy myši jednoduše nebude fungovat na dotykovém zařízení, takže i když tato technika nebude ve skutečnosti poškozovat použitelnost na mobilním zařízení, nezískaváte ani nic.
Účelem miniatury je poskytnout uživateli více informací o tom, co leží na druhém konci odkazu, a když je zdrojem, na který odkazujete, video, jediný snímek často není dost informací. Rozšíření technologie CSS sprite je jednoduchý a efektivní způsob, jak zobrazit náhled více než jeden snímek.
Jak si náhled videa na miniaturách? Používáte více než jeden snímek? Dejte nám vědět v komentářích.