Light Template is a modern multipurposes template. It can be used by a creative agency, a coorporate compagny or as personal portfolio for a freelancer .
The template is responsive, so you can view it also in the mobile/tablets devices and it looks very in thoose devices.
All the html ,css, javascript code are well organized and commented to make any change easy to do without any problems.
The template have :
The images used in this template are not included with the main purchased files, due to licensing, they are only used for the preview purposes.
The template is powred by a cool animations including text animation in the header to display animated caption or what ever you want as an important text.
The setup is very easy just wrap the text you want to rotate with span or what ever markup you want and add the class=”rotate” and that is it. Make sure the words inside this markup are separated by commas. You can see an example below :
HTML Markup :
<p class="rotate">sample text, sample text, sample text, sample text</p>
JS
$(".rotate").textrotator({animation:"spin",separator:",",speed: 2000});
More information about the usage of this lovely plugin by going to this link below
http://www.onextrapixel.com/2013/08/27/super-simple-text-rotator-with-almost-no-effort-required/
The skills are displayed nicely as circular charts that are powred by a nice plugin called easy pie charts
http://github.com/rendro/easy-pie-chart/
To change the color, the width of the charts open script.js and go to this section then change the values there by the value that you want
//---------------------------------- Skills charts -------------------------//
$(function() {
$('.chart').easyPieChart({
animate: 2000,
scaleColor: false,
lineWidth : 2,
trackColor : "#efefef",
barColor : "#1fb4da",
size : 160
});
});
//---------------------------------- End skills charts -----------------------//
The site is powred by animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
The setup of the animations is described as below :
Add the class animated to an element, along with any of the animation names, this is the simple way but you can make some advanced setup by combining css with jquery as been done in this template :
$('.animated').appear();
$(document.body).on('appear', '.pl', function() {
$(this).each(function(){
$(this).addClass('pulse')
$(this).addClass('appeared');
});
});
$(document.body).on('appear', '.flip', function() {
$(this).each(function(){
$(this).addClass('flipInX')
$(this).addClass('appeared');
});
});
$(document.body).on('appear', '.flipIn', function() {
$(this).each(function(){
$(this).addClass('flipInY');
$(this).addClass('appeared');
return false;
});
});
$(document.body).on('appear', '.right', function() {
$(this).each(function(){
$(this).addClass('fadeInRight');
$(this).addClass('appeared')
});
});
$(document.body).on('appear', '.left', function() {
$(this).each(function(){
$(this).addClass('fadeInLeft');
$(this).addClass('appeared')
});
});
$(document.body).on('appear', '.up', function() {
$(this).each(function(){
$(this).addClass('fadeInUp');
$(this).addClass('appeared')
});
});
For more information refer to this links :
https://github.com/daneden/animate.css
If you don't like the animation of the elements of the site you can remove an stick with the static version of the site , to that open script.js and remove this section below :
//---------------------------------- Site elements animations -------------------------//
$('.animated').appear();
$(document.body).on('appear', '.pl', function() {
$(this).each(function(){
$(this).addClass('pulse')
$(this).addClass('appeared');
});
});
$(document.body).on('appear', '.flip', function() {
$(this).each(function(){
$(this).addClass('flipInX')
$(this).addClass('appeared');
});
});
$(document.body).on('appear', '.flipIn', function() {
$(this).each(function(){
$(this).addClass('flipInY');
$(this).addClass('appeared');
return false;
});
});
$(document.body).on('appear', '.right', function() {
$(this).each(function(){
$(this).addClass('fadeInRight');
$(this).addClass('appeared')
});
});
$(document.body).on('appear', '.left', function() {
$(this).each(function(){
$(this).addClass('fadeInLeft');
$(this).addClass('appeared')
});
});
$(document.body).on('appear', '.up', function() {
$(this).each(function(){
$(this).addClass('fadeInUp');
$(this).addClass('appeared')
});
});
//---------------------------------- End site elements animations---------------------//
And remove also the animated. from the header of the index.html
The script.js file contain all the jabascript that power the template, here you can change any settings you want if you have enough javascript skills.
//------------------------------------- Waiting for the entire site to load ------------------------------------------------//
jQuery(window).load(function() {
jQuery("#loaderInner").fadeOut();
jQuery("#loader").delay(400).fadeOut("slow");
jQuery("#loaderInner p").removeClass("loading");
});
$(document).ready(function(){
//------------------------------------- Navigation setup ------------------------------------------------//
//--------- Scroll navigation ---------------//
$("#mainNav ul a, .logo a, .top a, .moreBtn a, .shortContact a").click(function(event){
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
$('html,body').animate({scrollTop:target_top -110}, 800);
});
//-------------Highlight the current section in the navigation bar------------//
var sections = $("section");
var navigation_links = $("#mainNav a");
sections.waypoint({
handler: function(event, direction) {
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('#mainNav a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("active");
active_link.addClass("active");
},
offset: '35%'
});
//------------------------------------- End navigation setup ------------------------------------------------//
//---------------------------------- Clients animation-----------------------------------------//
$('.clientList a').css({opacity:0.5});
$('.clientList a').hover( function(){
$(this).stop().animate({opacity:"1"}, 100, 'easeOutQuint');
}, function(){
$(this).stop().animate({opacity:"0.5"}, 100, 'easeOutQuint');
});
//---------------------------------- End clients animation-----------------------------------------//
//--------------------------------- Hover animation for the elements of the portfolio --------------------------------//
$(".link").css({ opacity: 0 });
$('.item').hover( function(){
$(this).children('.link ').animate({ opacity: 1 }, 'fast');
}, function(){
$(this).children('.link ').animate({ opacity: 0 }, 'slow');
});
//--------------------------------- End hover animation for the elements of the portfolio --------------------------------//
//-----------------------------------Initilaizing fancybox for the portfolio-------------------------------------------------//
$('.portfolio a.folio').fancybox({
'overlayShow' : true,
'opacity' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'overlayOpacity' : 0.8
});
//-----------------------------------End initilaizing fancybox for the portfolio-------------------------------------------------//
//--------------------------------- Sorting portfolio elements with quicksand plugin --------------------------------//
var $portfolioClone = $('.portfolio').clone();
$('.filter a').click(function(e){
$('.filter li').removeClass('current');
var $filterClass = $(this).parent().attr('class');
if ( $filterClass == 'all' ) {
var $filteredPortfolio = $portfolioClone.find('li');
} else {
var $filteredPortfolio = $portfolioClone.find('li[data-type~=' + $filterClass + ']');
}
$('.portfolio').quicksand( $filteredPortfolio, {
duration: 800,
easing: 'easeInOutQuad'
},
function(){
$('.item').hover( function(){
$(this).children('.link').animate({ opacity: 1 }, 'fast');
}, function(){
$(this).children('.link').animate({ opacity: 0 }, 'slow');
});
$('.portfolio li').addClass('appeared');
$('.portfolio li').removeClass('animated');
//------------------------------ Reinitilaizing fancybox for the new cloned elements of the portfolio----------------------------//
$('.portfolio a.folio').fancybox({
'overlayShow' : true,
'opacity' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'overlayOpacity' : 0.8
});
//-------------------------- End reinitilaizing fancybox for the new cloned elements of the portfolio ----------------------------//
});
$(this).parent().addClass('current');
e.preventDefault();
});
//--------------------------------- End sorting portfolio elements with quicksand plugin--------------------------------//
//---------------------------------- Form validation-----------------------------------------//
$('#submit').click(function(){
$('input#name').removeClass("errorForm");
$('textarea#message').removeClass("errorForm");
$('input#email').removeClass("errorForm");
var error = false;
var name = $('input#name').val();
if(name == "" || name == " ") {
error = true;
$('input#name').addClass("errorForm");
}
var msg = $('textarea#message').val();
if(msg == "" || msg == " ") {
error = true;
$('textarea#message').addClass("errorForm");
}
var email_compare = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
var email = $('input#email').val();
if (email == "" || email == " ") {
$('input#email').addClass("errorForm");
error = true;
}else if (!email_compare.test(email)) {
$('input#email').addClass("errorForm");
error = true;
}
if(error == true) {
return false;
}
var data_string = $('.contactForm form').serialize();
$.ajax({
type: "POST",
url: $('.contactForm form').attr('action'),
data: data_string,
success: function(message) {
if(message == 'SENDING'){
$('#success').fadeIn('slow');
}
else{
$('#error').fadeIn('slow');
}
}
});
return false;
});
//---------------------------------- End form validation-----------------------------------------//
//--------------------------------- Mobile menu --------------------------------//
var fade=false;
$('.mobileBtn').click(function() {
if(fade==false){
$('#mainNav ul').slideDown("slow");
fade=true;
return false;
}else{
$('#mainNav ul').slideUp("faste");
fade=false;
return false;
}
});
//--------------------------------- End mobile menu --------------------------------//
//--------------------------------- Parallax --------------------------------//
$(".testimoniaContainer").parallax("100%", 0.3);
$(".clientContainer").parallax("100%", 0.3);
$(".infoContainer").parallax("100%", 0.3);
//--------------------------------- End parallax --------------------------------//
//--------------------------------- Accordion --------------------------------//
$( "#tabs" ).tabs();
$( "#accordion" ).accordion();
var selectedEffect = $( "#effectTypes" ).val();
var link = $("#button")
var options = {};
if ( selectedEffect === "slide" ) {
options = { percent: 0 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
$( "#effect" ).toggle( selectedEffect, options, 500 );
//--------------------------------- End accordion --------------------------------//
//---------------------------------- Skills charts -----------------------------------------//
$(function() {
$('.chart').easyPieChart({
animate: 2000,
scaleColor: false,
lineWidth : 2,
trackColor : "#efefef",
barColor : "#1fb4da",
size : 160
});
});
//---------------------------------- End skills charts -----------------------------------------//
//---------------------------------- Testimonials -----------------------------------------//
$('.testimoniaContainer').slides({
preload: false,
generateNextPrev: false,
play: 6500,
container: 'testimonialContent'
});
//---------------------------------- End testimonial -----------------------------------------//
//---------------------------------- Text animation -----------------------------------------//
$(".rotate").textrotator({
animation: "fade",
separator: ",",
speed: 2000
});
$(".loading").textrotator({
animation: "fade",
speed: 1000
});
//---------------------------------- End text animation -----------------------------------------//
//---------------------------------- Site elements animations -----------------------------------------//
$('.animated').appear();
$(document.body).on('appear', '.pl', function() {
$(this).each(function(){
$(this).addClass('pulse')
$(this).addClass('appeared');
});
});
$(document.body).on('appear', '.flip', function() {
$(this).each(function(){
$(this).addClass('flipInX')
$(this).addClass('appeared');
});
});
$(document.body).on('appear', '.flipIn', function() {
$(this).each(function(){
$(this).addClass('flipInY');
$(this).addClass('appeared');
return false;
});
});
$(document.body).on('appear', '.right', function() {
$(this).each(function(){
$(this).addClass('fadeInRight');
$(this).addClass('appeared')
});
});
$(document.body).on('appear', '.left', function() {
$(this).each(function(){
$(this).addClass('fadeInLeft');
$(this).addClass('appeared')
});
});
$(document.body).on('appear', '.up', function() {
$(this).each(function(){
$(this).addClass('fadeInUp');
$(this).addClass('appeared')
});
});
//---------------------------------- End site elements animations-----------------------------------------//
});
Light come whith a good to go ajax contact form ready to use, you have to replace the adress of the recipient in the send.php file by your adresse.
To do that open the send.php file located in the main download file in any editor of your choice and go to the line 32 and change the adress by your adresse.
If you don't have enough html skills to do the changes that you want please send me an email via my profile page http://themeforest.net/user/Benaissa and i will help you as soon as i can.
Thanks
Benaissa Ghrib.