Tworzymy animowany kalendarz

Tworzymy animowany kalendarz
3 May 2014

W dzisiejszym poradniku tworzymy animowany kalendarz który z pewnością urozmaici twoją stronę. Kalendarz z tego tutoriala jest na 2014 rok, jednak nic nie stoi na przeszkodzie aby poprzestawiać trochę dni i zrobić na każdy inny rok. Kalendarzyk jest prosty w tworzeniu, wiec jeśli ktoś by chciał go użyć np. jako wtyczkę do WordPressa, to nie powinien mieć z tym problemu. Tak wiec, jeśli jesteś zainteresowany takim kalendarzykiem – zapraszam Cię do lektury. Kalendarzyk wygląda jak każdy inny, z tą różnicą, że każdy kolejny miesiąc przerzucamy jak normalną kartkę. Animację te oczywiście możemy wykorzystać w inny sposób – ostatni raz użyłem go w projekcie dla firmy ACANTHUS, gdzie “media” otwierają się w postaci gazetki –  jednak najlepsze są praktyczne rozwiązania, tak więc do dzieła 🙂 Oczywiście jeśli chcesz zobaczyć, co będziemy robić, w linku poniżej umieściłem gotową stronę do poglądu. [button url=”http://demo.wojtek1150.com/CalendarBook” target=”blank” size=”6″ center=”yes” icon=”icon: flask”]DEMO[/button] Zanim zaczniemy potrzebne Ci będą te biblioteczki:

  • modernizr
  • Jquery 1.9.1
  • jquery.bookblock

Wszystkie te pliczki znajdziesz w katalogu js w źródłach, które są zamieszczone na końcu artykułu. Jeśli już masz wszystko gotowe, to zaczynamy. Zacznijmy od HTML’a, główna struktura kodu wygląda tak:

<div id="bb-bookblock" class="bb-bookblock">
  <div class="bb-item">
    <!-- Jakaś treść -->
  </div>
</div>

Aby dodać kolejne miesiące powielamy tą treść:

<div class="bb-item">
 <img class="cal-image" src="images/image1.jpg" alt="image01"/>
 <div class="fc-calendar-wrap">
 <h2>Styczeń 2014</h2>
 <div class="fc-calendar-container">
 <div class="fc-calendar fc-five-rows">
 <div class="fc-head"><div>Poniedziałek</div><div>Wtorek</div><div>Środa</div><div>Czwartek</div><div>Piątek</div><div>Sobota</div><div>Niedziela</div></div>
 <div class="fc-body">
 <div class="fc-row">
 <div></div>
 <div></div>
 <div><span class="fc-date">1</span><span class="fc-weekday">Śr</span></div>
 <div><span class="fc-date">2</span><span class="fc-weekday">Cz</span></div>
 <div><span class="fc-date">3</span><span class="fc-weekday">Pt</span></div>
 <div><span class="fc-date">4</span><span class="fc-weekday">Sb</span></div>
 <div><span class="fc-date">5</span><span class="fc-weekday">Ni</span></div>
 </div>
 <div class="fc-row">
 <div><span class="fc-date">6</span><span class="fc-weekday">Pn</span></div>
 <div><span class="fc-date">7</span><span class="fc-weekday">Wt</span></div>
 <div><span class="fc-date">8</span><span class="fc-weekday">Śr</span></div>
 <div><span class="fc-date">9</span><span class="fc-weekday">Cz</span></div>
 <div><span class="fc-date">10</span><span class="fc-weekday">Pt</span></div>
 <div><span class="fc-date">11</span><span class="fc-weekday">Sb</span></div>
 <div><span class="fc-date">12</span><span class="fc-weekday">Ni</span></div>
 </div>
 <div class="fc-row">
 <div><span class="fc-date">13</span><span class="fc-weekday">Pn</span></div>
 <div><span class="fc-date">14</span><span class="fc-weekday">Wt</span></div>
 <div><span class="fc-date">15</span><span class="fc-weekday">Śr</span></div>
 <div><span class="fc-date">16</span><span class="fc-weekday">Cz</span></div>
 <div><span class="fc-date">17</span><span class="fc-weekday">Pt</span></div>
 <div><span class="fc-date">18</span><span class="fc-weekday">Sb</span></div>
 <div><span class="fc-date">19</span><span class="fc-weekday">Ni</span></div>
 </div>
 <div class="fc-row">
 <div><span class="fc-date">20</span><span class="fc-weekday">Pn</span></div>
 <div><span class="fc-date">21</span><span class="fc-weekday">Wt</span></div>
 <div><span class="fc-date">22</span><span class="fc-weekday">Śr</span></div>
 <div><span class="fc-date">23</span><span class="fc-weekday">Cz</span></div>
 <div><span class="fc-date">24</span><span class="fc-weekday">Pt</span></div>
 <div><span class="fc-date">25</span><span class="fc-weekday">Sb</span></div>
 <div><span class="fc-date">26</span><span class="fc-weekday">Ni</span></div>
 </div>
 <div class="fc-row">
 <div><span class="fc-date">27</span><span class="fc-weekday">Pn</span></div>
 <div><span class="fc-date">28</span><span class="fc-weekday">Wt</span></div>
 <div><span class="fc-date">29</span><span class="fc-weekday">Śr</span></div>
 <div><span class="fc-date">30</span><span class="fc-weekday">Cz</span></div>
 <div><span class="fc-date">31</span><span class="fc-weekday">Pt</span></div>
 <div></div>
 <div></div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

Gdy już mamy wszystkie miesiące przygotowane, to możemy przejść do ostylowania naszego kalendarza, którego kodu jest prawie 400 linijek, wiec pozwoliłem sobie na dołączenie odpowiednich komentarzy w pliku component.css, w którym znajdziecie tylko opcje do poprawnego wyświetlenia kalendarzyka, tak więc bez zbędnego kodu 🙂 Gdy już mamy gotową stronę i ostylowaną możemy kończyć dzieło, czyli JavaScript:

var Page = (function() {
	var config = { // Ustalenie zmiennych
		$bookBlock : $( '#bb-bookblock' ),
			$navNext : $( '#bb-nav-next' ),
			$navPrev : $( '#bb-nav-prev' )
		},
		init = function() { 
			config.$bookBlock.bookblock( { // Ustawienia pluginu
				orientation : 'horizontal',
				speed : 700
			} );
			initEvents();
		},
		initEvents = function() { // Przypisanie sterowania
			config.$navNext.on( 'click touchstart', function() {
				config.$bookBlock.bookblock( 'next' );
				return false;
			} );
			config.$navPrev.on( 'click touchstart', function() {
				config.$bookBlock.bookblock( 'prev' );
				return false;
			} );
		};
		return { init : init }; // Zwracamy init, abyśmy mogli tą funkcję wywołać poniżej
})();

Całość wywołujemy poprzez:

Page.init();

Dodatkowe informacje od autora pluginu, czyli opcje i odwołania: Opcje:

// vertical or horizontal flip
orientation : 'vertical',
 
// ltr (left to right) or rtl (right to left)
direction : 'ltr',
 
// speed for the flip transition in ms.
speed : 1000,
 
// easing for the flip transition.
easing : 'ease-in-out',
 
// if set to true, both the flipping page and the sides will have an overlay to simulate shadows
shadows : true,
 
// opacity value for the "shadow" on both sides (when the flipping page is over it).
// value : 0.1 - 1
shadowSides : 0.2,
 
// opacity value for the "shadow" on the flipping page (while it is flipping).
// value : 0.1 - 1
shadowFlip : 0.1,
 
// if we should show the first item after reaching the end.
circular : false,
 
// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
nextEl : '',
 
// if we want to specify a selector that triggers the prev() function.
prevEl : '',
 
// If true it overwrites the circular option to true!
autoplay : false,
 
// time (ms) between page switch, if autoplay is true. 
interval : 3000,
 
// callback after the flip transition.
// page is the current item's index.
// isLimit is true if the current page is the last one (or the first one).
onEndFlip : function( page, isLimit ) { return false; },
 
// callback before the flip transition.
// page is the current item's index.
onBeforeFlip: function( page ) { return false; }

Metody:

  • $( ‘#bb-bookblock’ ).bookblock( ‘next’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘prev’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘jump’, position )
  • $( ‘#bb-bookblock’ ).bookblock( ‘first’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘last’ )

Oczywiście całość możecie pobrać w przygotowanej paczce:

Mam nadzieję, że pomogłem, czekam na wasze komentarze 🙂