Script Tutorials » animation | Script Tutorials | Web development http://www.script-tutorials.com Tutorials for Web Developers Fri, 03 Feb 2012 06:07:51 +0000 en hourly 1 Analog Clock with Pure CSS3 (without javascript)http://www.script-tutorials.com/analog-clock-with-pure-css3/ http://www.script-tutorials.com/analog-clock-with-pure-css3/#comments Thu, 05 Jan 2012 15:00:59 +0000 admin http://www.script-tutorials.com/?p=1343

Related Stuff You Will Love!

  1. CSS3 Optical Illusions CSS3 Optical Illusions
  2. Creating A CSS3 Animated Menu Creating A CSS3 Animated Menu
  3. How to Create a Pure CSS3 Slideshow How to Create a Pure CSS3 Slideshow
]]> Analog Clock with Pure CSS3 (without javascript)

Analog Clock with Pure CSS3 (without javascript)

Today – another one great article – we are going to create pure CSS3 Analog Clock without any javascript (we are going to use power of CSS3 with animations to build it). Our clocks have three arrows on the face – hour, minute and second. Each of them – a narrow rectangle rotated to the desired angle. How it works in result? – Easy, I am using necessary delays for all these arrows. How exactly – read on.

For our clock – I have prepared -webkit and -moz styles. So please keep in mind – that clock will work only in Firefox, and Webkit-based browsers (Chrome and Safari). If you like – you always can expand necessary styles (for arrows) for IE and Opera browsers (by adding same stylesheets with -ms and -o prefixes).

Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML markup

The mark-up for our clock is not very simple – it contain lot of DIV elements. Each of them – our arrows. Here it is.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Analog Clock with Pure CSS3 (without javascript) | Script Tutorials</title>
        <link href="css/layout.css" type="text/css" rel="stylesheet">
        <link href="css/clocks.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <header>
            <h2>Analog Clock with Pure CSS3 (without javascript)</h2>
            <a href="http://www.script-tutorials.com/analog-clock-with-pure-css3/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div id="clock">
                <div class="secs">
                    <div id="s1"></div><div id="s2"></div><div id="s3"></div>
                    <div id="s4"></div><div id="s5"></div><div id="s6"></div>
                    <div id="s7"></div><div id="s8"></div><div id="s9"></div>
                    <div id="s10"></div><div id="s11"></div><div id="s12"></div>
                    <div id="s13"></div><div id="s14"></div><div id="s15"></div>
                    <div id="s16"></div><div id="s17"></div><div id="s18"></div>
                    <div id="s19"></div><div id="s20"></div><div id="s21"></div>
                    <div id="s22"></div><div id="s23"></div><div id="s24"></div>
                    <div id="s25"></div><div id="s26"></div><div id="s27"></div>
                    <div id="s28"></div><div id="s29"></div><div id="s30"></div>
                    <div id="s31"></div><div id="s32"></div><div id="s33"></div>
                    <div id="s34"></div><div id="s35"></div><div id="s36"></div>
                    <div id="s37"></div><div id="s38"></div><div id="s39"></div>
                    <div id="s40"></div><div id="s41"></div><div id="s42"></div>
                    <div id="s43"></div><div id="s44"></div><div id="s45"></div>
                    <div id="s46"></div><div id="s47"></div><div id="s48"></div>
                    <div id="s49"></div><div id="s50"></div><div id="s51"></div>
                    <div id="s52"></div><div id="s53"></div><div id="s54"></div>
                    <div id="s55"></div><div id="s56"></div><div id="s57"></div>
                    <div id="s58"></div><div id="s59"></div><div id="s60"></div>
                </div>
                <div class="mins">
                    <div id="m1"></div><div id="m2"></div><div id="m3"></div>
                    <div id="m4"></div><div id="m5"></div><div id="m6"></div>
                    <div id="m7"></div><div id="m8"></div><div id="m9"></div>
                    <div id="m10"></div><div id="m11"></div><div id="m12"></div>
                    <div id="m13"></div><div id="m14"></div><div id="m15"></div>
                    <div id="m16"></div><div id="m17"></div><div id="m18"></div>
                    <div id="m19"></div><div id="m20"></div><div id="m21"></div>
                    <div id="m22"></div><div id="m23"></div><div id="m24"></div>
                    <div id="m25"></div><div id="m26"></div><div id="m27"></div>
                    <div id="m28"></div><div id="m29"></div><div id="m30"></div>
                    <div id="m31"></div><div id="m32"></div><div id="m33"></div>
                    <div id="m34"></div><div id="m35"></div><div id="m36"></div>
                    <div id="m37"></div><div id="m38"></div><div id="m39"></div>
                    <div id="m40"></div><div id="m41"></div><div id="m42"></div>
                    <div id="m43"></div><div id="m44"></div><div id="m45"></div>
                    <div id="m46"></div><div id="m47"></div><div id="m48"></div>
                    <div id="m49"></div><div id="m50"></div><div id="m51"></div>
                    <div id="m52"></div><div id="m53"></div><div id="m54"></div>
                    <div id="m55"></div><div id="m56"></div><div id="m57"></div>
                    <div id="m58"></div><div id="m59"></div><div id="m60"></div>
                </div>
                <div class="hours">
                    <div id="h1"></div><div id="h2"></div><div id="h3"></div>
                    <div id="h4"></div><div id="h5"></div><div id="h6"></div>
                    <div id="h7"></div><div id="h8"></div><div id="h9"></div>
                    <div id="h10"></div><div id="h11"></div><div id="h12"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Step 2. CSS

Now – CSS styles. As usual, we won’t publish main page layout styles (layout.css). But, there are stylesheets for our clock:

css/clocks.css

#clock {
    background: #fff url(cface.png) 0 0 no-repeat;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 500px;

    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
    -ms-border-radius: 250px;
    -o-border-radius: 250px;
    border-radius: 250px;
}

/* seconds */
@-webkit-keyframes secs_effect {
    0% {opacity: 1;}
    1.66% {opacity: 1;}
    1.67% {opacity: 0;}
    100% {opacity: 0;}
}
@-moz-keyframes secs_effect {
    0% {opacity: 1;}
    1.66% {opacity: 1;}
    1.67% {opacity: 0;}
    100% {opacity: 0;}
}

#clock  .secs {
    height: 400px;
    left: 155px;
    position: absolute;
    top: 249px;
    width: 400px;
}
#clock  .secs div {
    background-color: #860000;
    height: 2px;
    opacity: 0;
    position: absolute;
    width: 190px;

    -moz-animation-name: secs_effect;
    -moz-animation-duration: 60s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: secs_effect;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

#clock #s1 {
-moz-transform: rotate(-90deg) translatex(130px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(130px);
-webkit-animation-delay: 0s;
}
#clock #s2 {
-moz-transform: rotate(-84deg) translatex(130px);
-moz-animation-delay: 1s;
-webkit-transform: rotate(-84deg) translatex(130px);
-webkit-animation-delay: 1s;
}
#clock #s3 {
-moz-transform: rotate(-78deg) translatex(130px);
-moz-animation-delay: 2s;
-webkit-transform: rotate(-78deg) translatex(130px);
-webkit-animation-delay: 2s;
}
...........
#clock #s60 {
-moz-transform: rotate(264deg) translatex(130px);
-moz-animation-delay: 59s;
-webkit-transform: rotate(264deg) translatex(130px);
-webkit-animation-delay: 59s;
}

/* minutes */
@-webkit-keyframes mins_effect {
    0% {opacity: 1;}
    1.66% {opacity: 1;}
    1.67% {opacity: 0;}
    100% {opacity: 0;}
}
@-moz-keyframes mins_effect {
    0% {opacity: 1;}
    1.66% {opacity: 1;}
    1.67% {opacity: 0;}
    100% {opacity: 0;}
}

#clock  .mins {
    height: 300px;
    left: 175px;
    position: absolute;
    top: 249px;
    width: 300px;
}
#clock  .mins div {
    background-color: #000086;
    height: 3px;
    opacity: 0;
    position: absolute;
    width: 150px;

    -moz-animation-name: mins_effect;
    -moz-animation-duration: 3600s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: mins_effect;
    -webkit-animation-duration: 3600s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

#clock #m1 {
-moz-transform: rotate(-90deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #m2 {
-moz-transform: rotate(-84deg) translatex(110px);
-moz-animation-delay: 60s;
-webkit-transform: rotate(-84deg) translatex(110px);
-webkit-animation-delay: 60s;
}
#clock #m3 {
-moz-transform: rotate(-78deg) translatex(110px);
-moz-animation-delay: 120s;
-webkit-transform: rotate(-78deg) translatex(110px);
-webkit-animation-delay: 120s;
}
...........
#clock #m60 {
-moz-transform: rotate(264deg) translatex(110px);
-moz-animation-delay: 3540s;
-webkit-transform: rotate(264deg) translatex(110px);
-webkit-animation-delay: 3540s;
}

/* hours */
@-webkit-keyframes hours_effect {
    0% {opacity: 1;}
    8.33% {opacity: 1;}
    8.34% {opacity: 0;}
    100% {opacity: 0;}
}
@-moz-keyframes hours_effect {
    0% {opacity: 1;}
    8.33% {opacity: 1;}
    8.34% {opacity: 0;}
    100% {opacity: 0;}
}

#clock  .hours {
    height: 300px;
    left: 175px;
    position: absolute;
    top: 249px;
    width: 300px;
}
#clock  .hours div {
    background-color: #860086;
    height: 3px;
    opacity: 0;
    position: absolute;
    width: 150px;

    -moz-animation-name: hours_effect;
    -moz-animation-duration: 43200s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: hours_effect;
    -webkit-animation-duration: 43200s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

#clock #h1 {
-moz-transform: rotate(-180deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-180deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #h2 {
-moz-transform: rotate(-150deg) translatex(110px);
-moz-animation-delay: 3600s;
-webkit-transform: rotate(-150deg) translatex(110px);
-webkit-animation-delay: 3600s;
}
#clock #h3 {
-moz-transform: rotate(-120deg) translatex(110px);
-moz-animation-delay: 7200s;
-webkit-transform: rotate(-120deg) translatex(110px);
-webkit-animation-delay: 7200s;
}
...........
#clock #h12 {
-moz-transform: rotate(150deg) translatex(110px);
-moz-animation-delay: 39600s;
-webkit-transform: rotate(150deg) translatex(110px);
-webkit-animation-delay: 39600s;
}

Now – you can understand the main idea. I won’t publish all ‘recurring’ styles for each arrow. Full code you can find in our package.

Step 4. Images

For our clock I have used single image (as face of our clock):

Analog Clock with Pure CSS3 | Script Tutorials

Live Demo
download in package

Conclusion

Finally we have built our clock! This was difficult, but we did it. I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!

]]> http://www.script-tutorials.com/analog-clock-with-pure-css3/feed/ 4 Cool Background Image Sliding effect with jQueryhttp://www.script-tutorials.com/cool-background-image-sliding-effect-with-jquery/ http://www.script-tutorials.com/cool-background-image-sliding-effect-with-jquery/#comments Fri, 18 Nov 2011 17:55:19 +0000 admin http://www.script-tutorials.com/?p=1222

Related Stuff You Will Love!

  1. Cross-browser Supported Image Skew effect using Javascript Cross-browser Supported Image Skew effect using Javascript
  2. Jquery CSS Tutorial on Zooming Image Jquery CSS Tutorial on Zooming Image
  3. Creating CSS3 Drop sliding list Menu #6 Creating CSS3 Drop sliding list Menu #6
]]> Cool Background Image Sliding effect with jQuery

Cool Background Image Sliding effect with jQuery

Today I am going to show you how to create sliding image cell effect. This is will something like small photo gallery. I prepared 3 demos for you with different effects. Please pay attention that our demo will work in browsers that support used CSS3 properties.

Live Demo
download result

Ok, download the example files and lets start coding !

Step 1. HTML

Here are full html code of our result. For our demonstration I use 5 photos – same amount of ‘navigation’ elements you can see here too.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Cool Background Image Sliding effect with jQuery | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <div class="container" id="container">
            <ul class="nav">
                <li id="m1">Pic 1</li>
                <li id="m2">Pic 2</li>
                <li id="m3">Pic 3</li>
                <li id="m4">Pic 4</li>
                <li id="m5">Pic 5</li>
            </ul>

            <ul class="grid">
                <li id="g1">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g2">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g3">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g4">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g5">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g6">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
            </ul>
            <ul class="demos">
                <li><a href="index.html">Demo 1</a></li>
                <li><a href="index2.html">Demo 2</a></li>
                <li><a href="index3.html">Demo 3</a></li>
            </ul>
        </div>
        <footer>
            <h2>Cool Background Image Sliding effect with jQuery</h2>
            <a href="http://www.script-tutorials.com/cool-background-image-sliding-effect-with-jquery/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

Step 2. CSS

Now – our CSS styles. I will omit unnecessary styles of page layout, but will show you most important

css/main.css

.nav {
    background-color:#DDD;
    list-style:none outside none;
    overflow:hidden;
    padding:5px 140px;
}
.nav li {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    border:2px outset #000000;
    color:#000;
    cursor:pointer;
    float:left;
    font-size:18px;
    font-weight:bold;
    margin-right:5px;
    padding:10px;
}

.demos {
    background-color:#DDD;
    list-style:none outside none;
    overflow:hidden;
    padding:5px 165px;
}
.demos li {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    border:2px outset #000000;
    color:#000;
    float:left;
    font-size:18px;
    font-weight:bold;
    margin-right:5px;
    padding:10px;
}
.demos li a {
    color:#000;
    cursor:pointer;
    display:block;
    font-size:20px;
    font-weight:bold;
    height:30px;
    line-height:30px;
    text-decoration:none;
}

.grid {
    background-color:#DDD;
    list-style:none outside none;
    width:100%;
}
.grid li {
    border:1px solid #777777;
    float:left;
    height:240px;
    width:211px;

    transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    -webkit-transition:all 0.5s linear;
}
.grid li div {
    transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;

    float:left;
}
.grid li .d1 {
    background:transparent url(../images/grid1.jpg) no-repeat top left;
    height:100%;
    width:211px;
}
.grid li .d2 {
    background:transparent url(../images/grid2.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d3 {
    background:transparent url(../images/grid3.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d4 {
    background:transparent url(../images/grid4.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d5 {
    background:transparent url(../images/grid5.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li#g2 div {
    background-position:-211px 0;
}
.grid li#g3 div {
    background-position:-422px 0;
}
.grid li#g4 div {
    background-position:0 -240px;
}
.grid li#g5 div {
    background-position:-211px -240px;
}
.grid li#g6 div {
    background-position:-422px -240px;
}

As you can see – each grid cell element (LI) have some defined background, but with own background positions. And, I will use jQuery ‘animate’ to shift these positions when we will switch our images (through navigation)

Step 3. jQuery

js/main.js

$(function(){
    $(".nav li").hover(
      function () {
        $('.grid li div').stop().animate({width:"0"},0);

        var ind = $(".nav li").index(this);
        $($('.grid li#g1 div')[ind]).stop().animate({width:"211px"},0);
        $($('.grid li#g2 div')[ind]).stop().animate({width:"211px"},50);
        $($('.grid li#g3 div')[ind]).stop().animate({width:"211px"},100);
        $($('.grid li#g4 div')[ind]).stop().animate({width:"211px"},150);
        $($('.grid li#g5 div')[ind]).stop().animate({width:"211px"},200);
        $($('.grid li#g6 div')[ind]).stop().animate({width:"211px"},250);
      }
    );
});

As you can see – all very easy.

Live Demo
download result

Conclusion

All another demos very similar, only few changes in styles and javascript code. You are welcome to play with our demos. Good luck!

]]> http://www.script-tutorials.com/cool-background-image-sliding-effect-with-jquery/feed/ 3 Creating an Animated 3D WebGL Demonstrationhttp://www.script-tutorials.com/making-3d-webgl-demonstration/ http://www.script-tutorials.com/making-3d-webgl-demonstration/#comments Mon, 12 Sep 2011 17:45:18 +0000 admin http://www.script-tutorials.com/?p=995

Related Stuff You Will Love!

  1. Creating a 3D Animated Box HTML5 WebGL Photo Slideshow Creating a 3D Animated Box HTML5 WebGL Photo Slideshow
  2. Creating a Keyboard Sensitive 3D Twisted Images in WebGl Creating a Keyboard Sensitive 3D Twisted Images in WebGl
  3. Creating a Photo Array in WebGL Creating a Photo Array in WebGL
]]> Making 3D WebGL demonstration

Making 3D WebGL demonstration

Today we continue HTML5 canvas examples. And today we will try to begin learning WebGL. In my demonstration I will show you how to initialize WebGL and draw simple 3D object. Also we will animate this object too.

Here are our demo and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

Here are html source code of our demo. As you can see – just empty page.

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/glMatrix-0.9.5.min.js"></script>
    <script type="text/javascript" src="js/webgl-utils.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <title>WebGL demonstration | Script Tutorials</title>
</head>
<body onload="initWebGl();">
    <div class="example">
        <h3><a href="http://www.script-tutorials.com/making-3d-webgl-demonstration/">WebGL demonstration | Script Tutorials</a></h3>
        <canvas id="panel" width="500" height="333"></canvas>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

Step 2. CSS

Here are used CSS styles.

css/main.css

body {
    background:#eee;
    font-family:Verdana, Helvetica, Arial, sans-serif;
    margin:0;
    padding:0
}
.example {
    background:#fff;
    width:500px;
    font-size:80%;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    position:relative;
    -moz-border-radius: 3px;
    -webkit-border-radius:3px
}
h3 {
    text-align:center;
}

Step 3. JS

js/webgl-utils.js and js/glMatrix-0.9.5.min.js

These files we will use in project for working with WebGL. Both files will in our package.

js/script.js

var gl; // global WebGL object
var shaderProgram;

function initGL(canvas) {
    try {
        gl = canvas.getContext('experimental-webgl');
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch (e) {}
    if (! gl) {
        alert('Can`t initialise WebGL, not supported');
    }
}

function getShader(gl, type) {
    var str = '';
    var shader;

    if (type == 'x-fragment') {
        str = "#ifdef GL_ES\n"+
"precision highp float;\n"+
"#endif\n"+
"varying vec4 vColor;\n"+
"void main(void) {\n"+
"    gl_FragColor = vColor;\n"+
"}\n";
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (type == 'x-vertex') {
        str = "attribute vec3 aVertexPosition;\n"+
"attribute vec4 aVertexColor;\n"+
"uniform mat4 uMVMatrix;\n"+
"uniform mat4 uPMatrix;\n"+
"varying vec4 vColor;\n"+
"void main(void) {\n"+
"    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n"+
"    vColor = aVertexColor;\n"+
"}\n";
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }
    return shader;
}

function initShaders() {
    var fragmentShader = getShader(gl, 'x-fragment');
    var vertexShader = getShader(gl, 'x-vertex');

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Can`t initialise shaders');
    }

    gl.useProgram(shaderProgram);

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

    shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, 'aVertexColor');
    gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix');
    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, 'uMVMatrix');
}

var mvMatrix = mat4.create();
var mvMatrixStack = [];
var pMatrix = mat4.create();

function mvPushMatrix() {
    var copy = mat4.create();
    mat4.set(mvMatrix, copy);
    mvMatrixStack.push(copy);
}

function mvPopMatrix() {
    if (mvMatrixStack.length == 0) {
        throw 'Invalid popMatrix!';
    }
    mvMatrix = mvMatrixStack.pop();
}

function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

function degToRad(degrees) {
    return degrees * Math.PI / 180;
}

var objVertexPositionBuffer;
var objVertexColorBuffer;

function initObjBuffers() {
    objVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, objVertexPositionBuffer);
    var vertices = [
         1.0,  2.0,  -1.0,
        -1.0,  2.0,  -1.0,
         1.0, -2.0,  -1.0,
        -1.0, -2.0,  -1.0,
         1.0,  2.0,  1.0,
        -1.0,  2.0,  1.0,
         1.0, -2.0,  1.0,
        -1.0, -2.0,  1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    objVertexPositionBuffer.itemSize = 3;
    objVertexPositionBuffer.numItems = 8;

    objVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, objVertexColorBuffer);
    var colors = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 0.5,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 0.5,
        1.0, 0.0, 0.0, 1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    objVertexColorBuffer.itemSize = 4;
    objVertexColorBuffer.numItems = 8;
}

var iObjDeg = 0;

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

    mat4.identity(mvMatrix);

    mat4.translate(mvMatrix, [0.0, 0.0, -10.0]);

    mvPushMatrix();
    mat4.rotate(mvMatrix, degToRad(iObjDeg), [1, 1, 1]);

    gl.bindBuffer(gl.ARRAY_BUFFER, objVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, objVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, objVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, objVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, objVertexPositionBuffer.numItems);

    mvPopMatrix();
}

function drawFrame() {
    requestAnimFrame(drawFrame);
    drawScene();

    iObjDeg += 3; // 3 degrees per frame
}

function initWebGl() {
    var canvas = document.getElementById('panel');

    initGL(canvas);
    initShaders()
    initObjBuffers();

    gl.clearColor(1.0, 0.5, 0.3, 1.0);
    gl.enable(gl.DEPTH_TEST);

    drawFrame();
}

Pretty big code, isn`t it? but anyway – here are all necessary to draw our demo. Since page loaded – we performing few initializations (initGL, initShaders, initObjBuffers functions), then we defining color for our scene (via gl.clearColor), and after – drawing our scene (drawFrame function). In this function we using ‘requestAnimFrame’ to define function which will calling periodically when WebGL will need to draw next frame.

Live Demo
download in package

Conclusion

Not bad, isn`t it? Possible today we made first step to next generation. And possible that in coming future we will start a series of articles related with game development with HTML5. Welcome back!

]]> http://www.script-tutorials.com/making-3d-webgl-demonstration/feed/ 0 Creating Cross-browser Compatible Wave Effects Using Javascripthttp://www.script-tutorials.com/cross-browser-effect-of-waves-using-javascript/ http://www.script-tutorials.com/cross-browser-effect-of-waves-using-javascript/#comments Tue, 24 May 2011 17:34:09 +0000 admin http://www.script-tutorials.com/?p=665

Related Stuff You Will Love!

  1. How to Create Cross Browser Compatible Flare Lens Effect using Javascript How to Create Cross Browser Compatible Flare Lens Effect using Javascript
  2. Cross-browser Supported Image Skew effect using Javascript Cross-browser Supported Image Skew effect using Javascript
  3. Custom scrollbars – cross-browser solution Custom scrollbars – cross-browser solution
]]> Crossbrowser wave effect

Cross-browser effect of waves using javascript

Today’s lesson quite entertaining, we’ll learn how to construct a wave effect. For clarity, we will apply that effect to the picture. I will explain how it works directly in our tutorial, now, its time to see our online demonstration.

Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<html>
<head>
    <title>Effect of waves using pure JavaScript</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/main.js"></script>
</head>
 <body>
    <div class="example">
        <div id="main_object">
            <img id="source_img" src="image.jpg">
            <div id="wave_zone"></div>
        </div>
    </div>
 </body>
</html>

Here are prepared object, with 2 elements inside – image itself and bottom area for waving effect

Step 2. CSS

Here are single CSS file with all necessary styles:

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#main_object {
    position: relative;
}
#main_object img {
    display: block;
}
#main_object #wave_zone img {
    position:absolute;
    left:-9999px;
}
#main_object span {
    position:absolute;
    font-size:0px;
}
#main_object #wave_zone {
    position:relative;
    display:block;
    overflow:hidden;
    background-color:#000;
}

Step 3. JS

Here are our main Javascript:

js/main.js

// wave sub objects
function WSubObj(num, img, object, iwidth, iheight){
    this.S = num;
    var o = document.createElement("span");
    o.style.overflow = "hidden";
    o.style.width = iwidth + "px";
    o.style.height = iheight + "px";
    o.style.top = (num-1) + "px";
    var oI = document.createElement("img");
    oI.src = img.src;
    oI.style.left = "0px";
    oI.style.top = (-iheight + num) + "px";
    oI.style.width = iwidth + "px";
    oI.style.height = iheight + "px";
    o.appendChild(oI);
    document.getElementById("wave_zone").appendChild(o);
    this.spa = o.style;
    this.ddx = 0
    this.PX  = 0
    this.x   = 0
    if (num > 0) this.prev = object[num - 1];
}

WSubObj.prototype.main = function(power){
    var x0 = (this.S == 0) ? Math.random() * power : this.prev.x;
    this.x = this.PX += (this.ddx += ( (x0 - this.PX - this.ddx) * 2 ) / 2.8) / 1.4;
    this.spa.left = Math.round(this.x) + "px";
}

// wave effect object
var weff = {
    // variables
    power : 2.2,

    // inner variables
    object : new Array(),
    simg : null,
    iwidth  : 0,
    iheight  : 0,

    // initialization function
    init : function() {
        for (var i = 0; i < this.iheight/4; i++)
            this.object[i] = new WSubObj(i, this.simg, this.object, this.iwidth, this.iheight);
    },

    // main loop function of water effect
    run : function() {
        var i = 0, o;
        while (o = weff.object[i++]) o.main(weff.power);
        setTimeout(weff.run, 40);
    }
};

// on page load
window.onload = function() {
    weff.simg = document.getElementById("source_img");
    weff.iwidth = weff.simg.width;
    weff.iheight = weff.simg.height;

    // set necessary width and height for wave zone element
    var css = document.getElementById("wave_zone").style;
    css.height = (weff.iheight/4 - 1) + "px";
    css.width  = weff.iwidth + "px";

    weff.init();
    weff.run();
}

It is rather simple. When the page loads – I initialize our main object, and create multiple subimages (in spans) for each row of second half of our sample, then, periodically gently increase the amplitude of oscillations. So, in result – we can see effect of waves.

Step 4. Images

For our demo I used only one image:

img_01

Live Demo
download in package

Conclusion

Today I told you how to create easy wave effect to images. You always can play with different variables of this demo ot archive different funny results. Hope our javascript lessons still interesting for you. Good luck!

]]> http://www.script-tutorials.com/cross-browser-effect-of-waves-using-javascript/feed/ 3 How to use Multiple backgrounds and Animation with CSS3http://www.script-tutorials.com/multiple-backgrounds-with-css3-and-a-little-of-animation/ http://www.script-tutorials.com/multiple-backgrounds-with-css3-and-a-little-of-animation/#comments Tue, 17 May 2011 18:25:12 +0000 admin http://www.script-tutorials.com/?p=640

Related Stuff You Will Love!

  1. Positioning Backgrounds with Jquery Positioning Backgrounds with Jquery
  2. Importing multiple RSS feeds – using newsWidget (jQuery) Importing multiple RSS feeds – using newsWidget (jQuery)
  3. How to Create a Pure CSS3 Animated Photo Gallery How to Create a Pure CSS3 Animated Photo Gallery
]]> Multiple backgrounds with CSS3 with animation

Multiple backgrounds with CSS3 and a little of animation

In CSS3 appear new possibility to use multiple backgrounds for the objects, in our new article I will demonstrate how to do it. And, I going to add a bit of JS code for simple animation (to make it not so boring). Commonly, it is very easy to apply multiple backgrounds – we just need to list them (separated by commas) in the object properties.

Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<html>
<head>
    <title>Multiple backgrounds with CSS3 and a little of animation</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/main.js"></script>
</head>
 <body>
    <div class="example">
        <div id="main_object"></div>
    </div>
 </body>
</html>

Nothing special, just <div id="main_object"></div> inside

Step 2. CSS

Here are single CSS file with all necessary styles:

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:950px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#main_object{
    position:relative;width:950px;height:700px;overflow:hidden;cursor:pointer;
    background-image: url(../images/layer1.png), url(../images/layer2.png), url(../images/layer3.png), url(../images/bg.jpg);
    background-position: center bottom, right top, right bottom, left top;
    background-repeat: no-repeat;
}

Here, you can see way how I pointing these several backgrounds to our main element – all comma separated. Same and for ‘background-position’ too. Of course, if you want – you always can use use ‘background’ property to set all necessary styles, in this case – you can enum your properties in same way, separating values with commas, example:

background: url(../images/layer1.png) no-repeat center bottom, url(../images/layer2.png) no-repeat right top, url(../images/layer3.png) no-repeat right bottom, url(../images/bg.jpg) no-repeat left top;
}

Step 3. JS

Here are a little of JS for our animation:

js/main.js

var ex76 = {
    // variables
    l1w  : 358, // layer 1 width
    l1h  : 235, // layer 1 height
    l2w  : 441, // layer 2 width
    l3w  : 307, // layer 3 width

    // inner variables
    obj  : 0,
    xm   : 0,
    ym   : 0,
    x1 : 0,
    y1 : 0,
    x2 : 0,
    x3 : 0,

    // initialization
    init : function() {
        this.obj = document.getElementById('main_object');

        this.x2 = this.obj.clientWidth;
        this.x3 = -this.l3w;

        this.run();
    },

    // refreshing mouse positions
    mousemove : function(e) {
        this.xm = e.clientX;
        this.ym = e.clientY;

        // recalculation new positions
        this.x1 = this.xm - this.obj.offsetLeft - ex76.l1w/2;
        this.y1 = this.ym - this.obj.offsetTop - ex76.l1h/2;
    },

    // loop function
    run : function() {
        // shifting second layer object to left
        ex76.x2--;
        if (ex76.x2 < -ex76.l2w) ex76.x2 = ex76.obj.clientWidth;

        // shifting second layer object to right
        ex76.x3++;
        if (ex76.x3 > ex76.obj.clientWidth) ex76.x3 = -ex76.l3w;

        // updating background-position value with new positions
        ex76.obj.style.backgroundPosition = ex76.x1 + 'px ' + ex76.y1 + ', ' + ex76.x2 + 'px top, ' + ex76.x3 + 'px bottom, left top';

        // loop
        setTimeout(ex76.run, 20);
    }
};

window.onload = function() {
    ex76.init(); // initialization

    // binding mouse move event
    document.onmousemove = function(e) {
        if (window.event)
            e = window.event;
        ex76.mousemove(e);
    }
}

This is pretty easy – for second and third layer – I changing its X positions (by cycle), for first layer – I changing its position in place where located our mouse.

Step 4. Images

Also we need several images for our demo (for different layers):

    bg.jpg
    layer1.png
    layer2.png
    layer3.png
Live Demo
download in package

Conclusion

Today I told you how you can assign several images as background for single element. Hope that our demo gave you some ideas. Here are another application of this, you can create custom controls (buttons as example) with custom background, as example rounded buttons. You will need just set 2-3 layers (for beginning, center and end of button). Good luck!

]]> http://www.script-tutorials.com/multiple-backgrounds-with-css3-and-a-little-of-animation/feed/ 9 How to Create Animated Photo Gallery using jQuery (Slider Kit)http://www.script-tutorials.com/how-to-create-photo-gallery-using-slider-kit-jquery/ http://www.script-tutorials.com/how-to-create-photo-gallery-using-slider-kit-jquery/#comments Wed, 11 May 2011 17:48:59 +0000 admin http://www.script-tutorials.com/?p=616

Related Stuff You Will Love!

  1. Creating an Attractive Photo Gallery using SmartGallery (jQuery) Creating an Attractive Photo Gallery using SmartGallery (jQuery)
  2. How to Create a Pure CSS3 Animated Photo Gallery How to Create a Pure CSS3 Animated Photo Gallery
  3. Animated Photo Gallery (grid) with javascript Animated Photo Gallery (grid) with javascript
]]> Slider Kit photo gallery

How to create photo gallery using Slider Kit (jQuery)

Today we will continue overviews of available photo galleries. Next gallery will Slider Kit. This is free jQuery photo gallery. This gallery have 4 different views (standard, with captions, vertical and minimalistic). Important notes – that it compatible with all browsers (this can work even in IE6) and have very light weight (packed version of library less 8kb). You can navigate through images using your mouse, mouse wheel, and even keyboard. The result – we will have a beautiful gallery with an intuitive interface. Today I will tell you about how to implement this gallery (you even will able to use this in any CMS as gallery of your member’s photos).

By default this gallery expect already prepared html data (with all images and thumbs). So it can be difficult to load dinamic content in it (different photos of different members). But its ok, we will force loading of necessary images when page finish loading using jQuery (we will load our images dinamically, using $.get function). We will use PHP to generate lists of necessary images and thumbs.

Ok, lets start, and lets check prepared demos and download ready package:

Live Demo 1
Live Demo 2
Live Demo 3
download in package

Lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" type="text/css" href="css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos.css" media="screen, projection" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie8.css" />
<![endif]-->

<script src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.sliderkit.1.5.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<div class="example">
    <h3><a href="#">Slider Kit example</a></h3>

    <div class="sliderkit photosgallery-std" id="sliderkit_galery">
        <div class="sliderkit-nav">
            <div class="sliderkit-nav-clip">
                <ul></ul>
            </div>
            <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
            <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
            <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div>
            <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div>
        </div>
        <div class="sliderkit-panels">
            <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous"><span>Previous</span></a></div>
            <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next"><span>Next</span></a></div>
        </div>
    </div>
</div>

You can notice, that currently we have empty UL inside ‘sliderkit-nav’. We will load its units on ‘jQuery(window).load’ event. Also, by default ‘sliderkit-panels’ should contain ready set of images too, we will load it after too. So currently we just prepared skeleton – interface elements (panels and buttons).

Now, make attention to class of our main gallery ‘photosgallery-std’. This class will determinate gallery view. For first example we using Standard view (‘photosgallery-std’, where ‘std’ – Standard shortly). Here are another possible classes: ‘photosgallery-captions’ (will display custom captions at images), ‘photosgallery-vertical’ (will display captions and make gallery vertically) and ‘photosgallery-minimalistic’ (minimalistic set, nothing). Another point, no need generate navigation buttons in case if you going to use ‘minimalistic’, they don`t will display anyway :)

In our package you will find ‘index2.html’ and also ‘index3.html’. This is just different gallery views.

Step 2. CSS

Here are used CSS files:

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

As usual – our main file for demo layout – very easy. But of course, pur new gallery have own css files:

css/sliderkit-core.css, css/sliderkit-demos-ie6.css, css/sliderkit-demos-ie7.css, css/sliderkit-demos-ie8.css and css/sliderkit-demos.css

All these files you will able to find in package (they are large enough to include them in the article)

Step 3. JS

Here are all JS files:

js/main.js

//jQuery(window).load() must be used instead of jQuery(document).ready() because of Webkit compatibility
jQuery(window).load(function() {
    $.get('feed.php', function(data){
        $('.sliderkit-nav-clip ul').append(data.thumbs);
        $('.sliderkit-panels').append(data.images);

        jQuery('#sliderkit_galery').sliderkit({
            mousewheel:true,
            keyboard:true,
            shownavitems:4,
            panelbtnshover:true,
            auto:true,
            circular:true,
            navscrollatend:true
        });
    });
});

So, when page loaded, I start loading extra info (about using thumbs and images) from feed.php using jQuery. After, appending received info (JSON) to the pending objects. And then – perform initialization of our gallery with necessary params. First demo will using mousewheel, keyboard, will display 4 elements in navigation, have auto scrolling. Full list of possible option I will put in end of article. Next file

js/main2.js

have similar structure, but another set of properties:

jQuery(window).load(function() {
    $.get('feed.php', function(data){
        $('.sliderkit-nav-clip ul').append(data.thumbs);
        $('.sliderkit-panels').append(data.images);

        jQuery('#sliderkit_galery').sliderkit({
            mousewheel:true,
            keyboard:true,
            shownavitems:4,
            auto:true,
            circular:true,
            navscrollatend:true,
            verticalnav:true,
            navclipcenter:true,
            navitemshover:true,
            panelfxspeed: 2000
        });
    });
});

And here are code for our third sample:

js/main3.js

jQuery(window).load(function() {
    $.get('feed.php', function(data){
        $('.sliderkit-nav-clip ul').append(data.thumbs);
        $('.sliderkit-panels').append(data.images);

        jQuery('#sliderkit_galery').sliderkit({
            mousewheel:true,
            keyboard:true,
            shownavitems:4,
            auto:true,
            circular:true,
            navscrollatend:true
        });
    });
});

js/jquery-1.5.2.min.js, js/jquery.easing.1.3.min.js, js/jquery.mousewheel.min.js and js/jquery.sliderkit.1.5.1.pack.js

This is list of all another used JS files (jquery library with gallery). Available in our package.

Step 4. PHP

Here are source code of our generator of images:

feed.php

<?

$sThumbTemplate = <<<HTML
<li><a href="#" rel="nofollow" title="{title}"><img src="{fileurl}" alt="{title}" /></a></li>
HTML;

$sImageTemplate = <<<HTML
<div class="sliderkit-panel">
    <img src="{fileurl}" alt="{title}" />
    <div class="sliderkit-panel-textbox">
        <div class="sliderkit-panel-text">
            <h4>{title}</h4>
            <p>{description}</p>
        </div>
        <div class="sliderkit-panel-overlay"></div>
    </div>
</div>
HTML;

$sThumbs = $sImages = '';
$sFolder = 'data_images/';

$aUnits = array(
    'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4',
    'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8',
    'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10'
);
foreach ($aUnits as $sFileName => $sTitle) {
    $sThumbs .= strtr($sThumbTemplate, array('{fileurl}' => $sFolder . 't_' . $sFileName, '{title}' => $sTitle));
    $sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle, '{description}' => $sTitle . ' photo description here'));
}

header("Content-Type: application/json");
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode(array('thumbs' => $sThumbs, 'images' => $sImages));

?>

Firstly, I defined 2 templates which going to use for generation of necessary info about using images and for thumbs and for images. Also will use JSON to be able to send both strings in one time (inside array). All our custom images located in ‘data_images’ directory. All thumbs – have prefix ‘t_’. Easy enough :)

Step 5. Images

Our Slider Kit gallery using next images:






And at last – table with all possible params (to current moment) of this gallery:

ParamTypeDefaultDescription
cssprefixstringsliderkitThe prefix to use on every CSS class names
startint0Set the start position. First is 0.
autobooleantrueActivate auto-scrolling
autospeedint4000Set the auto-scrolling speed (ms)
mousewheelbooleanfalseActivate the mousewheel navigation
keyboardbooleanfalseActivate the keyboard navigation. Very basic for now (left/right arrows only)
panelclickbooleanfalseActivate the 1-click navigation
circularbooleanfalseActivate the infinite nav scroll
shownavitemsint5Defines how many thumbnails to display in the nav clip
navitemshoverbooleanfalseIf set the panels will slide on nav thumbnails mouseover (by default panels slide on click)
navclipcenterbooleanfalseDefines if the nav clip must be center-aligned in the nav container
navcontinuousbooleanfalseIf set to true, will make the carousel scroll continuously (use this option with a “linear” scrolleasing)
navscrollatendbooleanfalseIf set to ‘true’, will make the carousel scroll if a line first or last thumbnail is clicked
navfxstringslidingDefine the carousel transition effect. Possible values: “sliding”, “none”
scrollintequal to ‘shownavitems’ option valueDefines how many nav thumbnails must be scrolled when nav buttons are clicked. Can’t be greater than the ‘shownavitems’ option value
scrollspeedint600Set the nav scroll speed (ms)
scrolleasingstringswingAdd an easing effect to the nav slide transition. Default jQuery easing functions are “swing” or “linear”.
swingstringfadingDefine the panels transition effect. Possible values: “fading”, “sliding”, “none”
panelfxspeedint700Set the panel slide transition effect speed (ms)
panelfxeasingstringswingAdd an easing effect to the panel slide transition. Default jQuery easing functions are “swing” or “linear”
panelfxfirststringnoneAdd a transition effect on the first displayed item. There are only 2 possible values for the moment: “fading” or “none”
panelfxbeforefunctionfunction(){}The function called before the panel transition start
panelfxafterfunctionfunction(){}The function called when panel transition is over
panelbtnshoverbooleanfalseIf set to true, go buttons will fade in/out on panel mouseover
verticalnavbooleanfalseSet the nav clip direction to vertical
verticalslidebooleanfalseSet the panel sliding direction to vertical (only if “panelfx” is defined as “sliding”)
tabsbooleanfalseRequired to build a tabs menu
freeheightbooleanfalseUse panels with no fixed height (in this case, ‘panelfx’ value can’t be “sliding”)
fastchangebooleantrueBy default the user can slide to the next content even if the slider is still running. You can stop this behavior by setting the “fastchange” option to false
debugbooleanfalseIf set to true, the script will stop on errors and return error code values. Check documentation
Live Demo 1
Live Demo 2
Live Demo 3
download in package

Conclusion

Today I told you how to build new jQuery gallery, even several. Sure that you will happy to use it in your projects. Good luck!

]]> http://www.script-tutorials.com/how-to-create-photo-gallery-using-slider-kit-jquery/feed/ 9 Cross-browser Supported Image Skew effect using Javascripthttp://www.script-tutorials.com/cross-browser-image-shaking-effect-using-javascript/ http://www.script-tutorials.com/cross-browser-image-shaking-effect-using-javascript/#comments Tue, 10 May 2011 17:34:12 +0000 admin http://www.script-tutorials.com/?p=613

Related Stuff You Will Love!

  1. How to Create Cross Browser Compatible Flare Lens Effect using Javascript How to Create Cross Browser Compatible Flare Lens Effect using Javascript
  2. Creating Cross-browser Compatible Wave Effects Using Javascript Creating Cross-browser Compatible Wave Effects Using Javascript
  3. Creating Animated Particles in Water Effect using JavaScript Creating Animated Particles in Water Effect using JavaScript
]]> Crossbrowser image shaking effect

Cross-browser image shaking effect using javascript

Today’s lesson quite entertaining, we’ll learn how to construct a shaking effect. For clarity, we will apply this effect to the picture. You will need to hold down by mouse a certain area in the image and move it to another location (drag). Now, I sure that better to see our online demonstration. How did it achieve? In principle, simply enough, the entire ‘image’ divided into 4 sectors. Place, where we will begin to drag by mouse – is the boundary separating of our four pictures. And shaking effect itself – will only change the sizes of our sectors and pictures in them. Read more.

Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<html>
<head>
    <title>Image shaking effect using pure JavaScript</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/main.js"></script>
</head>
 <body>
    <div class="example">
        <div id="main_object">
            <div class="tl"><img alt="" src="image.jpg"></div>
            <div class="tr"><img alt="" src="image.jpg"></div>
            <div class="bl"><img alt="" src="image.jpg"></div>
            <div class="br"><img alt="" src="image.jpg"></div>
        </div>
    </div>
 </body>
</html>

Here are main object with 4 images inside

Step 2. CSS

Here are single CSS file with all necessary styles:

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:900px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#main_object{position:relative;width:900px;height:675px;overflow:hidden;cursor:pointer}
#main_object div{position:absolute;overflow:hidden}
#main_object img{position:absolute;-ms-interpolation-mode:nearest-neighbor}
#main_object .tl,#main_object .tl img{top:0;left:0}
#main_object .tr,#main_object .tr img{top:0;right:0}
#main_object .bl,#main_object .bl img{bottom:0;left:0}
#main_object .br,#main_object .br img{right:0;bottom:0}

Step 3. JS

Here are our main Javascript:

js/main.js

var ishk = {
    // variables
    speedD : .98, // degree of attenuation
    speedX : 50, // speed by X
    speedY : 60, // speed by X

    // inner variables
    xm   : 0,
    ym   : 0,
    sx   : 1,
    sy   : 1,
    svx  : 0,
    svy  : 0,
    xd   : 1,
    yd   : 1,
    drag : false,

    // initialization
    init : function() {
        // firstly we will pass through all inner div`s and its images and collect styles
        this.mobj = document.getElementById('main_object');
        var div = this.mobj.getElementsByTagName('div');
        this.d = [];
        this.i = [];
        for (var i = 0; i<4; i++) {
            this.d[i] = div[i].style;
            this.i[i] = div[i].getElementsByTagName('img')[0].style;
        }

        // set initial params of our generated result
        this.resize();

        // prevent text selection in IE
        document.onselectstart = function() {
            return false;
        }
        // prevent IE from trying to drag an image
        this.mobj.ondrag = function() {
            return false;
        }
        // mouse down event, we will set 'drag flag to true, change cursor and positions
        this.mobj.onmousedown = function() {
            ishk.drag = true;
            ishk.mobj.style.cursor = 'move';
            ishk.xd = ishk.xm - ishk.nx;
            ishk.yd = ishk.ym - ishk.ny;
            return false;
        }
        // on mouse up - release 'drag' flag, change pointer
        document.onmouseup = function() {
            ishk.drag = false;
            ishk.mobj.style.cursor = 'pointer';
            return false;
        }
        // set max sizes to last image
        this.i[3].width =  ishk.nw;
        this.i[3].height = ishk.nh;
        // and initial positions too
        ishk.sx = ishk.nx;
        ishk.sy = ishk.ny;

        // start looping
        this.shake();
    },

    // refreshing mouse positions
    mousemove : function(e) {
        this.xm = e.clientX;
        this.ym = e.clientY;
    }, 

    // sub init of initial positions, plus, in case of window resizing - repeat too
    resize : function() {
        var o = ishk.mobj;
        for (ishk.nx = 0, ishk.ny = 0; o != null; o = o.offsetParent)
            ishk.nx += o.offsetLeft, ishk.ny += o.offsetTop;
        ishk.nw = ishk.mobj.offsetWidth;
        ishk.nh = ishk.mobj.offsetHeight;
    },

    // main shaking function
    shake : function() {
        // in case of mouse move and dragging - change center position
        if (ishk.drag) {
            ishk.sx = ishk.xm;
            ishk.sy = ishk.ym;
        } else { // otherwise - attenuation
            ishk.svx = ishk.speedD * ishk.svx - (ishk.sx - ishk.xd - ishk.nx) / ishk.speedX;
            ishk.svy = ishk.speedD * ishk.svy - (ishk.sy - ishk.yd - ishk.ny) / ishk.speedY;
            ishk.sx += ishk.svx;
            ishk.sy += ishk.svy;
        }

        // calculation new widths and heights of our div`s and images
        var w0 = Math.max(0, Math.round(ishk.sx) - ishk.nx);
        var h0 = Math.max(0, Math.round(ishk.sy) - ishk.ny);
        var w1 = Math.max(0, ishk.nw - (Math.round(ishk.sx) - ishk.nx));
        var h1 = Math.max(0, ishk.nh - (Math.round(ishk.sy) - ishk.ny));
        var w2 = Math.max(0, Math.round((w0 * ishk.nw) / ishk.xd));
        var h2 = Math.max(0, Math.round((h0 * ishk.nh) / ishk.yd));
        var w3 = Math.max(0, Math.round((w1 * ishk.nw) / (ishk.nw - ishk.xd)));
        var h3 = Math.max(0, Math.round((h1 * ishk.nh) / (ishk.nh - ishk.yd)));

        // apply new widths
        ishk.d[0].width = w0 + 'px';
        ishk.d[1].width = w1 + 'px';
        ishk.d[2].width = w0 + 'px';
        ishk.d[3].width = w1 + 'px';
        ishk.d[0].height = h0 + 'px';
        ishk.d[1].height = h0 + 'px';
        ishk.d[2].height = h1 + 'px';
        ishk.d[3].height = h1 + 'px';
        ishk.i[0].width = w2 + 'px';
        ishk.i[1].width = w3 + 'px';
        ishk.i[2].width = w2 + 'px';
        ishk.i[3].width = w3 + 'px';
        ishk.i[0].height = h2 + 'px';
        ishk.i[1].height = h2 + 'px';
        ishk.i[2].height = h3 + 'px';
        ishk.i[3].height = h3 + 'px';

        // looping current function
        setTimeout(ishk.shake, 20); // 1/50*1000 = 20ms (for 50 fps) :)
    }
};

window.onload = function() {
    ishk.init(); // first initialization

    // binding mouse move event
    document.onmousemove = function(e) {
        if (window.event) e = window.event; // for IE
        ishk.mousemove(e);
    }

    // binding onresize event
    window.onresize = ishk.resize;
}

It is rather simple. When the page loads – I initialize our main object, and link all the necessary events. Then, after initialization, I loop our main ‘shake’ function, which changing sizes of all our 4 images (sectors).

Step 4. Images

For our demo I used only one image:

img_01

Live Demo
download in package

Conclusion

Today I told you how to create easy shaking effect to images. Commonly – you can try to play with any another objects too. Hope our javascript lessons still interesting for you. Good luck!

]]> http://www.script-tutorials.com/cross-browser-image-shaking-effect-using-javascript/feed/ 3 Brilliant Examples of CSS3 Animationshttp://www.script-tutorials.com/brilliant-examples-of-css3-animations/ http://www.script-tutorials.com/brilliant-examples-of-css3-animations/#comments Tue, 26 Apr 2011 17:47:30 +0000 admin http://www.script-tutorials.com/?p=563

Related Stuff You Will Love!

  1. How to use Multiple backgrounds and Animation with CSS3 How to use Multiple backgrounds and Animation with CSS3
  2. 10 Fresh & Impressive HTML5 Canvas (and WebGL) Examples 10 Fresh & Impressive HTML5 Canvas (and WebGL) Examples
]]> CSS3 Animation demonstration

CSS3 Animation demonstration

Have you ever wondered about the use of CSS3 for creating videos? But in common it is possible too (using the animation features in CSS3). CSS3 is not fully mastered, many things may seem surprising for the average user. The only unpleasant moment, CSS3 is still not supported by most Web browsers at the moment. But do not worry, it’s a matter of time, and hopefully very soon, most browsers will support it. Well, Naomi Atkinson, Andy Clarke, Dan Rubin and Mircea Piturca prepared website to the international community, demonstrating the power of animation in CSS.

On this site you already can view the video shows the possibilities of this project.

coming possibilities of css3 animation

At the moment the project is still under development, but from the video, we see that the interface is quite complex and resembles the interface of video editor. But it seems that the animation will be very interesting and simple (as they promising from video) process.

At current moment Madmanimation demo working only at Webkit browsers (Chrome, Safari) on any platform or device — including Android, BlackBerry, iOS and WebOS. Other browsers possible not will display it.

Madmanimation demo in Chrome

If you are not a happy owner of the ones listed above you will see only the following

Madmanimation demo in Firefox

Madmanimation demo using Media Queries, so, it shoult ajust screen appearance due resizing sizes of browser :)

Conclusion

Well, let’s hope that everything will fine in this team, and soon all browsers will support CSS3 in full. Good luck !

]]> http://www.script-tutorials.com/brilliant-examples-of-css3-animations/feed/ 4 How to Control Text Properties using jQuery and UI Sliderhttp://www.script-tutorials.com/text-animation-jquery-ui-slider/ http://www.script-tutorials.com/text-animation-jquery-ui-slider/#comments Fri, 04 Mar 2011 17:28:35 +0000 admin http://www.script-tutorials.com/?p=378

Related Stuff You Will Love!

  1. Creating a Rotating Slider with Easing Effects in jQuery Creating a Rotating Slider with Easing Effects in jQuery
  2. How to Create Animated Photo Gallery using jQuery (Slider Kit) How to Create Animated Photo Gallery using jQuery (Slider Kit)
  3. How to Create your own jQuery Slider Plugin How to Create your own jQuery Slider Plugin
]]> How to Control Text Properties using jQuery and UI Slider

Today I will tell how you can use jQuery to animate and control your text. We will changing font size, font family and other properties. Where we can use this? As example to allow your users to customize view of text boxes in your website. So, playing with styles – users will be able to select preferred styles, and you will need just save these styles for him, or, you can use this as some zoon for your website, which will allow to change font size in realtime. Also we will using jQuery slider to manipulate with properties to make it more interactive.

Here are samples and downloadable package:

Live Demo
download in package
Ok, download the source files and lets start coding !

Step 1. HTML

This is our HTML file with 4 different sliders to change styles:

index.html

<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script src="js/main.js"></script>

<div class="examples">
    <h2>Text animation with jQuery and UI slider</h2>
    <div class="column">
        <p>
            <label for="font_size">Font size:</label>
            <input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider1"></div>
    </div>
    <div class="column">
        <p>
            <label for="font_family">Font family:</label>
            <input type="text" id="font_family" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider2"></div>
    </div>

    <div class="column">
        <p>
            <label for="font_weight">Font weight:</label>
            <input type="text" id="font_weight" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider3"></div>
    </div>
    <div class="column">
        <p>
            <label for="text_align">Text align:</label>
            <input type="text" id="text_align" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider4"></div>
    </div>
    <div style="clear:both"></div>
    <div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
    <div style="clear:both"></div>
</div>

Step 2. CSS

Here are all used CSS files:

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
.column{float:left;width:45%;padding:20px}
.box{-moz-border-radius:5px;background-color:#DDD;border:1px solid #000;clear:both;width:50%;margin:10px auto;padding:10px}

css/jquery.ui.slider.css, css/jquery.ui.theme.css

Both these files belong to jQuery library, and no need to publish its code directly in our post, both files already available in package

Step 3. JS

js/main.js

$(function() {
    $('#slider1').slider({
        value:12,
        min: 10,
        max: 20,
        step: 1,
        slide: function( event, ui ) {
            $('#font_size').val(ui.value + ' px');
            $('.box').css('font-size', ui.value);
        }
    });
    $('#font_size').val($('#slider1').slider('value') + ' px');

    var aFonts = new Array('', 'Verdana', 'arial', 'Tahoma', 'Times New Roman', 'Georgia');
    $('#slider2').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontFamily = aFonts[ui.value];
            $('#font_family').val(sFontFamily);
            $('.box').css('font-family', sFontFamily);
        }
    });
    $('#font_family').val(aFonts[$('#slider2').slider('value')]);

    var aWeights = new Array('', 'normal', 'bold', 'bolder', 'lighter', 'inherit');
    $('#slider3').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontWeight = aWeights[ui.value];
            $('#font_weight').val(sFontWeight);
            $('.box').css('font-weight', sFontWeight);
        }
    });
    $('#font_weight').val(aWeights[$('#slider3').slider('value')]);

    var aAligns = new Array('', 'left', 'right', 'center', 'justify');
    $('#slider4').slider({
        value:1,
        min: 1,
        max: 4,
        step: 1,
        slide: function(event, ui) {
            var sTextAlign = aAligns[ui.value];
            $('#text_align').val(sTextAlign);
            $('.box').css('text-align', sTextAlign);
        }
    });
    $('#text_align').val(aAligns[$('#slider4').slider('value')]);
});

Here are you can see initializations of 4 UI sliders. For changing font size, font family, bold style and text align for text of our text box. Hope this is very easy to understand how to use it.

js/jquery.min.js, js/jquery.ui.core.js, js/jquery.ui.mouse.js, js/jquery.ui.slider.js, js/jquery.ui.widget.js

All this – just jQuery libraries, its necessary for our UI slider. All these libraries available in package.

Live Demo
download in package

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

]]> http://www.script-tutorials.com/text-animation-jquery-ui-slider/feed/ 8 Easily Animate Web Buttons/Objects using jQueryhttp://www.script-tutorials.com/easily-animate-web-buttonsobjects-using-jquery/ http://www.script-tutorials.com/easily-animate-web-buttonsobjects-using-jquery/#comments Wed, 08 Sep 2010 16:12:20 +0000 admin http://www.script-tutorials.com/?p=205

Related Stuff You Will Love!

  1. Creating a Rotating Slider with Easing Effects in jQuery Creating a Rotating Slider with Easing Effects in jQuery
  2. Positioning Backgrounds with Jquery Positioning Backgrounds with Jquery
  3. Easily Interact between Server and Client using these jQuery with Ajax Snippets Easily Interact between Server and Client using these jQuery with Ajax Snippets
]]> Easily Animate Web Buttons/Objects using jQuery

Today I will tell you about animations in web using jQuery. As we know – jQuery offer us several default methods of effects: fade(In/Out/To), hide, show, slide(Down/Toggle/Up), toggle. This is ok, but what if we need more? So, animation will help us! It will help to slide between 2 states using really good effects. By default, ‘easing’ is optional param, so to use extra effects we will use additional jquery.easing.js library.

Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML.

This is our main page code.

index.html

<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/main.js"></script>

<link rel="stylesheet" href="templates/css/main.css" type="text/css" />

<div class="animation_example">
    <h3><a href="#">Animation in jQuery</a></h3>
    <div>
        <div style="margin-bottom:10px;">
            <h4>Sample object:</h4>
            <div class="example_keeper">
                <img id="example" src="files/image.jpg"/>
            </div>
            <div class="actions">
                <input type="radio" value="width" checked name="action" class="action"> Changing width
                <input type="radio" value="position" name="action" class="action"> Changing position
                <input type="radio" value="opacity" name="action" class="action"> Changing opacity
                <select class="selector"></select>
            </div>
        </div>
        <p>
            <b>An example of animations.</b> I made 3 different types of animations: changing size (width), position and opacity. Also I pull all possible effects of easing into Select element. Just choose necessary type and select effect to get demonstration. Try it!
        </p>
    </div>
</div>

Step 2. CSS

Here are used CSS styles.

templates/css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.animation_example{background:#FFF;width:865px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.actions{margin:10px 0}
.example_keeper{overflow: hidden;width:100%;height:520px;border:1px solid #DDD;background-color:#eee}

Step 3. JS

Here are necessary JS files to our project.

js/main.js

$(document).ready(function() {
    var sel1 = $(".selector");
    for (x in jQuery.easing) { // collecting all possible methods of easing
        sel1.append($('<option>').attr('value', x).text(x));
    }

    sel1.change(function(){
        var method = $(this).val();
        var effect = $('input[name=action]:checked').val();

        switch (effect) {
            case 'width':
                $('#example').animate({width:512}, {duration: 1000, easing: method})
                    .animate({width:256}, {duration: 1000, easing: method});
                break;
            case 'position':
                $('#example').animate({marginLeft:256}, {duration: 1000, easing: method})
                    .animate({marginLeft:0}, {duration: 1000, easing: method});
                break;
            case 'opacity':
                $('#example').animate({opacity:0}, {duration: 1000, easing: method})
                    .animate({opacity:1}, {duration: 1000, easing: method});
                break;
        }
    });
});

js/jquery.easing.1.3.js and js/jquery.min.js

This is common files – jQuery library with addon. No need to give full code of that file here. It always available as a download package

Step 4. Images

Also we need source image for our project:

    source image
Live Demo
download in package

Conclusion

Today I told you how using animations in jQuery. Sure that you will happy to use it in your projects. Good luck!

]]> http://www.script-tutorials.com/easily-animate-web-buttonsobjects-using-jquery/feed/ 13