---

About

Henz Banner is an user-friendly slider for web designers and web developers. It uses CSS2 and Jquery which is compatible to all major browsers. There are 6 main transition categories for the background which are ideal for corporate looking websites. On top of that, you can have sequence animation using combination of texts and images overlay the background. It visually enhances the depth of design, as well as more messages to be carried out in the banner.

So what are you waiting for, spare your time to take a look at it now!

Features

» 6 Main Background Transition Categories

All transitions are nicely categorised in 6 major transitions. There are modern and sleek transitions that always easily adapt to any web design theme.

» Various Background Transition Styles

There are 37 background transition styles in total. Web developers never have to feel bored for limited transition to choose from.

» Customisable Sequence Animation for Each Slide

Other than background animation as the main attraction, you can have sequence animation by customising the animations for texts, title, and images that overlay the background. This will visually give you more depths instead of a flat image transition.

» Full Control With Configuration

User can easily change values for transition speed, duration, position of bullets, position of timer, and so on.

Compatible Browsers

---

Getting Started

CSS styles

CSS styles are able to be changed in the extertal css file "henzBanner.css".

Plugin Configuration

There are many settings you can change to meet your expectations. Refer to Configuration section for more details.

---

Configuration

The configuration can be done by changing all necessary values to your desire values under an external JS file "henzBanner.js". This JS file contains the default value for each setting, so you can simply customise the transition by changing them with new values.

Note: Jquery Easing must be used for this slider.

¦ Background Transition

    var bgTransition='slide';
    
    //fade, fadeTop, fadeBottom, fadeLeft, fadeRight, fadeMiddle, fadeMiddleReverse, fadeCenter, fadeCenterReverse, 
    randomFadeTopBottomMiddle, randomFadeLeftRightCenter, randomSlide, slideCenterReverse, slideCenter, slide, slideReverse,
    left, right, mixedLeftRight, top, bottom, mixedTopBottom, mixedRightTop, randomDirection, randomLeftRight, randomTopBottom, 
    zoomLeft, zoomRight, randomZoom, pixelizeLeft, pixelizeRight, pixelizeTop, pixelizeBottom, randomPixelize, hyperPixelizeLeft,
    hyperPixelizeRight, randomHyperPixelize
    

¦ Enable or Disable Sequence Animation

	var showSequence=true;//enable or disable sequence animation
    

¦ General Settings: Duration, Thumbnail, Bullet, Loading Bar, and etc...

	var showBullet=true;
    	var showThumb=true;
    	var thumb='img/thumb';//eg thumbnail src=img/thumb1.jpg
    	var loadingFile="img/loading.gif";
	var showloadingBar=true;
    	var loadingBarY='top';//top, bottom
    	var shuffle=true;
    	var initialSlide=1;
    	var slideDuration = 4000;
    

¦ Zoom Transition

	var zoomOutWidth='10%';
	var zoomInWidth='500%';
	var oriWidth='100%';
	var zoomOutLeftX='-100px';
	var zoomOutLeftY='-100px';
	var zoomInLeftX='1500px';
	var zoomInLeftY='220%';
	var zoomOutRightX='1000px';
	var zoomOutRightY='-100px';
	var zoomInRightX='-3500px';
	var zoomInRightY='220%';
    

¦ Horizontal and Vertical Slide Numbers for Fade Transition

	var slideHoriNumber=80;//min at 2
	var slideVerNumber=50;//min at 2
    

¦ Horizontal and Vertical Slide Numbers for Pixelize, Hyper Pixelize, and Slide Transition

These are the slide numbers of column and row to be set in the background.

	var horiNumber=5;
	var verNumber=6;
    

¦ Transition Speed

Each background transition has its own speed to be set.

	//Transition speed for Slide---------------------------
	var slideSpeed=2000;//Slide speed must be smaller than slideDuration and min 1500
	//Transition speed for Pixelize, and Hyper Pixelize---------------------------
	var pixelSpeed=1300;//Pixelize speed must be >500
	//Transition speed for zoom---------------------------
	var zoomSpeed=600;//Speed for zoom
	//Transition speed for normal fade---------------------------
	var fadeSpeed=2000;//Speed for fade
	//Transition speed for direction---------------------------
	var directionSpeed=1000;//Speed for direction
    

Note: Speed value cannot be bigger than duration

¦ Add or Remove Slide

You can have any number of slide by removing or adding codes as shown below. When you add new slide, make sure you declare a new ID in numeric format eg. "group5" for fifth slide.

  
<!--set5-->
  <div id="group5" class="group"> <img src="img/bg5.jpg" class="bg" /> <img src="img/pic5.png" class="pic" /> 
    <h1 class="title">New Title</h1>
    <div class="desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus 
      et magnis dis parturient montes, nascetur ridiculus mus. </div>
  </div>

¦ Customise Sequence Animation

You can preset the properties of each sequence before animation starts, customise the starting of animation, and ending of animation.

¦ Add New Sequence

For example, after you add a new slide which is fifth slide (id="group5") in the banner, make sure you duplicate a new function with subsequence function name: "function sequence5(){...}" for fifth slide sequence

eg: function sequence1 = group1

//Customise your animation for picture and text here----------------------------------------------------------------------------
	
	function sequence1(){ 


	//Preset before animation---------------------------------------------------------------------------------------------------
	$("#henzBanner #group"+group+' .title').css({'opacity':'0', "left":"-1000px"});
	$("#henzBanner #group"+group+' .desc').css({'opacity':'0', "left":"-1000px"});
	$("#henzBanner #group"+group+' .pic').css({'opacity':'0', "width":"900px", "left":"2300px", "top":"-200px"});
	$("#henzBanner .box").css({left:'800px', width:'350px', opacity:'0'});

			
	//Animation starts---------------------------------------------------------------------------------------------------
	$("#henzBanner .box").stop().animate({left:'550', width:'350', opacity:'0.5'},1000, "easeInQuad");
	$("#henzBanner #group"+group+' .pic').animate({top:'30', left:'100',opacity:'1', width: '320'},1000, "easeOutQuint");
	$("#henzBanner #group"+group+' .title').animate({paddingTop:'0'},1000).animate({left:'600',opacity:'1'},1000, "easeOutQuint");
	$("#henzBanner #group"+group+' .desc').animate({paddingTop:'0'},1200).animate({left:'600',opacity:'1'},1000, "easeOutQuint");

		  
	//Animation ends---------------------------------------------------------------------------------------------------
	$("#henzBanner #group"+group+' .pic').animate({paddingTop:'0'},slideDuration-1500).animate({top:'-200', left:'2300',opacity:'0', width: '900'},1000, "easeOutQuint");
	$("#henzBanner #group"+group+' .title').animate({paddingTop:'0'},slideDuration-2800).animate({left:'1800',opacity:'0'},1000, "easeOutQuint");
	$("#henzBanner #group"+group+' .desc').animate({paddingTop:'0'},slideDuration-2800).animate({left:'1800',opacity:'0'},1000, "easeOutQuint");
	$("#henzBanner .box").animate({paddingTop:'0'},slideDuration-1700).animate({left:'-350', opacity:'0'},600, "easeInQuad");
	  
		  
	}...
    

Designed and Developed by Henz Studio