4 Wrz 2019

Animowany baner

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>

Teraz odpowiedni styl do wyświetlenia tego zdjęcia centralnie.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  padding: 0 20px;
}

.image-bgr {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 220px;
  overflow: hidden;
  margin: auto;
}

.image-bgr img {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Najważniejsze klasy to w naszym przykładzie „.image-bgr” oraz „.image-bgr img”
Pierwsza klasa tworzy box o wymiarach max 900px i min wysokości 220px.
Do tego posiada właściwość overflow hidden aby ukryć wszystko co wystaję poza obwód boxa.
Druga klasa, a dokładnie ta sam tylko że z elementem img dotyczy zdjęcia. Zdjęcie to ustawiamy jako position absolute. Centrujemy je tak aby było maksymalnie ustawione na 100% szerokości boxa. Do tego zdjęcie jest centrowane w pionie.

Teraz cześć najważniejsza – javascript

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>