Saturday, September 23, 2017

Fade In and Fade Out Effect Using jQuery


jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

With jQuery you can fade an element in and out of visibility.



jQuery has the following fade methods:
  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
Syntax:

$(selector).fadeIn(speed,callback);
  •  The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
  • The optional callback parameter is a function to be executed after the fading completes.

The jQuery fadeOut() method is used to fade out a visible element.

     Syntax:

     $(selector).fadeOut(speed,callback);
  • The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
  • The optional callback parameter is a function to be executed after the fading completes.

By using jQuery we can animate with the images.

Step 1:

Add jQuery CDN on your page.

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>

Step 2:

Add appropriate CSS in the page. Better ways to create CSS file externally and include it on your page.

<style>
    .img_outer {
        width: 310px;
        height: 344px;
        position: relative;
        float: left;
        margin: 10px;
    }

    .img_outer img {
        position: absolute;
        z-index: 1;
        cursor: pointer;
    }

    .img_blur {
        opacity: 0.84;
    }
</style>

Step 3:

Now add multiple images in the page. So that we can implement this effect on multiple images.

<body style="height: 1000px">
    <div class="list_leftp">
        <div class="img_outer">
            <a href="#" data-hr="http://parthhdave.blogspot.in/">
                <img src="image_1.jpg" width="310" height="400" />
            </a>
        </div>
        <div class="img_outer">
            <a href="#" data-hr="http://parthhdave.blogspot.in/">
                 <img src="image_2.jpg" width="310" height="400"/>
            </a>
        </div>
        <div class="img_outer">
            <a href="#" data-hr="http://parthhdave.blogspot.in/">
                 <img src="image_3.jpg" width="310" height="400"/>
            </a>
        </div>
        <div class="img_outer">
            <a href="#" data-hr="http://parthhdave.blogspot.in/">
                 <img src="image_4.jpg" width="310" height="400" />
            </a>
        </div>
    </div>
</body>

The data-hr attribute is defined for assigning a link to <a>. Read the concept of data attribute for more detail.

Step 4:

Now the main step, we have to write jQuery script for implementing effect.

<script type="text/javascript">
    $(document).ready(function(e) {
        $('img').hover(function() {
            $('.img_outer img').addClass('img_blur');
            $(this).removeClass('img_blur').animate({
                'left': '-10px',
                'top': '-10px',
                'width': '330px'
            });
        }, function() {
            $('.img_outer img').removeClass('img_blur');
            $(this).animate({
                'left': '0',
                'top': '0',
                'width': '310px'
            });
        });
        $(document).on('click', 'a', function(event) {
            var x = $(this).attr('data-hr');
            $(this).find('img').fadeOut(700).fadeIn(700, function(event) {
                window.open(x, "_blank");
            });
            event.preventDefault();

        });
    });
</script>

Now I am going to explain this code.

On hower event of an Image img_blur class is added for opacity for an image. After this step, left, top and width properties are set to animate an image.

Once these properties are set, remove that particular class and reset all those properties to their default values.

Remaining lines of code are for redirection and fade in/fade out the effect of an image.

When you click on the image (<a>), value of a data-hr attribute is stored in variable x. In the step, we have set time for fade in & fade out effect in milliseconds. 

Guys, hope you understand the concept. Please take help from attached code if you require. If you have any query, feel free to ask me.

Source Code

Wednesday, June 14, 2017

Beautification in Brackets

Brackets Extension that formats open HTML, CSS and JavaScript files using js-beautify.

Brackets Beautification Package given by Adobe.You can download it.


It creates Auto Indentation when user presses Ctrl + S  (Save). Once you install this package using extension manager,Two new options are added in Edit Menu which are Beautify and Beautify on save.




Happy learning ...!!! 

Thursday, May 4, 2017

Step by Step Guide to Create Deployment Build Using Gulp Automation

Gulp is a JavaScript task runner that enables automation and crunching of monotonous tasks all in one swoop. In a modern workflow, there is probably a host of tools that you're using in development and production. Some of the more popular ones are script concatenation and minification, and Sass compilation.


Gulp


It's often used to do front end tasks like:
·         Spinning up a web server
·         Reloading the browser automatically whenever a file is saved
·         Using preprocessors like Sass or LESS
·         Optimizing assets like CSS, JavaScript, and images
·         Gulp runs much, much faster. Tasks get crunched quicker, and the time you spend between writing code and seeing the changes in the browser is significantly less.

The first step to using Gulp is to require it in the gulp file.

var gulp = require('gulp');

The require statement tells Node to look into the node_modules folder for a package named gulp Once the package is found, we assign its contents to the variable gulp.
The basic syntax of a gulp task is:
gulp.task('task-name',function(){
});
task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp.
Now, Let's create some variables and assign meaningful values to them.
var paths = {uisource: "UI", // Development Environment
    builddestination: "Build", //Build/Deployment Server
   };
We store folder names to the variables. So later when I want to change the name of the folder, I will have to change the values of var paths {} instead of doing change in the whole gulp file. 
Let's move on to create a Project.
You need to have Node.js (Node) installed onto your computer before you can install Gulp.
If you do not have Node installed already, you can get it by downloading the package installer from Node's website.
When you're done with installing Node, you can install Gulp by using the following command on the command line:
npm install --save-dev-g gulp
The -g flag in this command tells npm to install Gulp globally onto your computer, which allows you to use the gulp command anywhere on your system.
If you check the project folder when the command has finished executing, you should see that Gulp has created a node_modules folder. You should also see a gulp folder within node_modules.
When you're done with installing Gulp, you can create the package.json file by using the following command on the command line:
npm init
A package.json file contains metadata about your app or module. Most importantly, it includes the list of dependencies to install from npm when running "npm install" command. If you're familiar with Ruby, it's similar to a Gemfile. 
Gulp is flexible enough to work with any folder structure.
For this article, we will use the following structure.
 |- gulp/
        |- Build/
               |- content/
               |- fonts/
               |- images/
               |- js
       |- UI/
               |- content/
               |- fonts/
               |- images/
               |- js
               |- html
               |- scss
       |- index.html
       |- gulpfile.js
       |- node_modules
       |- package.json          
Now let’s create the first task of connecting to Build/Deployment Server.
We import gulp-connect Plugin which is used to run a web server (with Livereload).

gulp.task('connect', function () {
    console.log("Connect to the Server");
    connect.server({
        root: ".",
        port: 8888,
        livereload: true
    });
})

Now we'll create another task of opening files and URLs on Build/Deployment Server.

We import gulp-open Plugin to achieve this task.

gulp.task('open', function () {
    console.log("Open index.html on Localhost");
    gulp.src('index.html')
        .pipe(open({
            uri: 'http://localhost:8888/'
        }));
})

Now let’s create a task of moving HTML from Development Environment to Build/Deployment Server.

We import gulp-inject and gulp-inject-reload Plugin which is used to inject file references into your index.html.

gulp.task("movehtml", () => {
    console.log("Moving HTMLs to Build/Production Server With Auto Injecting CSS and Js files");
    var userScripts = pipes.devGetAndCopyValidatedUserScripts();
    var userCss = pipes.devGetAndCopyValidatedCss();
    return gulp.src(paths.uisource + '/html/*.{html,htm}')
        .pipe(inject(userScripts, {
            relative: true,
            name: 'bower'
        }))
        .pipe(inject(userCss, {
            relative: true,
            name: 'inject'
        }))
        .pipe(injectReload())
        .pipe(gulp.dest('.'))
        .pipe(connect.reload());
})
pipes.devGetAndCopyValidatedUserScripts = () => {
    return gulp.src([paths.builddestination + '/js/*.min.js']);
}
pipes.devGetAndCopyValidatedCss = () => {
    return gulp.src([paths.builddestination + '/content/*.min.css']);
}

Now we'll create another task of moving CSS from Development Environment to Build/Deployment Server.

We import gulp-cssmin Plugin which is used to minify CSS files.

gulp.task('minifycss', function () {
    console.log("Minify Css files");
    return gulp.src(paths.uisource + '/content/*.css')
        .pipe(cssmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(paths.builddestination + '/content/'))
        .pipe(connect.reload());
})

Then, will create another task of moving Js from Development Environment to Build/Deployment Server. 

We import gulp-uglify Plugin which is used to minify files.

gulp.task('minifyjs', function () {
  console.log("Minify Js files");
  return gulp.src(paths.uisource + '/js/*.js')
  .pipe(gulpIf('*.js', uglify()))
  .pipe(rename({
    suffix: '.min'
  }))
  .pipe(gulp.dest(paths.builddestination + '/js/'))
  .pipe(connect.reload());
})

Let's move our fonts from Development Environment to Build/Deployment Server. Generally we use pipe symbol “|” for “or" conditions.

gulp.task('movefont', function () {
  console.log("Moving all fonts in Fonts folder");
  return gulp.src(paths.uisource + '/fonts/*.+(ttf|ttc|pfb|pfm|otf|eot|svg|woff|woff2|pfa|afm|dfont)')
  .pipe(gulp.dest(paths.builddestination + '/fonts/'))
  .pipe(connect.reload());
})


Let's move our Images from Development Environment to Build/Deployment Server.

We import gulp-imagemin Plugin which is used to minify PNG, JPEG, GIF and SVG images.

gulp.task('optimizeimage', function () {
  console.log("Optimize Image files");
  return gulp.src(paths.uisource + '/images/*.+(png|jpg|jpeg|gif|svg)')
  // Caching images that ran through imagemin
  .pipe(cache(imagemin({
    interlaced: true
  })))
  .pipe(gulp.dest(paths.builddestination + '/images/'))
  .pipe(connect.reload());
})

Now create a task which converts Sass files to CSS files and moves CSS files from Development Environment to Build/Deployment Server. 

For this task, we require a couple of Plugins like gulp-sass, gulp-rename, gulp-autoprefixer and gulp-sourcemaps.

Autoprefixer parses CSS files and adds vendor prefixes to CSS rules.Gulp sourcemaps will interpolate between transformations. So that you keep track of every change that happened.

gulp.task('sass', function () {
    console.log("Convert Sass to CSS files");
    return gulp.src(paths.uisource + '/scss/*.scss') // Gets the styles.scss file
        .pipe(sourcemaps.init()) // Initialize sourcemap plugin
        .pipe(sass()) // Passes it through a gulp-sass task
        .pipe(autoprefixer()) // Passes it through gulp-autoprefixer
        .pipe(sourcemaps.write()) // Writing sourcemaps
        .pipe(gulp.dest(paths.uisource + '/content/')) // Outputs it in the content folder
        .pipe(cssmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(paths.builddestination + '/content/'))
        .pipe(connect.reload());
})

Now create a task for Deleting Files from Development Environment. Generally, this task runs at the very first stage, before creating a new build.

We import del Plugin which is used to delete files and folders.

gulp.task('delete', function () {
    console.log("Delete files");
    return del.sync(paths.uisource + '/*.+(ttf|ttc|pfb|pfm|otf|eot|svg|woff|woff2|pfa|afm|dfont|html|htm|css|js|png|gif|jpg|jpeg|svg)')
})

Create a task for clearing all Cache from Local Machine. We import gulp-cache Plugin to perform this task.

gulp.task('clearcache', function (callback) {
    console.log("Clearing all Cache from Local Machine");
    return cache.clearAll(callback)
})

Create a task for watching the changes in the files. Watch method is used to monitor your source files. When any changes to the source file are made, the watch will run an appropriate task.

The basic syntax of a gulp.watch() method is:

gulp.watch(Path of Source File', ['Task to be Run']);

We import gulp-watch Plugin to perform this task.

gulp.task('watch', function () {
    console.log("Watch for Changes");
    gulp.watch(paths.uisource + '/html/index.html', ['movehtml']);
    gulp.watch(paths.uisource + '/content/*.css', ['minifycss']);
    gulp.watch(paths.uisource + '/scss/*.scss', ['sass']);
    gulp.watch(paths.uisource + '/js/*.js', ['minifyjs']);
    gulp.watch(paths.uisource + '/fonts/*.+(ttf|ttc|pfb|pfm|otf|eot|svg|woff|woff2|pfa|afm|dfont)', ['movefont']);
    gulp.watch(paths.uisource + '/images/*.+(png|jpg|jpeg|gif|svg)', ['optimizeimage']);
})

Create the last task which runs a sequence of gulp tasks in the specified order.

We import run-sequence Plugin to perform this task.

gulp.task('default', function () {
    runSequence(['delete', 'clearcache', 'minifyjs', 'minifycss', 'optimizeimage', 'movefont', 'movehtml', 'connect', 'open', 'watch'])
})

It's default task of gulp.When you fire a command from cmd (Command Prompt) as "gulp" then this task will run. 

Now our whole gulp file is ready to run....

var gulp = require('gulp');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var inject = require("gulp-inject");
var injectReload = require("gulp-inject-reload");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect');
var open = require('gulp-open');

var paths = {
    uisource: "UI",
    builddestination: "Build",
    uisourcecontect: "content",
    uisourcescss: "scss",
    builddestinationcontent: "content"
};
var pipes = {};

gulp.task('watch', function () {
    console.log("Watch for Changes");
    gulp.watch(paths.uisource + '/html/index.html', ['movehtml']);
    gulp.watch(paths.uisource + '/content/*.css', ['minifycss']);
    gulp.watch(paths.uisource + '/scss/*.scss', ['sass']);
    gulp.watch(paths.uisource + '/js/*.js', ['minifyjs']);
    gulp.watch(paths.uisource + '/fonts/*.+(ttf|ttc|pfb|pfm|otf|eot|svg|woff|woff2|pfa|afm|dfont)', ['movefont']);
    gulp.watch(paths.uisource + '/images/*.+(png|jpg|jpeg|gif|svg)', ['optimizeimage']);
})
gulp.task('movefont', function () {
    console.log("Moving all fonts in Fonts folder");
    return gulp.src(paths.uisource + '/fonts/*.+(ttf|ttc|pfb|pfm|otf|eot|svg|woff|woff2|pfa|afm|dfont)')
        .pipe(gulp.dest(paths.builddestination + '/fonts/'))
        .pipe(connect.reload());
})
gulp.task('minifyjs', function () {
    console.log("Minify Js files");
    return gulp.src(paths.uisource + '/js/*.js')
        .pipe(gulpIf('*.js', uglify()))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(paths.builddestination + '/js/'))
        .pipe(connect.reload());
})
gulp.task('minifycss', function () {
    console.log("Minify Css files");
    return gulp.src(paths.uisource + '/content/*.css')
        .pipe(cssmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(paths.builddestination + '/content/'))
        .pipe(connect.reload());
})
gulp.task("movehtml", () => {
    console.log("Moving HTMLs to Build/Production Server With Auto Injecting CSS and Js files");
    var userScripts = pipes.devGetAndCopyValidatedUserScripts();
    var userCss = pipes.devGetAndCopyValidatedCss();
    return gulp.src(paths.uisource + '/html/*.{html,htm}')
        .pipe(inject(userScripts, {
            relative: true,
            name: 'bower'
        }))
        .pipe(inject(userCss, {
            relative: true,
            name: 'inject'
        }))
        .pipe(injectReload())
        .pipe(gulp.dest('.'))
        .pipe(connect.reload());
})
pipes.devGetAndCopyValidatedUserScripts = () => {
    return gulp.src([paths.builddestination + '/js/*.min.js']);
}
pipes.devGetAndCopyValidatedCss = () => {
    return gulp.src([paths.builddestination + '/content/*.min.css']);
}
gulp.task('connect', function () {
    console.log("Connect to the Server");
    connect.server({
        root: ".",
        port: 8888,
        livereload: true
    });
})
gulp.task('open', function () {
    console.log("Open index.html on Localhost");
    gulp.src('index.html')
        .pipe(open({
            uri: 'http://localhost:8888/'
        }));
})
gulp.task('optimizeimage', function () {
    console.log("Optimize Image files");
    return gulp.src(paths.uisource + '/images/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest(paths.builddestination + '/images/'))
        .pipe(connect.reload());
})
gulp.task('sass', function () {
    console.log("Convert Sass to CSS files");
    return gulp.src(paths.uisource + '/scss/*.scss') // Gets the styles.scss file
        .pipe(sourcemaps.init()) // Initialize sourcemap plugin
        .pipe(sass()) // Passes it through a gulp-sass task
        .pipe(autoprefixer()) // Passes it through gulp-autoprefixer
        .pipe(sourcemaps.write()) // Writing sourcemaps
        .pipe(gulp.dest(paths.uisource + '/content/')) // Outputs it in the content folder
        .pipe(cssmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(paths.builddestination + '/content/'))
        .pipe(connect.reload());
})
gulp.task('delete', function () {
    console.log("Delete files");
    return del.sync(paths.uisource + '/*.+(ttf|ttc|pfb|pfm|otf|eot|svg|woff|woff2|pfa|afm|dfont|html|htm|css|js|png|gif|jpg|jpeg|svg)')
})
gulp.task('clearcache', function (callback) {
    console.log("Clearing all Cache from Local Machine");
    return cache.clearAll(callback)
})
gulp.task('default', function () {
    runSequence(['delete', 'clearcache', 'minifyjs', 'minifycss', 'optimizeimage', 'movefont', 'movehtml', 'connect', 'open', 'watch'])
})

Now Open your cmd (Command Prompt), go to Project Path where your gulp file is located. Type gulp or gulp default in cmd. 

Our gulp file runs like this....



Now, your final Deployment Build is ready. 

Our final Project Structure looks like this....


Guys, now you have now leveled up by knowing how to deal with Gulp. 

I am attaching whole Project Source Code along with the package.json file.Thus, you don't need to download any dependencies which require running gulp file.   





Sunday, April 23, 2017

JQuery Parallax Effect


What does jQuery.parallax do?

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move in a parallax kind of way.

With a bit of CSS, you can either set up windows to see these layers through or leave them free to roam about.

The diagram below illustrates what jParallax does to the html:

j Query Parallax Effect
Using jParallax

The default behavior of jParallax is to show the whole width of a layer in response to the mouse traveling the whole width of the mouseport. When the mouse is moved to the extreme left-hand side of the mouseport the left-hand side of the layer meets the left-hand side of its viewport, and when the mouse is moved to the extreme right-hand side of the mouseport the right-hand side of the layer arrives at the right-hand-side of its viewport.

Therefore, the simplest way to use jParallax is to make the layers different sizes using CSS. Bigger layers move faster and unless a layer is smaller than the viewport, its edges are never seen.

To see layers through a viewport, wrap them in a container with the style,

1.    <ul>  
2.        <li class=” parallax-layer”></li>  
3.        <li class=” parallax-layer”></li>  
4.    </ul>  

CSS:

1.    #content  
2.    {  
3.        background - color: #FFFFFF;  
4.        text - align: left;  
5.        padding: 0 px;  
6.    }  
7.      
8.    h1  
9.    {  
10.     padding: 20 px;  
11.     background - color: gray;  
12.     color: white;  
13.     margin: 0;  
14.     text - shadow: #9E9B9B 2px 2px 2px;  
15. text-align: center;  
16. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#E3E1E1',  
17.     endColorstr = '#CCCACA'); /* for IE */  
18. background: -webkit - gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */  
19. background: -moz - linear - gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */  
20. }  
21.   
22. .large  
23. {  
24.     font - size: 22 px;  
25. }  
26.   
27. .orange   
28. {  
29.     color: orange;  
30. }  
31.   
32. .italic  
33. {  
34.     font - style: italic;  
35. }  
36.   
37. .textmiddle   
38. {  
39.     vertical - align: middle;  
40. }  
41.   
42. .padout   
43.  {  
44.     padding - left: 25 px;  
45.     padding - right: 25 px;  
46. }  
47.   
48. .rounded - corners   
49. {  
50.     -moz - border - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;  
51.     border - radius: 40 px;  
52. }  
53.   
54. .rounded - corners - top  
55.  {  
56.     -moz - border - top - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;  
57.     border - radius: 40 px;  
58. }  
59.   
60. h2  
61.  {  
62.     color: blue;  
63.     font - size: 22 px;  
64.     color: white;  
65.     background - color: gray;  
66.     padding: 10 px 10 px 10 px 20 px; - moz - border - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;  
67.     border - radius: 40 px;  
68.     text - shadow: #9E9B9B 2px 2px 2px;  
69. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#E3E1E1',  
70.     endColorstr = '#CCCACA'); /* for IE */  
71. background: -webkit - gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */  
72. background: -moz - linear - gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */  
73. }  
74.   
75. p {  
76.     margin: 20 px!important;  
77. }  
78.   
79. .scrolldown   
80. {  
81.     padding - left: 20 px;  
82.     color: #EDECE8;  
83.     font - size: 40 px;  
84.     font - weight: bold;  
85.     vertical - align: middle;  
86.     text - shadow: #6374AB 2px 2px 2px;  
87. }  
88.  
89. # page - wrap  
90.     {  
91.         border: 1 px solid orange;  
92.         margin: 10 px auto;  
93.
94.     }  
95.  
96.     #parallax - header  
97.     {  
98.         height: 200 px;  
99.         background - color: gray;  
100.                    }  
101.                 
102.                    #parallax  
103.                     {  
104.                        position: relative;  
105.                        overflow: hidden;  
106.                        height: 506 px;  
107.                        width: 1348 px;  
108.                        background - image: url('images/1.jpg');  
109.                    }  
110.                  
111.                    .parallax - viewport   
112.                    {  
113.                        position: relative; /* relative, absolute, fixed */  
114.                        overflow: hidden;  
115.                    }  
116.                  
117.                    .parallax - layer  
118.                    {  
119.                        position: absolute;  
120.                    }  

HTML:

Put different slices of images in different containers. Set height and width of them accordingly.

1.    <div id="parallax" class="clear">  
2.        <div class="parallax-layer" style="width:1002px; height:509px;">  
3.            <img src="images/2.png" alt="" style="width:1002px; height:509px;" />  
4.        </div>  
5.    </div>  

jQuery:

Code for detecting mouse moment. According to mouse moment picture moves.

1.    <script type="text/javascript">  
2.        jQuery(document).ready(function()   
3.        {  
4.            $('#parallax .parallax-layer')  
5.                .parallax  
6.                ({  
7.                    mouseport: $('#parallax')  
8.                });  
9.        });  
10. </script>  

Herewith I am attaching source code. Please refer it for further reference.