Scroll and Zoom effect in CSS

For basic styles adding bootstrap UI cdn.

And for DOM manipulation, adding jquery cdn in the header of html document.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>

Adding main image

Adding some high quality image from google search results.

  <div class="header" id="parallex">
    <img class="header-image" src="https://handluggageonly.co.uk/wp-content/uploads/2015/12/London-1.jpg" alt="">
  </div>

Adding some random content

Adding some lorem ipsum content to make the page looks longer. So that we can scroll and see the effect.

<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
    numquam! Rerum iure similique, magnam tempore voluptatem molestias adipisci velit eaque ipsam eum sed consequatur ducimus magni enim cumque! Modi quia quibusdam praesentium ab quis quasi magni enim velit, rem numquam accusantium expedita labore suscipit.
    Dolores repellendus itaque, facere aliquid at nihil obcaecati voluptatibus laborum excepturi sapiente molestiae eius non sequi architecto delectus, repellat, iste ducimus iusto cum. Fuga animi soluta dolorem, ratione dolorum repellat voluptatum eaque
    esse aperiam impedit ex, blanditiis dignissimos ab nostrum. Quo adipisci nostrum repellat accusamus voluptatibus eius error sed! Architecto sed ut obcaecati porro ipsum alias eos at neque quae, veritatis, soluta! Harum tenetur quae maxime laborum
    ipsum nostrum laudantium repellendus quas cum adipisci est maiores, tempore tempora enim autem consequatur qui aperiam. Explicabo odit dolorem, assumenda veritatis dolor rerum maiores nobis impedit delectus eos quidem alias necessitatibus hic repellat
    aut a obcaecati, ullam distinctio, nisi, dolore facere tenetur. Illo sequi ab consequuntur et corrupti id dicta impedit qui quo, quasi sapiente cumque nulla adipisci ipsum voluptatem est atque architecto voluptas recusandae accusantium. Accusamus
    cupiditate, doloremque quae magni. Earum enim, quidem eveniet expedita! Labore aliquam, animi cum architecto repellendus possimus eos temporibus vitae sapiente optio dolorum dolorem qui alias, ratione quas voluptatibus incidunt recusandae amet praesentium
    accusantium enim esse sit magnam. Tempore iure, facilis placeat ipsa, laborum mollitia. Ipsam quos nostrum temporibus ex ipsum velit dignissimos maiores, facere, architecto dolorem mollitia repellendus necessitatibus officia accusantium expedita assumenda
    ipsa laborum nesciunt quam numquam consectetur. Id vero impedit, assumenda architecto eaque laborum deserunt commodi laboriosam itaque adipisci, omnis aperiam. Nostrum obcaecati est, dicta numquam ea cumque nemo sint, maiores mollitia hic. Quod at
    fugit iste. Obcaecati debitis quos facere delectus nemo beatae numquam. Vero excepturi obcaecati amet, consequatur velit eveniet sunt optio sint consequuntur alias eligendi voluptas voluptates, facere? Consequuntur corrupti a quis, enim? Officiis
    ea incidunt consequatur maiores, esse reiciendis magni, distinctio aut neque facere odio eius dicta natus provident consequuntur voluptatum ducimus tenetur, totam dolorum corporis animi expedita repellat! Dolorem inventore molestias aliquid, distinctio
    libero quisquam, facere iste earum delectus assumenda, quis nobis totam unde vero nostrum quas corrupti! Adipisci omnis sequi nemo odio iusto cupiditate dolorum voluptatibus nesciunt pariatur amet ipsam dignissimos eum facilis est iste ea delectus,
    itaque eius! Reiciendis facilis voluptas, expedita optio. Ducimus omnis facere illo commodi ut sequi veritatis quae nam et quasi delectus similique, ex voluptatibus odio recusandae officia consectetur voluptate nesciunt qui soluta ipsam. Aliquid rerum
    accusamus esse suscipit error nihil maxime sequi, illo illum aspernatur officiis ad, culpa dignissimos ratione, veniam. Ea dolore aperiam, qui. Sit aspernatur repudiandae atque rerum accusamus eum quos illum aliquid mollitia quis ratione pariatur
    praesentium totam beatae labore expedita, quidem provident hic veritatis officia corrupti magni facilis dolor incidunt voluptatibus! Obcaecati incidunt aspernatur corporis asperiores quaerat iste, ratione necessitatibus quibusdam ipsa nobis accusamus
    laborum est, rerum similique sapiente.</p>

So far we have added the HTML content. Lets add some CSS magic.

CSS magic

body: {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

img {
  width: 100%;
}

.header {
  height: 500px;
  overflow: hidden;
}

p {
  font-family: tahoma;
  font-size: 20px;
  padding: 50px;
}

Basically, this CSS sets the document height and width, and keeping the image stretch to 100%.

So far we have added some HTML text content and image in header. To add some scroll and zoom effect, lets add some javascript/jQuery code.

jQuery code

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

The above code, adds the width of image based on the windows scroll position.

Final Output

You can checkout the final output in the below codepen.

Thanks for reading. Please share your feedback in comment section below.

The best visual studio code shortcuts

Basically, I’m a user who uses shortcuts a lot. In this post, I’m going to share some of my favourite shortcuts.

Earlier, we have shared Visual studio shortcuts in this site. Please do check if you are interested.

Lets jump into content directly.

Comment out selection or current line

  • Ctrl + /

Usually, I use the keystroke Ctrl +K, Ctrl + C for comment out a line.

And Ctrl +K, Ctrl + U for uncomment a selection or line.

This Ctrl + / does both the job in toggle way. Reduced keystrok and achieves the same. One of the productivity hack.

Zen mode

  • Ctrl + K, Z

Enables Zen mode. More focused mode of programming.

The command is basically toggle. You can use same shortcut to exit Zen mode.

Look at the difference between normal and Zen mode in below image.

Show command palette

  • Ctrl+Shift+P or F1

Open the command palette on editor. And we can perform various quick from there.

External terminal

  • Ctrl + Shift + C

It opens external terminal configured with the current project file path.

This is the one main shortcut I use daily with VS Code.

Even I made separate post on how to configure external terminal in VS Code.

Inline breakpoints

  • Shift+F9

Inline breakpoints will only be hit when the execution reaches the column associated with the inline breakpoint. This is particularly useful when debugging minified code which contains multiple statements on a single line.

An inline breakpoint can be set using Shift+F9 or through the context menu during a debug session. Inline breakpoints are shown inline in the editor.

Inline breakpoints can also have conditions. Editing multiple breakpoints on a line is possible through the context menu in the editor’s left margin.

Navigating to previous position or forward

  • Alt+ ← / →

To go back previous postition or go to forward postion of your navigation again.

Use Keyboards left side alt key.

Open Integrated terminal

  • Ctrl+`

This symbol key will present under the Esc key. This shortcut will open up the integrated terminal available within the VS Code.

Few more shortcuts used within intergrated terminal

  • Ctrl+Shift+` Create new terminal
  • Ctrl+C Copy selection
  • Ctrl+V Paste into active terminal
  • Ctrl+↑ / ↓ Scroll up/down
  • Shift+PgUp / PgDn Scroll page up/down
  • Ctrl+Home / End Scroll to top/bottom

Breadcrumbs

Sometimes we will be working with the small screen machines. Keeping the solution explorer always open isn’t an optimal solution when we are working on the small screen laptops. One of the solutions can be keeping the files hidden and opening whenever needed.

In that case, traversing between files or folders is a bit difficult.

To resolve this problem, we have an option called breadcrumbs in the VS Code.

Breadcrumb navigation lets you jump to symbols and files in your workspace.

Breadcrumbs show the current location and allow you to quickly navigate between symbols and files. To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the breadcrumbs.enabled setting.

You can modify the user settings by visiting the settings page using shortcut CTRL + , or visiting the option File>Preferences>settings

In the search bar, search for the option breadcrumbs. You can find the following UI

I usually enable the breadcrumbs for File Path, because don’t use symbol path navigation. You can use the available options based on your needs.

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, the Tab key is used to complete the code abbreviation. We have to type the syntax and click the 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 the tab key.

emmet-gif-01

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 the period(.) will be considered as a class name. Emmet basically works related to CSS selectors.

emmet-gif-02

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

emmet-gif-03

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

emmet-gif-04

Let’s see some CSS abbreviation example as well

emmet-gif-05

To experience more HTML & CSS shortcode check this out link https://docs.emmet.io/cheat-sheet/ (The complete cheat sheet for HTML and CSS.)

Summary

I will be updating this same post regularly based on the new tips or tricks if I come across anything new.

Happy Coding!