Internetové služby

 

Panorama 360° animace s javascriptem css a html

Možná jste již někdy zatoužili dát si na stránky animovaný panoramatický obrázek svého oblíbeného místa, nebo vytváříte prezentaci a nechcete při animaci bannerů ztrácet čas s pronikáním do tajů konfigurace některého z frameworků nebo do některé z nepřeberného množstvi javascriptových knihoven. Pak je tato ukázka určena právě pro Vás a její implementaci do vlastního kódu ať již pochopením napsaného, nebo metodou copy+paste zvládne opravdu každý.

S vytvořením samotného panoramatického obrázku Vám tu nepomůžu, jen popřeji dostatečně široké sklo, pevný stativ a především dobré světlo. Aplikací na poskládání panoramatu je netu spousta i ve free verzích a jistě si některou snadno najdete. Kódy na této stránce se zabývají jen jeho rozpohybováním cestou nejmenšího odporu a vytvořením dojmu virtuální prohlídky.

Co se samotných kódů týká, stojí za zmínku snad jen to, že pokud používáte W3C validátor tak pro CSS3 je implenentován pouze prefix -webkit, což sice pro většinu prohlížečů dostačuje, ale dle Vaší cílové skupiny doporučuji zvážit užití ostatních, které vaše CSS udělají z pohledu implmentace W3C nevalidní. Pro úplnost však v příkladu uvádím i tyto "nevalidní" prefixy.

panorama.zip download

-- G --

HTML:

<div id="pan"> <div id="wrapper"></div> <div id="mask"> <div class="bac"></div> <div class="logo"></div> <div class="remote stop"></div> </div> </div>

CSS:

#pan{ position:relative; width:720px; height:250px; margin:90px auto; } #wrapper { background: url("cit1.jpg") repeat-x 0 0; width:100%; height:100%; position:absolute; top:0; left:0; -khtml-border-radius: 18px; -o-border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } #mask,#mask .bac,#mask .logo{ position:absolute; top:0; left:0; width:100%; height:40px; z-index:2; } #mask .bac,#mask .logo{ position:absolute; top:0; left:0; background:white; } #mask .logo{ background:url("panorama/logo130is.png") no-repeat 20px 10px; } #mask .bac{ -webkit-opacity:.4; -o-opacity:.4; -khtml-opacity:.4; -moz-opacity:.4; opacity:.4; z-index:-1; } #mask .remote{ position:absolute; width:20px; height:20px; top:10px; right:15px; z-index:2; cursor:pointer; } #mask .stop{ background:url("pause.png") no-repeat; } #mask .play{ background:url("play.png") no-repeat; }

Javascript:

window.onload=init; function init(){ document.getElementById("mask").getElementsByTagName("div")[2] .onclick=function(){anim('',this)}; anim(); } var animace; function anim(pos,t){ var step = 20; var wrap = document.getElementById("wrapper"); if(t){ if(t.className=="remote stop"){ clearTimeout(animace); t.className="remote play"; return false; }else{ var position = (wrap.style.backgroundPosition.split(' ')); var horiz = (position[0].replace(/[^0-9.]*/g, '')); animace = setTimeout(function(){anim((horiz*1))}, step); t.className="remote stop"; return false; } } if(!pos)var pos = 0; wrap.style.backgroundPosition = "-"+pos+"px 0"; animace = setTimeout(function(){anim((pos+.5))}, step); }
 
©2009-2015  INTERNETOVÉ SLUŽBY