Slideshow na pozadí webstránky
2019-04-26 01:23:03
V tomto článku by som rád ukázal ako sa dá veľmi jednoducho vytvoriť slideshow zložená z obrázkov ktoré sa plynule prelínajú na pozadí webstránky. Veľmi jednoduchú implementáciu tohto efektu môžeme dosiahnúť použitím JQuery pluginu s názvom Backstretch. Tento plugin okrem toho robí pozadie s obrázkom plne responzívnym, pozadie sa vďaka tomuto pluginu bude automaticky prispôsobovať akejkoľvek veľkosti obrazovky. Implementácia Backstretch pluginu je veľmi jednoduchá. Medzi head tagmi pridáme script tagy ktoré odkazujú na tento plugin (samozrejme netreba zabudnúť na link na knižnicu jQuery), ktorý sa môže nachádzať ako súbor na lokálnom počítači/serveri, alebo pridáme odkaz na CDN link (CDN = Content Delivery Network = sieť pre doručovanie obsahu) s týmto súborom ako to vidno v nasledujúcej ukážke kódu:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script> </head> <body> </body> </html>
CDN link je link na súbor nachádzajúci sa na cudzom serveri, ktorý obsahuje kód Backstrech pluginu, resp. jQuery knižnice. Dobre známou výhodou CDN linku na tento plugin a aj na samotnú knižnicu JQuery je predovšetkým v tom, že sa tieto súbory ukladajú do cache pamäte prehliadača, čo zrýchľuje načítanie stránky. Preto uprednostňujem skôr tento spôsob. Nasledujúca implementácia backstretch pluginu vyzerá takto:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
</head>
<body>
<script>
$.backstretch([
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg"
], {
fade: 1500,
duration: 3000
</script>
</body>
</html>
Medzi script tagmi v HTML dokumente (alebo v externom súbore s koncovkou .js) zavoláme Backstretch plugin a pridáme mu parametre. Prvým parametrom je link na obrázok, resp. obrázky ktoré sa majú navzájom prelínať. Vo vyobrazenom kóde sú linky na obrázky 1.jpg až 6.jpg, ktoré sa nachádzajú v priečinku s nazvom images. Ďalšími parametrami su fade a duration. Fade (zmiznutie) je parameter, ktorý stanovuje časový interval počas ktorého sa bude obrázok vytrácať a zároveň nahradzovat nasledujúcim obrázkom. Čas sa stanuje v milisekundách, teda 1500 ms znamená 1,5 sekundy. Druhým parametrom je duration (trvanie), ktoré určuje dĺžku časového intervalu počas ktorého sa obrázok bude zobrazovať bez akýchkoľvek zmien. Vo vyššie uvedenom príklade je tento interval stanovený na 3000 ms, t.j. 3s.
Je tiež možné ponechať v tomto kóde link len na jeden obrazok. Na pozadí síce nebude prebiehať slideshow, obrázok na pozadí webstránky ale bude pri zmene veľkosti okna prehliadača plne responzívny. V takomto prípade stačí len tento kratky kód, nastavovanie ďalších parametrov pre čas vymiznutia a trvania (fade a duration) sa stáva zbytočným:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script> </head> <body> <script> $.backstretch([ "images/1.jpg" ]); </script> </body> </html>
Demo ukážka so slideshow je k nahliadnutiu tu.
Demo ukážka len s jedným obrazkom na pozadí tu.
(V demo ukážkach som pridal do stredu stránky ešte div box)