Neetesh's Blog: 2013

CrossSlide is a jQuery plugin to create pan and cross-fade animations. Here is a small example of how slide show can be created with this jQuery plugin.

In the example given below just have your own images and thumbnails and copy paste the following HTML code and run it.

This code will sync the thumbnail and the main image with ken burns effect.On Mouse over it will pause the slide show.

Cross Slide Plugin location

https://github.com/tobia/CrossSlide

https://github.com/tobia/Pause

<!doctype html>

<html>

<head>

<title>Slide show using cross slide</title>

#slideshow {

width: 1000px;

height: 650px;

}

div.demo {

border: 1px solid #555555;

margin: 1em auto;

width: 650px;

}

div.caption {

background: none repeat scroll 0 0 black;

border-radius: 10px 10px 10px 10px;

color: white;

font-family: sans-serif;

left: 50%;

margin-left: -75px;

margin-top: -75px;

padding: 5px 10px;

position: absolute;

text-align: center;

width: 150px;

}

.opecImg

{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

</style>

</head>

<body>

<div class=demo id=slideshow>Loading...</div>

</center>

var timeDuration = 3;

var imagesArray = [

{

src: 'picture0.jpg',

alt: 'Pic1',

from: 'top left',

to: 'bottom right 1.5x',

time:timeDuration

}, {

src: 'picture1.jpg',

alt: 'Pic2',

from: '100% 80% 1x',

to: '100% 0% 1.7x',

time: timeDuration

}, {

src: 'picture2.jpg',

alt: 'Pic3',

from: 'bottom right 1.2x',

to: 'top left',

time:timeDuration

}, {

src: 'picture3.jpg',

alt: 'Pic4',

from: '100% 80% 1.5x',

to: '80% 0% 1.1x',

time: timeDuration

}, {

src: 'picture4.jpg',

alt: 'Pic5',

from: '100% 50%',

to: '30% 50% 1.8x',

time: timeDuration

}, {

src: 'picture5.jpg',

alt: 'Pic6',

from: 'top left',

to: 'bottom right 1.2x',

time: timeDuration

}

];

$(function() {

$('#slideshow').crossSlide({

fade: timeDuration

}, imagesArray, function(idx, img, idxOut, imgOut) {

if (idxOut == undefined)

{

// starting single image phase, put up caption

$('div.caption').text(img.alt).animate({ opacity: .7 })

}

else

{

// starting cross-fade phase, take out caption

$('div.caption').animate({ opacity: 0 })

}

syncImages(idx);

});

$('div.caption').show().css({ opacity: 0 })

$('#slideshow').mouseover(function() {

$('#slideshow').crossSlidePause();

});

$('#slideshow').mouseout(function() {

$('#slideshow').crossSlideResume();

});

function changeOrder(index){

addBlurToThumbnailImages();

var idx = index;

$("#pair"+idx).removeClass("opecImg");

$('#slideshow').crossSlideStop();

tmpArray = imagesArray.slice (index).concat(imagesArray.slice(0,index));

//alert(imagesArray);

$('#slideshow').crossSlide({

fade: timeDuration

}, tmpArray, function(idx, img, idxOut, imgOut) {

if (idxOut == undefined)

{

// starting single image phase, put up caption

$('div.caption').text(img.alt).animate({ opacity: .7 })

}

else

{

// starting cross-fade phase, take out caption

$('div.caption').animate({ opacity: 0 })

}

idx = idx+index;

if(idx>=imagesArray.length){

idx = idx%(imagesArray.length-1)-1;

}

syncImages(idx);

});

}

function syncImages(idx){

$("#pair"+idx).removeClass("opecImg");

idx-=1;

if(idx==-1){

idx=imagesArray.length-1;

$("#pair"+idx).addClass("opecImg");

}else{

$("#pair"+idx).addClass("opecImg");

}

function addBlurToThumbnailImages(){

for(i=0;i<imagesArray.length-1;i++){

$("#pair"+i).addClass("opecImg");

}

</script>

</body>

</html>

HTML 5 introduces new tag <canvas>. Using canvas tag you can draw graphics directly on web page. This graphics can be static or dynamic. By using simple javascript, animation can be created. Below is the example which animates circle to do count down activity. I got this idea when exploring HTML5. There are few web sites which provide such animation but those are paid versions. So I thought to create my own custom version. Although I am not javascript or css expert, this script may require refactoring.

Following are the configuration options available

//Set Initial time. So following 4 lines tells that 2 days 2 hours 24 minutes and 2 sec remaining

var secCountFix=2;

var minCountFix=24;

var hrCountFix=2;

var dayCountFix=2;

//Set Max Count: This specifies the reset count for dial. Actually secCountReset, minCountReset should be 59 and hrCountReset shoud be 23. But for test purpose I minimized the count.

var secCountReset=2;

var minCountReset=2;

var hrCountReset=2;

var dayCountReset=dayCountFix;

//timer:- Dial is triggered after this time in millisecond.

var speed=10;

Count down timer

Here is the code. Just create HTML page with following content and the counter is ready.

<html>

<head>

body {

margin:0px;

padding:0px;

background-color:#68bdda;

}

h1 {

color:#FFF;

font-family:Arial, Helvetica, sans-serif;

}

.clock {

position: relative;

}

.val {

margin:0;

position: absolute;

top:0;

left:0;

width:100%;

height:100%;

line-height: 122px;

font-family: Arial, Helvetica, sans-serif;

font-size: 35px;

color:#FFF;

font-weight: bold;

text-align: center;

}

.text {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight: bold;

color:#FFF;

background:#64b5d1;

text-align: center;

text-transform: uppercase;

}

</style>

//Set Initial Count

var secCountFix=10;

var minCountFix=10;

var hrCountFix=4;

var dayCountFix=2;

//Set Max Count

var secCountReset=10;

var minCountReset=10;

var hrCountReset=4;

var dayCountReset=dayCountFix;

//timer:- tirgger in ms

var speed=100;

var secCount=secCountFix;

var minCount=minCountFix;

var hrCount=hrCountFix;

var dayCount=dayCountFix;

var unitCount_sec=2/secCountFix;

var unitCount_min=2/minCountFix;

var unitCount_hr=2/hrCountFix;

var unitCount_day=2/dayCountFix;

var globCount_sec=0,globCount_min=0,globCount_hr=0,globCount_day=0;

var canvas_sec,ctx_sec;

var canvas_min,ctx_min;

var canvas_hr,ctx_hr;

var canvas_day,ctx_day;

var redirectCount=0;

function init(){

document.getElementById("timeSec").innerHTML=secCountFix;

document.getElementById("timeMin").innerHTML=minCountFix;

document.getElementById("timeHr").innerHTML=hrCountFix;

document.getElementById("timeDay").innerHTML=dayCountFix;

//Sec

canvas_sec=document.getElementById("canvas_sec");

ctx_sec=canvas_sec.getContext("2d");

ctx_sec.beginPath();

ctx_sec.strokeStyle = '#64b5d1';

ctx_sec.arc(60,65,50,0,2*Math.PI);

ctx_sec.lineWidth = 10;

ctx_sec.stroke();

//Min

canvas_min=document.getElementById("canvas_min");

ctx_min=canvas_min.getContext("2d");

ctx_min.beginPath();

ctx_min.strokeStyle = '#64b5d1';

ctx_min.arc(60,65,50,0,2*Math.PI);

ctx_min.lineWidth = 10;

ctx_min.stroke();

//Hr

canvas_hr=document.getElementById("canvas_hr");

ctx_hr=canvas_hr.getContext("2d");

ctx_hr.beginPath();

ctx_hr.strokeStyle = '#64b5d1';

ctx_hr.arc(60,65,50,0,2*Math.PI);

ctx_hr.lineWidth = 10;

ctx_hr.stroke();

//Day

canvas_day=document.getElementById("canvas_day");

ctx_day=canvas_day.getContext("2d");

ctx_day.beginPath();

ctx_day.strokeStyle = '#64b5d1';

ctx_day.arc(60,65,50,0,2*Math.PI);

ctx_day.lineWidth = 10;

ctx_day.stroke();

}

setInterval(function(){

if(secCount==0 && redirectCount==3)return;

//Sec

if(secCount-1==-1){

document.getElementById("timeSec").innerHTML=secCountReset;

--secCount;

}else{

document.getElementById("timeSec").innerHTML=--secCount;

}

ctx_sec.beginPath();

ctx_sec.strokeStyle = 'white';

globCount_sec+=unitCount_sec;

ctx_sec.arc(60,65,50,0,globCount_sec*Math.PI);

ctx_sec.lineWidth = 10;

ctx_sec.stroke();

if(secCount==-1){

ctx_sec.clearRect(0,0,canvas_sec.width,canvas_sec.height);

globCount_sec=0;

ctx_sec.strokeStyle = '#64b5d1';

ctx_sec.arc(60,65,50,0,2*Math.PI);

ctx_sec.lineWidth = 10;

ctx_sec.stroke();

secCount=secCountReset;

unitCount_sec=2/secCountReset;

if(redirectCount==3){

return;

}

//Min

if(minCount-1==-1){

document.getElementById("timeMin").innerHTML=minCountReset;

--minCount;

}else{

document.getElementById("timeMin").innerHTML=--minCount;

}

ctx_min.beginPath();

ctx_min.strokeStyle = 'white';

globCount_min+=unitCount_min;

ctx_min.arc(60,65,50,0,globCount_min*Math.PI);

ctx_min.lineWidth = 10;

ctx_min.stroke();

if(minCount==-1){

ctx_min.clearRect(0,0,canvas_min.width,canvas_min.height);

globCount_min=0;

ctx_min.strokeStyle = '#64b5d1';

ctx_min.arc(60,60,50,0,2*Math.PI);

ctx_min.lineWidth = 10;

ctx_min.stroke();

minCount=minCountReset;

unitCount_min=2/minCountReset;

if(redirectCount==2){redirectCount+=1;}

//Hr

if(hrCount-1==-1){

document.getElementById("timeHr").innerHTML=hrCountReset;

--hrCount;

}else{

document.getElementById("timeHr").innerHTML=--hrCount;

}

ctx_hr.beginPath();

ctx_hr.strokeStyle = 'white';

globCount_hr+=unitCount_hr;

ctx_hr.arc(60,65,50,0,globCount_hr*Math.PI);

ctx_hr.lineWidth = 10;

ctx_hr.stroke();

if(hrCount==-1){

ctx_hr.clearRect(0,0,canvas_hr.width,canvas_hr.height);

globCount_hr=0;

ctx_hr.strokeStyle = '#64b5d1';

ctx_hr.arc(60,65,50,0,2*Math.PI);

ctx_hr.lineWidth = 10;

ctx_hr.stroke();

hrCount=hrCountReset;

unitCount_hr=2/hrCountReset;

//Day

if(dayCount-1==-1){

document.getElementById("timeDay").innerHTML=dayCountFix;

--dayCount;

}else{

document.getElementById("timeDay").innerHTML=--dayCount;

}

ctx_day.beginPath();

ctx_day.strokeStyle = 'white';

globCount_day+=unitCount_day;

ctx_day.arc(60,65,50,0,globCount_day*Math.PI);

ctx_day.lineWidth = 10;

ctx_day.stroke();

if(dayCount==-1){

ctx_day.clearRect(0,0,canvas_day.width,canvas_day.height);

globCount_day=0;

ctx_day.strokeStyle = '#64b5d1';

ctx_day.arc(60,65,50,0,2*Math.PI);

ctx_day.lineWidth = 10;

ctx_day.stroke();

dayCount=dayCountReset;

unitCount_day=2/dayCountReset;

}else if(dayCount==0){

redirectCount+=1;

}

}else if(hrCount==0 && redirectCount==1){

redirectCount+=1;

}

}else if(minCount==0 && redirectCount==2){

redirectCount+=1;

}

}else if(secCount==0 && redirectCount==3){

document.getElementById("timeSec").innerHTML=0;

window.location="http://www.google.com";

}

},speed);

</script>

</head>

<h1>Page Under construction. We will Go Live In:</h1>

<table>

<tr>

<td>

Your browser does not support the HTML5 canvas tag.</canvas>

</div>

<td>

Your browser does not support the HTML5 canvas tag.</canvas>

<p class="text">Hours</p>

</div>

<td>

Your browser does not support the HTML5 canvas tag.</canvas>

<p class="text">Minutes</p>

</div>

<td>

Your browser does not support the HTML5 canvas tag.</canvas>

<p class="text">Seconds</p>

</div>

<td>

</tr>

</table>

</center>

</body>

</html>

Neetesh's Blog

Wednesday 13 March 2013

Slideshow with Ken Burns effect

Monday 4 March 2013

Count down timer using HTML5 canvas

Blog Archive

I am Ambadnya