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.

Angular 9 Tutorial: Angular CLI

Angular CLI is one of the best tool available for angular to setup the initial files or scaffolding structure of the application.

Setup

Once you have setup the basic software like node.js and npm. You can download CLI using the following command

npm install -g @angular/cli

Once installed we can check the version of angular CLI using the following command

ng version

One common arguments every CLI has is help command. Here it is for you

ng help

Create new Angular App

From your target empty folder, you need to run the following command to generate the basic files/

ng new my-first-project

Make sure to replace ‘my-first-project’ with name you prefer. This is will your application name.

Angular CLI have lots of others option to help in setting the basic to advance files.

Available angular CLI commands

Available angular CLI commands By using command ng help, I’m getting the following information

  • add – Adds support for an external library to your project.
  • analytics – Configures the gathering of Angular CLI usage metrics. See https://v8.angular.io/cli/usage-analytics-gathering.
  • build (b) – Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  • deploy – Invokes the deploy builder for a specified project or for the default project in the workspace.
  • config – Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  • doc (d) – Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  • e2e (e) – Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  • generate (g) – Generates and/or modifies files based on a schematic.
  • help – Lists available commands and their short descriptions.
  • lint (l) – Runs linting tools on Angular app code in a given project folder.
  • new (n) – Creates a new workspace and an initial Angular app.
  • run – Runs an Architect target with an optional custom builder configuration defined in your project.
  • serve (s) – Builds and serves your app, rebuilding on file changes.
  • test (t) – Runs unit tests in a project.
  • update – Updates your application and its dependencies. See https://update.angular.io/
  • version (v) – Outputs Angular CLI version.
  • xi18n (i18n-extract) – Extracts i18n messages from source code.

Creating new angular project

ng new timer-project

timer-project is name of project we chose.

The CLI asks us choose our required options based on our needs. Like routing and stylesheet type.

After installing package, we are good to go with debugging of the newly generated application. We can discuss about the project structure in our upcoming post.

You can checkout some of our other posts related to angular CLI

Serving the project

Angular CLI provides a complete tool-chain for developing front-end apps on your local machine. As such, you don’t need to install a local server to serve your project — you can simply, use the ng serve command from your terminal to serve your project locally.

ng serve

The application will start serving in the root http://localhost:4200

Generating angular schematic

Generates and/or modifies files based on a schematic.

ng generate <schematic> [options]
ng g <schematic> [options]

schematic can be replaced with following sets

  • appShell
  • application
  • class
  • component
  • directive
  • enum
  • guard
  • interceptor
  • interface
  • library
  • module
  • pipe
  • service
  • serviceWorker
  • webWorker

These commands is fair to start using angular CLI in beginner mode.

Happy Coding!

Course Main Page

Angular 9 Tutorial for Beginners: Action Plan