Thanks for downloading Horizillax! Horizillax is a unique HTML5 theme with which you can create a complex parallax based website in minutes!

The focus of this documentation is to get you set up with your new theme as quickly as possible in an easy-to-follow manner, while also explaining some of the features. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!

Features

HTML5 and CSS3 Validated
Twitter Bootstrap Framework
One Page Design
Responsive Template
Easy to Setup
Multilevel Dropdown Menu
Horizontal Parallax
Smooth Parallax Animation
Unlimited Parallax images
Options to set the position, stack order etc for each Parallax element
Parallax on Mouse Move (option to enable/disable)
Preloader
10 Page Templates
Custom inner page templates for Parallax, About, Portfolio etc
Portfolio (2, 3 and 4 columns layout)
Filterable Portfolio (with jQuery isotope)
Post Formats
4 Color Variations
Clean, Fully commented Code
Font Awesome Icons
Clean, Modern, Flat Design
Includes demo contents and illustrations used in the "live demo"
Extensive Documentation

HTML Files and Structure

Horizillax has fully commented, clean HTML / CSS / jQuery code, to help you understand how it works and what each section is meant for.

HTML Files

index.html - Home Page (this is the same page you see in the live demo)
index-simple.html - Simpler version of the Home Page (helps you get started)
about.html - A detailed page for the About Us section
blog.html - Blog Page with Post Formats
blog-single.html - Single Post Page
portfolio-filterable.html - Filterable Portfolio with jQuery isotope
portfolio.html - Portfolio 3 columns Page
portfolio-2col.html - Portfolio 2 columns Page
portfolio-4col.html - Portfolio 4 columns Page
portfolio-single.html - Portfolio Single Project with details

General HTML Structure

This template has a responsive layout. All of the information within the main content area is nested within a div with a class of "container". The general template structure is the same throughout the template except for the parallax page (index.html). Here is the general structure.

Parallax Page HTML Structure

Here is the structure of the parallax page.

CSS Files

8 CSS files are being used in this theme. I've separated styles for improving convenience to edit this template. If you're going to use this template in production I'd recommend you merge all stylesheets in one file (for decreasing http queries).

The purpose of each stylesheet is mentioned below.

pace-theme-center-simple.css

This contains styles for the preloader. This is used only in the parallax page.

nanoscroller.css

Styles for the custom scroll bars. This is used only in the parallax page.

bootstrap.css

Twitter is the css framework used for this theme. Check out http://getbootstrap.com/ for more details

font-awesome.min.css

Base styles for FontAwesome icon fonts.

bootstrap-social.css

Styles for the social media icons.

style.css

Common css styles for this template.

responsive.css

All styles required for responsiveness is included in this file.

magnific-popup.css

It contains styles for magnific popup plugin (lightbox-like plugin)

blue.css, orange.css, grey.css and green.css

Different color schemes to choose. Include any one from these.

typography.css

This is included in style.css using @import. This contains all font related information.

Lets take a look closely at the files.

jquery-1.11.1.min.js

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.

jquery-migrate-1.1.1.min.js

jQuery Migration Plugin. Adding some deprecated properties.

bootstrap.min.js

Twitter bootstrap plugin

pace.min.js

Plugin for the parallax page preloader

jquery.animate-enhanced.min.js

Enables smooth parallax animations in modern browsers

jquery.nanoscroller.min.js

Custom scroll bar

parallax.elements.js

This is where you define the parallax images

jquery.equalheightcolumns.js

Used to equalise the height of divs

jquery.bxslider.min.js

Responsive slider script

jquery.magnific-popup.min.js

Magnific Popup plugin for viewing images in lightbox-like popup.

jquery.mousewheel.min.js

Plugin to enable mousewheel function

parallax.mousewheel.js

Enables parallax animation on mousewheel/scroll

jquery.touchSwipe.min.js

Plugin to enable touchswipe function for touch enabled devices

parallax.swipe.js

Enables parallax animation on swipe (for iPad and other touch devices)

parallax.keypress.js

Enables parallax animation on key press (right/left arrows)

parallax.js

This is where all the parallax animations and calculations are done

parallax.functions.js

Everything specific to the parallax page goes here

page.functions.js

Everything specific to the inner pages

imagesloaded.pkgd.min.js

Checks if project images are loaded in the portfolio page

isotope.js

Plugin for Portfolio filterable layout.

portfolio.filter.js

Enables filterable portfolio

Three google fonts have been used in this template.

Montserrat
Raleway
PT Sans

You can choose your own combinations from here

There are two types of navigation.

Parallax page navigation
Inner page navigation

In this case, the click on each menu items animates the page.

		
		
 			    
				
					
					
           				
            			
            			
            			
							
            			
            			
            			
         			
         			
         			
                          							
						
							Home
							About Us
							Blog
							
								
								
									Blog List
									Single Post
								
								
								 
							
							Portfolio
								
								
								
									Filterable
									Single Project
									4 Columns
									3 Columns
									2 Columns
								
								
								
							
							Google

Here, when you use id="parallax-menu" for the navigation ul, the menu items are automatically linked and animated to the respective pages based on the order.

If in case, you want to animate each menu item to a specific section, just remove id="parallax-menu" and add the following code to each "a" tag within the "navbar-nav"

  onclick="HORILLAX.ANIM.instance.move(0);"

Replace 0 with the number of the page. Pages are counted from 0 to 1. This means, if you want to animate to the second page add

 onclick="HORILLAX.ANIM.instance.move(1);"

To add a dropdown menu, add the class "dropdown" to the parent li and "dropdown-menu" to the ul.


	Portfolio
								
	
	
		Filterable
		Single Project
		4 Columns
		3 Columns
		2 Columns

If you want to link to an external page or inner page, just remove the class "menu-item" from the li tag

This is same as the parallax page navigation except that the menu items when clicked loads the parallax page and animate to the specified page.

If you notice the following code, you'll see menu items linking to href="index.html?page=1" This means open the parallax page and animate to the second page

	
	
		    
			          
				
					
					
					
						
					
					
				
          		
          		
				
          
					
						Home
						About Us
						Blog
							
							
							
								Blog List
								Single Post
							
							
							
						
						
							Portfolio
							
							
							
								Filterable
								Single Project
								4 Columns
								3 Columns
								2 Columns
							
							
							
						
						Google

All parallax pages are nested within the "parallax-container" div. Each page has a class name "parallax-page"

Remember that the pages are counted from 0. In the above code, home-page is 0, about-page is 1, blog-page is 2 and so on.

The next step is to add js for the pages added above. Open parallax.elements.js and add the following code for each page.

var item = {};
item.name = "#home-page";
item.stackOrder = 99;
item.content = "html";
item.screenPos = ["center","-150%","-250%","-350%"];
item.offsetV = 150;
item.visibility = ["true","true","true","true"];
items.push(item);

The main properties that needs to be changed are listed below.

item.name = "#home-page";

This is the same id of the page, you used in the html. Ensure that each page has a unique name/ID.

item.screenPos = ["center","-150%","-250%","-350%"];

This is the position of the page/content-box on each screen. You'd notice that the number of values given here are equal to the number of pages you added in the html. If you're adding this to the first page, the first value to should be "center". This is to ensure, it's horizontally aligned to the center of the screen. For the second page the value would be something like the code below

item.screenPos = ["150%","center","-150%","-250%"];

With Horizillax you can add any number of pages or parallax elements. As mentioned in the navigation section, as long as you have the id="parallax-menu" for the navbar-nav ul, you don't have to add anything else to activate the animation.

If you want to link a menu item to an external url, just remove the class "menu-item" from the parent li of that specific item. An example code for a simple menu is given below.

	

	Home
	About Us
	Blog
	Portfolio
	horizillax

Adding parallax elements is really easy. Open the parallax.elements.js file. You'll notice that 33 parallax elements have been added. The following code shows how to add a parallax element.

//Parallax Element 1	
var item = {};
item.name = "#tree-right0";
item.stackOrder = 300;
item.content = "image";
item.image = "images/parallax/tree.png";
item.sizes = {w:"634",h:"740"};
item.screenPos = ["73%","-85%","-160%","-235%"];
item.visibility = ["true","true","true","true"];
item.parallaxScene = true;
item.bPos = 0;
item.mouseSpeed = 15;
items.push(item);

You'd notice a few properties in the above code. Let's go through each.

var item = { };

This just means we're defining a new parallax item.

item.name = "#unique-name";

This is the name/ID assigned to the item. Please note that this must be unique. You cannot use the same ID for another element.

item.stackOrder = 300;

Setting the stack order (or z-index in terms of CSS) of the element. If you want to stack an element above the content box, use a value greater than 99 for that particular elemnt.

item.content = "image";

This is just to note that the item is an image. Nothing needs to be changed here.

item.image = "images/parallax/your-image.png";

This is where you enter the path to the parallax image. In this demo all parallax images are placed under "images/parallax"

item.sizes = {w:"634",h:"740"};

Specify the width and height of the image here.

item.screenPos = ["73%","-85%","-160%","-235%"];

This is the most important property. Here you set the position of the element (in percentage) on each screen. In this demo you have 4 pages/screens and that is why the above property has 4 values. If you have five pages, you should provide 5 values.

For example a value 50% in scene 1 moves the image 50% from the left in the first page/scene. In the second scene if you want to move the image further left so that it slides out of the scene use a negative value, lets say -60. The image shown below should give you a better idea on how it works.

item.parallaxScene = true;

This enables parallax animation on mousemove. To disable set the value to false.

And this GIF gives you a rough idea on how the final animation looks like.

item.visibility = ["true","true","true","true"];

This is to ensure that the item is visible on all pages.

item.bPos = 0; or item.tPos = 0;

This is the amount of pixels used to move the element from top or bottom. bPos means bottom position and tPos is the top position. It would be a good idea to align elements like landscape, sea etc to the bottom and clouds, flying birds etc to the top. Please note that you should use either tPos or bPos and not both.

item.mouseSpeed = 15;

The speed of each element on mousemove. Anything between 1-25 would be recommended. If you want the element to move faster, use a greater value.

items.push(item);

This just pushes the items to the array. Nothing needs to be changed here.

In the parallax.elements.js file you'd notice this line of code, where you can change the speed.

var transitionSpeed = 2500;

CSS

Scripts & jQuery Plugins

jQuery http://www.jquery.com/
jQuery modernizr http://modernizr.com/
BxSlider http://bxslider.com/
Respond.js https://github.com/scottjehl/Respond
Magnific Popup http://dimsemenov.com/plugins/magnific-popup/
jQuery Equal Height Columns https://github.com/PaulSpr/jQuery-Equal-Height-Columns/
NanoScroller http://jamesflorentino.github.io/nanoScrollerJS/
Pace http://github.hubspot.com/pace/
Animate Enhanced https://github.com/benbarnett/jQuery-Animate-Enhanced

That's it! Get started and make your website look creative!

Horizillax

Overview