Co to jest ten baner, to nic innego zdjęcie znajdujące się w div, które przesuwa się z góry na dół i ponownie na górę i tak w nieskończoność.
Oczywiście nic nas nie ogranicza można dodać np. jakiś tekst 🙂
Najpierw prosty html, na potrzeby tego przykładu kontener będzie centrowany w pionie i poziomie na całej stronie.
<div class="container">
<div class="image-bgr">
<img src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
</div>
</div>PHP:
$rotate_deg = rand(2, 4);
if(time()%3==0) $rotate_deg=180;
$smarty->assign('rotate_deg', $rotate_deg);Smarty, html i css:
!{if $smarty.now%2==0 && $now_date=='04-01'}!
<style>body {overflow-x: hidden;}</style>
<div style="position: fixed; bottom:10px; left:10px; font-size:15px; color:green;">;)</div>
<div style="transform:rotate(!{$rotate_deg}!deg); -webkit-transform:rotate(!{$rotate_deg}!deg); -moz-transform:rotate(!{$rotate_deg}!deg); -o-transform:rotate(!{$rotate_deg}!deg);">
!{else}!
<div>
!{/if}!
..... strona ....
</div>