4 Wrz 2019

Animowany baner w js

animowany baner w js

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>
27 Kwi 2016

Obrót strony o losową liczbę stopni

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>