JavaScript files:
- /charts/ – script for canvas charts animating
- /counters/ – Files needed for initialising the animation number after loading pages.
- /ct-mediaSection/ – Media sections where we can add parralax, kenburns or video to the section. Dynamical content of medias.
- /datetime-picker/ -Scripts for choosing the date from small calendar and attaching it to the input form.
- /gmaps/ – Plugin needed for displaying google map on the page.
- /headroom/ – Animated/fixed navbars. Plugin needed for detecting scrollbar and attaching animations for menu.
- /magnificpopup/ – Needed for galleries and their popups images where we can review them with slides via arrows.
- /onepager/ – scripts for onepager.html only
- /portfolio/ – scripts for gallery isotope
- /progressbars/ – files needed for initialising the animation bars after loading pages
- /progressicons/ – files needed for initialising the animation icons after loading pages
- /selectize/ – Plugin which creates select box for select tag in the page. It generates html code via javascript so that each browser can have the same select box.
- /slick/ – Files which initialize sliders in the page.
- /external.js/ – One big file where are minifixed javascript files:_ 1.jquery 2.boostrap 3.placeholder 4. easing 5. device.min.js 6. jquery browser 7.Snap min JS 8. jquery appear_
- /main.js/ – The main javascript initializaions and other major snippets.
Screenshot
Google Map (GMAP3 Plugin)
This is google map with custom marker, you can define couple parameters:
- data-location – address to show
- data-height – map height (if undefined height will be 220px)
- data-offset – by how many map should be repositioned from marker center point (default -30)
It uses gmap3 plugin.
Documentation: here
HTML Markup:
1 |
<span class="html-tag"><div <span class="html-attribute-name">class</span>="<span class="html-attribute-value">ct-googleMap</span>" <span class="html-attribute-name">data-location</span>="<span class="html-attribute-value">54.3178115,16.5529038</span>" <span class="html-attribute-name">data-height</span>="<span class="html-attribute-value">415</span>" <span class="html-attribute-name">data-zoom</span>="<span class="html-attribute-value">10</span>" <span class="html-attribute-name">data-marker</span>="<span class="html-attribute-value">false</span>" <span class="html-attribute-name">data-mapImage</span>="<span class="html-attribute-value">./assets/images/demo-content/map-image.png</span>"></span><span class="html-tag"></div></span> |
All javascript code can be found in js/main.js file.
jquery.appear
This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if (jQuery().appear) { if (device.mobile()) { // disable animation on mobile jQuery("body").removeClass("withAnimation"); } else { jQuery('.withAnimation .animated').appear(function () { jQuery(this).each(function () { jQuery(this).addClass('activate'); jQuery(this).addClass($(this).data('fx')); }); }, {accY: -150}); } } |
Charts.js
This plugin is used to make graphics.
Documentation: http://www.chartjs.org/