Czy, więc masz się chwalić? W książce wymieniam wiele różnych opcji, ale przykładowo możesz się pochwalić, że:
- wypijacie z klientami 3000 litrów kawy rocznie
- realizujesz 3 duże projekty w tygodniu
- zasadziłeś 100 drzew w parku
- odpowiadasz na maile w czasie poniżej 60 minut
Opcji masz nieskończenie dużo, ogranicza Cię tylko Twoja wyobraźnia, kreatywność i branża w jakiej działasz.
Dzisiaj chciałbym Ci pokazać w jaki sposób zwrócić uwagę klienta wchodzącego na Twoją stronę internetową na wspomniane wyżej liczby. Jednym z lepszych sposobów na ich ekspozycję jest wykorzystanie animowanych liczników, które od 0 odliczają do konkretnej liczby. Dzięki wykorzystaniu takiego rozwiązania osoba odwiedzająca stronę zobaczy ruch (ruch cyferek) i musi skierować tam swój wzrok (no tak już jesteśmy skonstruowani, że reagujemy na ruch).
Przykład wykorzystania takiego licznika znajdziesz na stronie www.reklamowe.teczki.net gdzie chwalimy się, ile realizujemy projektów i ile drukujemy.
OK, przejdźmy zatem do działania - jak zrobić taki animowany licznik na Twoje stronie.
- Musisz dołożyć do swojej strony bibliotekę jquery.js (jeśli jeszcze nie korzystasz), najlepiej skorzystać z zawsze aktualnej:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> - W miejscu, w którym chcesz wyświetlić licznik wpisujesz przykładowy kod:
<div id="shiva"><span class="count">200</span></div> - W dowolnym miejscu swojego szablonu strony dodaj kod JS, który będzie odpowiadał za animację:
<script>
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});</script> -
Teraz już tylko należy dodać odpowiedni CSS, żeby wszystko ładnie ostylować np.:
#shiva
{
width: 100px;
height: 100px;
background: red;
border-radius: 50px;
border-radius: 50px;
border-radius: 50px;
float:left;
margin:5px;
}
.count
{
line-height: 100px;
color:white;
margin-left:30px;
font-size:25px;
}
Demo zastosowania powyższego kodu możesz zobaczyć tutaj: http://codepen.io/shivasurya/pen/FatiB
Część praktyczna artykułu powstała na bazie wpisu Shiva Surya
