Een geanimeerde miniatuur maken

Thumbnails zijn een van de puurste stukjes bruikbaarheid die het digitale tijdperk heeft gecreëerd. In wezen is een miniatuur een voorbeeld, een belofte van wat u te zien krijgt als u op de link klikt. Een kleine blik met minder gegevens, sneller te laden en minder hebzuchtig voor schermvastgoed dan het grote goed. Ze zijn ideaal voor afbeeldingen, maar hoe zit het met video?

Welnu, door een techniek uit te breiden die we al gebruiken voor knoptoestanden, kunnen we verbluffende geanimeerde miniaturen maken met basis-CSS en een beetje jQuery.

Hoe CSS sprites werken

Tegenwoordig zijn downloadsnelheden niet zo'n probleem voor webontwikkelaars. Natuurlijk zijn kleine bestandsgroottes nog steeds wenselijk, maar de echte prestatieshit op de meeste sites is het aantal HTTP-verzoeken. Telkens wanneer uw site een item laadt, maakt de browser een HTTP-aanvraag die wordt verzonden, verwerkt en vervolgens wordt geretourneerd. Controleer uw console, u zult zien dat een groot deel van de vertraging op uw site niets te maken heeft met de afbeeldingsgrootte, maar wordt doorgebracht met wachten op een serverreactie.

De oplossing is de CSS sprite-techniek; samenvoegen van meerdere afbeeldingen in een enkel afbeeldingsbestand en vervolgens selectief verschillende delen van die afbeelding weergeven met behulp van CSS.

Traditioneel maken we voor elke knop die we niet kunnen maken met standaard CSS-stijlen, drie statussen; een off , een over en een down :

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

Dit zou ertoe leiden dat drie afbeeldingen van de server worden gedownload en drie HTTP-verzoeken genereren.

Als we dit bouwen als een CSS-sprite, slaan we alle drie de afbeeldingen naast elkaar op in een enkel bestand (zodat we in plaats van drie 200 px brede afbeeldingen één breed beeld van 600 pixels hebben) en de positie van de afbeelding wijzigen met behulp van de achtergrondpositie van CSS :

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

Zie het element als een venster, waardoor u het beeld kunt bekijken. U kunt het beeld verplaatsen, maar het venster blijft in dezelfde positie. Op voorwaarde dat je ervoor zorgt dat het element dezelfde grootte heeft als het gedeelte van de afbeelding dat je wilt weergeven, is het effect naadloos:

Het eerste dat we moeten doen, is een paar afbeeldingen samenvoegen. Ik ga linken naar deze mooie video van West-Noorwegen bij zonsopgang door Fuglefjellet , dus ik heb op het scherm 10 keyframes geprojecteerd uit een gedeelte van die video die ik leuk vind en heb ze samengevoegd tot één afbeelding met behulp van Photoshop.

Nu de afbeelding gereed is, is het tweede wat we moeten doen, een eenvoudig HTML-bestand maken met een link naar de video waarvoor we de miniatuur maken:

http://vimeo.com/8736190" id=preview> 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 
 
$(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 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 
 
 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 sunrise 
  Conclusie 
  Er zijn een paar dingen die u moet overwegen: ten eerste zou het mogelijk zijn om een ​​thumbnail in te stellen met honderden 'frames', maar hoewel dat tot zeer vloeiende animaties leidt, duurt het laden ook lang;  ten tweede werkt de muispositiedetectie eenvoudig niet op een touchscreen-apparaat, dus terwijl deze techniek de bruikbaarheid op een mobiel apparaat niet echt schaadt, verwerft u ook niets. 
  Het doel van een miniatuur is om de gebruiker meer informatie te geven over wat zich aan de andere kant van een link bevindt en wanneer de bron waarnaar u linkt een video is, is een enkele afbeelding vaak niet voldoende informatie.  Het uitbreiden van de CSS-sprite-techniek is een eenvoudige, effectieve manier om meer dan één frame te bekijken. 
  Hoe bekijk je video in miniaturen?  Gebruik je meer dan één afbeelding?  Laat het ons weten in de comments. 
        

                        css 
                        usability 
                        jQuery 
                        css sprites 
                        previews voor video 
                        videominiaturen