Parallax & Zoom effect

Parallax & Zoom effect is one of the popular effect to add in the homepage or single blog page.

In this post, we will see how we can achieve a simple Parallax & Zoom effect.

Parallax & Zoom effect video

For this, we need a wide image which can serve in the top of page. I’m using jQuery for custom scripts and bootstrap for simple layout view in html.

<pre class="wp-block-syntaxhighlighter-code"><head>
  <link href="<>" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <a href=""></a>

The image used in the code snippet is grabbed from google image search. And we need tons of text or words to present in the page. So that it will looks like page full of content and also we will get vertical scroll bar.

<div class="header" id="parallex">
    <img class="header-image" src="<>" alt="">
<p class="container">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae similique perferendis quaerat porro, facilis quidem itaque qui excepturi autem ab iure ea quae vero dolorum fugiat alias accusantium, unde laborum facere pariatur soluta quibusdam

I’m getting that bunch of text from Lorem Ipsum generator from internet. (there is plenty site to generate random text). If you are familiar with emmet, you can generate using that as well.

Next thing, we need to add some CSS magic to make our html looks decent. I’m adding width of image as 100% and if it leads or overflows the screen – we are hiding it.

body: {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
img {
  width: 100%;
.header {
  height: 500px;
  overflow: hidden;
p {
  font-family: tahoma;
  font-size: 20px;
  padding: 50px;

Next big thing, lets capture the scrolling happening in website using jQuery and zoom the header image to apply Parallax effect.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $("#parallex img").css({
    width: 100 + scroll / 5 + "%"

Here, we are adjusting the CSS width property of Parallax image based on scroll happens by 5%. So the image will start scaling or zooming whenever the scroll down or scroll up happens.

Here is the full demo with code.

Happy Coding!


Emmet in VS Code

VS Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

VS Code is one of my favorite code editor. I love the various features like embedded Git Control, Code completion, snippets, code refactoring etc.

I’m a full stack web developer (I used to call myself with that name), I have been using the vs code from its earlier release. I use to follow the release notes of VS Code on every release.

I always used to share the details of VS Code new features with friends, colleagues and all. Some of the features I have excited about was integrated terminal, Side by Side editing, Command palette, Markdown preview and list goes on.

Today, in this post I would like to share one of the interesting feature of VS Code which is involved with Code completion.

It’s Emmet!

So the next big question is,

What is Emmet?

Wiki says,

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.


To be short, it helps to code completion, add snippets, etc.

And next big question is, even some text editor also doing this fair job nowadays. Why Emmet?

Yes, nowadays all the editors comes up with code completion or syntax suggestion intellisense.

However, Emmet got some cool features like syntax abbreviation, improves HTML, CSS workflow. Using Emmet we can quickly write a bunch of code, wrap code wit new tags.

Your favorite may be Atom, Sublime, Brackets or something else. Emmet supports most of your favorite editors.

Check this link on how to integrate Emmet with your editor.

It’s a plugin, you can install or integrate with your code editors.


Emmet in VS Code

The one good news is that we don’t have to download & install the Emmet in VS Code.

Emmet is built in with VS Code, no extension in required. OK, that’s the base story; now let’s start with how to use the features.


How to expand Emmet abbreviations?

Emmet abbreviation and snippets are enabled by default for html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

Mostly, Tab key is used to complete the code abbreviation. We have to type the syntax and click tab key to expand the abbreviations.

We expand the single html tag or even expand the hierarchy of html tag at the same time by clicking tab key.



An important change is that the Tab key is no longer the default way to expand Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

We can quickly view the Emmet abbreviation by clicking the info icon next to list shown. By typing text next to hash (#) will be taken as id and text next to period(.) will be considered as class name. Emmet basically works related to CSS selectors.


And also we can create multiple list of same syntax with unique id as well.



We can generate lorem ipsum text with default number of words or certain number of text by mentioning the word count.



Let’s see some CSS abbreviation example as well



To experience more html & css short code check this out link

The complete cheat sheet for html and css.

Try out and let me know your thoughts on the comment section.

Happy Coding! 🙂