Změna velikosti písma

Drobečková navigace

CSS blog > Animace - reference

Animace - reference



> <

Lorem Ipsum 1

lorem ipsum lorem ipsum

loremipsum.cz

Lorem Ipsum 2

lorem ipsum lorem ipsum

loremipsum.cz

Lorem Ipsum 3

lorem ipsum lorem ipsum

loremipsum.cz

HTML

<p>
<script type="text/javascript" src="https://cdn.antee.cz/jQuery_Cycle/jquery.cycle.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#slideshowRef').cycle({
    fx: 'fade',timeout: 8000, pause: 1, next: '#nextRef', prev: '#prevRef', startingSlide: Math.floor(Math.random()*3) //
});
});
// ]]></script>
</p>
<div id="slideRefNav"><a id="nextRef" href="#">&gt;</a> <a id="prevRef" href="#">&lt;</a></div>
<div id="slideshowRef">
<div class="slide"><a title="" href="#"><img src="image.php?nid=11524&amp;oid=3181037" alt=""></a>
<div class="slideBox">
<h2>Lorem Ipsum 1</h2>
<p>lorem ipsum lorem ipsum</p>
<p><a href="#">loremipsum.cz</a></p>
</div>
</div>
<div class="slide"><a title="" href="https://ipoadmin.antee.cz/"><img src="image.php?nid=11524&amp;oid=3181038" alt=""></a>
<div class="slideBox">
<h2>Lorem Ipsum 2</h2>
<p>lorem ipsum lorem ipsum</p>
<p><a href="#">loremipsum.cz</a></p>
</div>
</div>
<div class="slide"><a title="" href="https://ipoadmin.antee.cz/"><img src="image.php?nid=11524&amp;oid=3181039" alt=""></a>
<div class="slideBox">
<h2>Lorem Ipsum 3</h2>
<p>lorem ipsum lorem ipsum</p>
<p><a href="#">loremipsum.cz</a></p>
</div>
</div>
</div>

Animace je opět šitá na míru s rozměry, nicméně v případě zvolení jiných rozměrů pro obrázky je potřeba upravit ještě šířky/výšky v CSS. Texty se zobrazují až po najetí myši a lze je libovolně měnit. Délka textů je omezená 100px na výšku (lze zvýšit), proto je vhodné vkládat jen název reference/akce + jednoduchý popis o jakou referenci / akci se jedná + odkaz.

CSS

/* animace reference */
#slideshowRef {
  position:relative;
    width:400px;
}
/* text po najetí myši */
.slideBox {
  display:none;
  position:absolute;
  right:0;
  bottom:0;
  width:380px;
  height: 100px;
  padding:10px;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.5);
}
/* tlačítka předchozí / další */
#slideRefNav {
 width: 400px;
    height:30px;
    margin-bottom:10px;
}
#slideRefNav a {
    float:right;
    display:block;
    margin-left:10px;
    text-decoration:none;
    font-size:2em;
    width:30px;
    text-align:center;
    height:30px;
    font-weight:bold;
    color:#999999;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    background-color:#FFFFFF;
    background-color:rgba(255,255,255,0.7);
    position:relative;
    behavior:url(js/PIE.htc);    
}
#slideRefNav a:hover {
    background-color:rgba(255,255,255,1);
}
/* zobrazení textu po najetí myši */
.slideBox:hover {
    display:block;
}
.slide a:hover + .slideBox {
  display:block;
}
/* omezeni zobrazení pouze prvniho slidu */
#slideshowRef .slide {
    display:none;
}
#slideshowRef .slide:first-child {
    display:block;
}
/* konec animace reference */

Při zvolení jiných rozměrů obrázků je potřeba upravit šířku animace v CSS (#slideshowRef).


Kalendář akcí

Po Út St Čt So Ne
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 1 2 3 4