Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 13, 2022 12:22 pm GMT

How to create a beautiful parallax landing page with jarallax.js

In this article, I will show you how to create a beautiful parallax landing page with jarallax.js.

Source Code

You can find the source code and images from this repository on GitHub.
Feel free to star it if you like it and fork to make your own version.

Video tutorial

I have already made a video about it on my youtube channel. Check that out.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

CDN

<script src="https://unpkg.com/[email protected]"></script>

Html

<header class="header">    <a class="logo" href="#">Parallax</a></header><section class="container">    <div class="jarallax">        <img class="jarallax-img" src="./media/1.webp" alt="" />        <h2 class="text">Consectetur sunt</h2>    </div>    <div class="jarallax">        <img class="jarallax-img" src="./media/2.webp" alt="" />        <h2 class="text">Dolor odio.</h2>    </div>    <div class="jarallax">        <img class="jarallax-img" src="./media/3.webp" alt="" />        <h2 class="text">Adipisicing pariatur</h2>    </div>    <div class="jarallax">        <img class="jarallax-img" src="./media/4.webp" alt="" />        <h2 class="text">Consectetur accusamus?</h2>    </div>    <div class="jarallax">        <img class="jarallax-img" src="./media/5.webp" alt="" />        <h2 class="text">Ipsum deleniti?</h2>    </div></section>

Explanation:

  • We have added a container to contain all the jarallax elements.
  • Each jarallax element has an image and a text.

Css

@import url('https://fonts.googleapis.com/css2?family=Cousine:wght@700&display=swap');* {    padding: 0;    margin: 0;    box-sizing: border-box;}html {    font-size: 62.5%;}body {    max-width: 100vw;    overflow-x: hidden;    background-color: #1b1b1b;    font-family: 'Cousine', monospace;    color: white;}.header {    height: 10rem;    display: flex;    align-items: center;    justify-content: space-between;    padding: 0 5rem;}.logo {    font-size: 3rem;    font-weight: 700;    color: white;    letter-spacing: 0.1rem;    text-decoration: none;}.container {    width: 90vw;    margin: 0 auto;    display: grid;    grid-row-gap: 5rem;    padding: 10rem 0;}.jarallax {    position: relative;    display: grid;    align-items: center;    width: 100%;    height: 100vw;    max-height: 60rem;    min-height: 40rem;}.text {    z-index: 10;    font-size: 3rem;    text-transform: uppercase;    margin-left: 10vw;}.jarallax:after {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.1);}@media screen and (min-width: 600px) {    .jarallax {        max-height: 70rem;    }    .container {        grid-row-gap: 8rem;    }    .text {        font-size: 5rem;    }}@media screen and (min-width: 1200px) {    .jarallax {        width: 90%;    }    .container {        grid-row-gap: 15rem;        width: 95vw;    }    .text {        font-size: 7rem;    }}

Explanation:

  • The container is a grid layout.
  • All the jarallax elements have to be position: relative.
  • Also above every image there is an overlay.

JavaScript

const jarallaxEls = document.querySelectorAll('.jarallax')jarallaxEls.forEach((el, index) => {    if (index % 2) return false    el.style.justifySelf = 'end'})jarallax(jarallaxEls, {})

Explanation:

  • We have selected all the jarallax elements.
  • Then we have used the jarallax function to create the parallax effect. The second parameter is an object which will contain the options. You can see the options in the documentation .
  • All odd number jarallax elements will be placed on the right side. I have tried to use the :nth-child(odd) selector but it didn't work.
  • So, we have used a loop to iterate through the elements and set the justifySelf property to all odd elements.

Our final Result:

Image description

That's it for this article. I have tried to make it as simple as possible. If you have any questions, feel free to contact me.

Shameless Plug

I have made few project based videos with vanilla HTML, CSS, and JavaScript.





You will learn about:

  • Javascript intersection observer to add cool effects
  • DOM manipulation
  • Aligning elements with CSS positions.
  • How to make responsive websites.

These will be great projects to brush up on your front end skills.

If you are interested you can check the videos.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project.

See my work from here

Contacts

Videos might you might want to watch:





Blogs you might want to read:


Original Link: https://dev.to/thatanjan/how-to-create-a-beautiful-parallax-landing-page-with-jarallaxjs-2aih

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To