Změna velikosti písma

Drobečková navigace

CSS blog > Animace s textem

Animace s textem



HTML

<script src="//cdn.antee.cz/jQuery_Cycle/jquery.cycle.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').before('<div id="navigace">').cycle({
    fx: 'fade',timeout: 8000, pause: 1, next: '#next', prev: '#prev', pager: '#navigace', startingSlide: Math.floor(Math.random()*3) //
});
});
</script>
<div id="animace">
<div id="slideshow">
    <div class="slideshowSlide">
        <a href="http://ipopage/?oid=2874125" title="název stránky"><img src="image.php?nid=11524&amp;oid=3174084" alt="název stránky" width="610" height="200"></a>
        <div class="slideText">
            <h2><a href="http://ipopage/?oid=2874125" title="text">Text</a></h2>
            <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
            <a class="slideMore" href="http://ipopage/?oid=2874125" title="více">více</a>
        </div>
    </div>
    <div class="slideshowSlide">
        <a href="http://ipopage/?oid=2874125"title="název stránky"><img src="image.php?nid=11524&amp;oid=3174085" alt="název stránky" width="610" height="200"></a>
        <div class="slideText">
            <h2><a href="http://ipopage/?oid=2874125" title="text">Text</a></h2>
            <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
            <a class="slideMore" href="http://ipopage/?oid=2874125" title="více">více</a>
        </div>
    </div>
    <div class="slideshowSlide">
        <a href="http://ipopage/?oid=2874125" title="název stránky"><img src="image.php?nid=11524&amp;oid=3174086" alt="název stránky" width="610" height="200"></a>
        <div class="slideText">
            <h2><a href="http://ipopage/?oid=2874125" title="text">Text</a></h2>
            <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
            <a class="slideMore" href="http://ipopage/?oid=2874125" title="více">více</a>
        </div>
    </div>
  </div>
  <div id="navMore">
    <a id="prev" href="#">Další</a>
    <a id="next" href="#">Předchozí</a>
  </div>
</div>

Script pro animaci v horní části je potřeba umístit dle potřeby, takže buď do těla stránky, nebo do HTML v layoutu - zdroje pokud bude animace v hlavičce.

Všechny části maji svou specifickou třídu a lze je upravit jak v HTML, tak v CSS. Z vaší strany je potřeba upravit vždy:

  • texty
  • odkazy (stačí oid stránek pro prolink)
  • názvy stránek v H2 a v odkazech obrázků
  • Je potřeba obrázkům nastavit do HTML width a height. Některé prohlížeče si šířku do 100% nedopočítají a text může skákat na druhý řádek.

CSS

/* animace */
#animace {
  position:relative;
  width:100%;
    background-color:rgba(0,0,0,0.5);
    clear:both;
}
#slideshow {
    width: 100%;
    position: relative;
    clear: both;
    margin-bottom: 20px;
}
/* text animace */
.slideText {
  float: left;
  display: block;
  padding: 10px;
  height: 180px;
  width: 280px;
}
/* text animace - více */
.slideMore {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

/* nastavení barvy nadpisů s odkazem */

.slideText h2 a {
   color: #000000;
}
/* osetreni pro pouze zobrazeni 1. slidu pri nacteni animace */
.slideshowSlide {
  display:none;
}
.slideshowSlide:first-child {
  display:block;
}
/* velikost menicich se obrazku */
.slideshowSlide > a {
  display:block;
  float:left;
}
/* navigace predchozi - dalsi */
#navMore {
    /* nastavit šířku podle šířky obrázků v animaci */
  width: 610px;
  position:absolute;
    /* odsazení zhora pro vertikální centrování */
  top:80px;
    /* nastavit výšku podle výšky posuvníků */
  height:20px;
    z-index:5;
}
/* nastaveni vzhledu tlacitek predchozi - dalsi */
#next, #prev {
  display:block;
  width:20px;
  height:20px;
  background-color:#000000;
  text-indent: -5000em;
  /* background: url('') no-repeat scroll left top transparent; */
}
#prev {
  float:left;
}
#next {
  float:right;
}
/* prepinac slidu v dolni casti */
#navigace {
  position:absolute;
    /* odsazení zhora - je možné nahradit za bottom: ..px; */
  top: 170px;
    /* nastavit šířku podle šířky obrázků v animaci */
  width:610px;
  text-align: center;
  z-index:5;
}
#navigace a {
  color: #000000;
  margin-left:10px;
  text-decoration: underline;
  font-size: 1.2em;
}
#navigace a:first-child {
  margin-left:0;
}
/* nastaveni vzhledu aktivniho prepinace */
#navigace a.activeSlide {
  font-weight: bold;
  font-size:1.4em;
}

Pro Vaše potřeby můžete změnit umístění a vzhled navigací, pozadí celé animace a pozadí snímků (velikost 610x200). Animace je vytvořena na míru, proto její použití není zcela univerzální. Můžete ale svou animaci přizpůsobit a změnit v CSS.

Příklad použití v praxi

Jako příklad použití v praxi můžete obdobnou animaci najít např. na http://www.equitana.cz/


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