Copyright SpiralPixel 2014
Many thanks for purchasing Sparx.
If you have any questions that are beyond the scope of this help file, please feel free to contact us through our profile on ThemeForest and we will try our best to help!
Please note: Due to illegal downloads, emails will not be answered if any template related questions are sent to spiralpixel.com.
Please use our ThemeForest contact form, thank you.
Don't forget to give it a star rating over at Theme Forest if you have enjoyed customizing the template and lastly.. have fun!
Jo Phillips - Spiral Pixel Design
Framework: Sparx uses Bootstrap3, you can read more about it here: http://getbootstrap.com/
Preloader: The preloader uses the clock icon from Font Awesome (in html code) and your logo (in css).
CSS: css > style.css > 06: PRELOADER
You can easily replace your logo with an animated preloader e.g preloaders.net.
Add you graphic's height and width to the css, center your graphic by halving the width and height and add it to margin (.status2).
Logo Font: The font is called Sanotra - www.behance.net/gallery/10657871/SANOTRA-TYPEFACE
Font: The font used is called Lato.
You can add your own fonts quite easily by visiting: http://www.google.com/webfonts.
Select your chosen font and add the code to the head section of the index.html file, and then make the font changes to your css.
Social Icons: Icons used are by FontAwesome giving you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be
done with the power of CSS.
http://fortawesome.github.io/Font-Awesome/
Place Font Awesome icons just about anywhere with the <i> tag.
<i class="fa fa-camera-retro"></i> fa-camera-retro
Animated Icons: The animated icons were created using using snap.svg & a tutorial by Codrops. - www.tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/. Please note that the icons don't appear on Chrome and Safari whilst viewing offline.
Retina Ready: Sparx is Retina Ready and includes retina.js.
How it works
retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap
in that image. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.
For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/[email protected]"
Tips For Creating Retina Display Graphics
www.photoshopquicktips.com/tutorials/creating-retina-display-graphics/
The template has four panels, intro panel, left panel - #page-left (countdown), right panel - #page-right (subscribe form) and about panel overlay.
Front Panel
CSS: style.css > 02. INTRO PAGE
CSS3 Animations:
Animate.css is used for the animation effects. - www.daneden.github.io/animate.css/
You can easily choose your own from the above site and add them to your html.
The animations are initialised using wow.js. - www.mynameismatthieu.com/WOW/
Simply add the CSS class .wow to a HTML element to animate it. e.g
<div class="soon wow bounceInDown" data-wow-delay="3s" data-wow-delay="0s">COMING SOON</div>
Options:
data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated
Rotating Text
JS: scripts.js > ROTATING INTRO TEXT
Ensure that you have * between your words.
<h1 class="text-rotator-fade wow bounceInDown" data-wow-duration="2s" data-wow-delay="2s"> <span class="rotate"> There's no shortcut for greatness* Creativity is the greatest rebellion* Practice safe design: Use a concept </span> </h1>
Left Panel
Countdown
The countdown html is commented for you.
<!--COUNTDOWN--> <div class="counter wow bounceIn pad5" data-wow-duration="2s" data-wow-delay="1s"> <div id="launch_date"></div> </div> <!--//END COUNTDOWN-->
$(document).ready(function ()
{
var austDay = new Date("January 1, 2019");
$('#launch_date').countdown(
{....
Social Network Icons<i class="fa fa-twitter"></i>
Right Panel
Subscribe Form
Add your email to mail.php
Replace, '[email protected]' with your own.
If you would like to change the notification message you can do so in scripts.js.
// CONTACT FORM - you can change your notification message here
// Message Sent - Show the 'Thank You' message and hide the form
TIP: When testing your form add a dummy email into the form and not your actual email.
About Panel
This panel slides up from the bottom of the screen and is controlled using jquery - js > scripts.js > ABOUT OVERLAY
CSS: style.css > 05: ABOUT PAGE
You can alter the colour and opacity of the overlay in the css > #overlay e.g background:rgba(62, 131, 200, 0.8) ;
PATTERN - Add your pattern to > style.css > 01. GENERAL STYLING > body
More great patterns can be found here: www.subtlepatterns.com
IMAGE - Add your image to the foot of index.html
<!--BACKGROUND IMAGE-->
<script>
$(function() {
$.vegas({
src:'img/background.jpg'
})('overlay');
});
</script>
JS > scripts.js > jquery.vegas.min.js
/**** OVERLAY & BACKGROUND ***/
.vegas-overlay {
background: transparent url(../img/overlay.png);
opacity: 0.5;
z-index: -1;
}
.vegas-background {
-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;
max-width: none !important;
z-index: -2;
}
.vegas-overlay, .vegas-background {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
SLIDESHOW - Add your images to the foot of index.html
<!--BACKGROUND IMAGE-->
<script>
$(function() {
$.vegas('slideshow', {
backgrounds:[
{ src:'img/background.jpg', fade:1000 },
{ src:'img/background2.jpg' , fade:1000 },
{ src:'img/background3.jpg', fade:1000 }
]
})('overlay');
});
</script>
HTML5 VIDEO - Add your webm, mp4, ogv videos and poster image to > index.html.
The videos use js > jquery.fs.wallpaper.js.
Place your videos into the folder > video.
Mobile browsers only display the supplied video poster, this is an intentional decision and avoids forcing users to download large video files.
<section id="home" class="wallpapered"
data-wallpaper-options='{"source":{
"webm":"video/hue.webm",
"mp4":"video/hue.mp4",
"ogg":"video/hue.ogv",
"poster":"video/hue.jpg"}}'>
YOUTUBE -
YouTube is replaced on smaller screens by a full screen image, add this to css > style.css > 01. GENERAL STYLING > body
e.g - background: url(../img/youtube.jpg) fixed top center ;
Note: This player doesn't work as a background for devices due to the restriction policy adopted by all on managing multimedia files via javascript.
<!--ADD YOUR VIDEO --> <iframe id="ytplayer" type="text/html" src="https://www.youtube.com/embed/2CPm1HK4ROo?playlist=2CPm1HK4ROo &loop=1;rel=0&autoplay=1" frameborder="0" allowfullscreen>
The script can be found in > scripts.js > YOUTUBE
If you would like sound, set the volume higher than 0 - player.setVolume(0);
FADE - This template uses randomly fading colours - www.celloexpressions.com/blog/random-colors-easier-than-youd-expect/
CLOUDS - This template displays a background image that wil move horizontally across your screen.
I have used a transparent cloud png, which can be found in your images folder and the movement is created using css.
You can alter the speed and background colour of the clouds in style.css > 01. GENERAL STYLING > body
background: url(../img/bg_clouds.png) top repeat #3e83c8 ; animation: animatedBackground 50s linear infinite; -ms-animation: animatedBackground 50s linear infinite; -moz-animation: animatedBackground 50s linear infinite; -webkit-animation: animatedBackground 50s linear infinite;
I have disabled the scrolling effect on the iPad as it was stopping the countdown script from working.
CODE - This template displays a full screen background as described in 'Image' and also animated html code of a web page.
The settings can be found at the foot of your html page. - davidecassenti.github.io/jquery-bgterminal
CSS: css > style.css > 01. GENERAL STYLING > TERMINAL CODE
$(document).ready(function(){
$('#terminal').bgTerminal({
url: 'index.html',
glow: false,
speed: 100,
wait: 1000
});
});
GRADIENT - You can change the colours in scripts.js > Gradient > (var colors = new Array....)
PARTICLES / DOTS / SQUARES / TRIANGLES / BUBBLES -
Edit the effect in > scripts > app.js .. Or go to http://vincentgarreau.com/particles.js/ create your effect, download the json and then copy & paste to app.js
CSS: style.css > 07: PARTICLES
Change background colour / gradient : style.css > 01: GENERAL STYLING > body
A handy page to help create your gradients - https://webgradients.com
SINE - Wave widths, effects and colours can be edited in scripts.js > Sine.
Further information: https://github.com/isuttell/sine-waves
The effect is called in index.html > <canvas id="waves"> </canvas>
The background gradient can be edited in style.css > 01: GENERAL STYLING > background: linear-gradient(25deg,#330f4c,#210734);
WINDMILL - EDIT > style.css > 07. WINDMILL
<div class="wave -one"></div> <div class="wave -two"></div> <div class="wave -three"></div>
Sources
Once again, thank you so much for purchasing this template. As we said at the beginning, we'll be glad to help you if you have any questions relating to this template. No guarantees, but we will do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Jo