This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Create Modern slide based landing page with fullpage.js


On this weblog, I’ll train you methods to construct an superior slide primarily based touchdown web page with html, css, JavaScript, and fullPagejs library.



Video tutorial


You’ll find out about:

  1. Css positions, background picture
  2. Learn how to create slide primarily based sections
  3. JavaScript array strategies
  4. Dom manipulation. Learn how to create and insert html parts straight by means of JavaScript.



Necessities(Primary)

  1. Html
  2. CSS
  3. JavaScript



Stay demo

You possibly can check out this webpage from here



<head>
    <hyperlink
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css"
        integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w=="
        crossorigin="nameless"
        referrerpolicy="no-referrer"
    />
</head>

<physique>
    <part id="fullpage">
        <div class="part one">
            <div class="slide one"></div>

            <h1 class="title">Taylor Swift</h1>
        </div>

        <div class="part two">
            <slide class="one"></slide>
            <slide class="two"></slide>
            <slide class="three"></slide>

            <h1 class="title">Taylor Swift</h1>
        </div>
    </part>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"
        integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg=="
        crossorigin="nameless"
        referrerpolicy="no-referrer"
    ></script>
</physique>
Enter fullscreen mode

Exit fullscreen mode

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

.slide {
    background-size: cowl;
    background-repeat: no-repeat;
    background-position: middle high;
}

.part.one .slide.one {
    background-image: url(media/taylor_swift.jpg);
}

.part.two .slide.one {
    background-image: url(media/fearless/1.jpg);
}

.part.two .slide.two {
    background-image: url(media/fearless/2.jpg);
}

.part.two .slide.three {
    background-image: url(media/fealess/3.jpg);
}

.part.three .slide.one {
    background-image: url(media/purple/1.jpg);
}

.part:after {
    content material: '';
    peak: 100%;
    width: 100%;
    place: absolute;
    high: 0;
    left: 0;
    background-color: black;
    opacity: 0.6;
    z-index: 5;
}

.title {
    font-size: 12rem;
    text-align: middle;
    shade: white;
    font-family: Kalam, cursive;
    place: absolute;
    high: 50%;
    left: 50%;
    remodel: translate(-50%, -50%);
    z-index: 10;
    width: 70%;
    text-transform: capitalize;
    padding: 2rem;
}

.fp-controlArrow.fp-next {
    background-image: url(media/icons/right_arrow.png);
}

.fp-controlArrow.fp-prev {
    background-image: url(media/icons/left_arrow.png);
}

.fp-controlArrow.fp-next,
.fp-controlArrow.fp-prev {
    peak: 10rem;
    z-index: 10;
    width: 6rem !essential;
    border: none;
    background-repeat: no-repeat;
    background-size: include;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background-color: white !essential;
}

#fp-nav.fp-right {
    high: auto;
    backside: 2rem !essential;
    remodel: translateY(0px);
}

#fp-nav ul li .fp-tooltip {
    text-transform: capitalize;
}
Enter fullscreen mode

Exit fullscreen mode

new fullpage('#fullpage', {
    navigation: true,
    navigationPositon: 'proper',
    showActiveTooltip: true,
    navigationTooltips: albumNames, // we'll create albumNames later.
    anchors: ['one', 'two', 'three'],
})
Enter fullscreen mode

Exit fullscreen mode

Fullpagejs

Clarification:

  1. Create a container with the id of fullpage
  2. Create a bit with the part class.
  3. Create slide component with slide class inside part. These slides will maintain the background picture.
  4. We additionally added the overlay and title.
  5. We added the fullpagejs CDN. Then we create a brand new occasion of the fullpage class.
  6. We additionally personalized navigation icons and tooltips. To find out about them please watch the video.

Now that is the way you create slide primarily based fullpage touchdown web page. However the best way we’ve got achieved that is inefficient. Why?

  1. If you wish to add a brand new part, you manually have to repeat paste code, have to connect lessons and types. Principally, you need to repeat the entire course of.
  2. Once more if you wish to change the construction of the part, you manually must replace each part.

That’s not good. We’re doing repeatig duties. We should always not.



What’s the resolution?

It’s JavaScript DOM manipulation. We are going to create and insert each html component by means of JavaScript.

<head>
    <hyperlink
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css"
        integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w=="
        crossorigin="nameless"
        referrerpolicy="no-referrer"
    />
</head>

<physique>
    <part id="fullpage"></part>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"
        integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg=="
        crossorigin="nameless"
        referrerpolicy="no-referrer"
    ></script>
</physique>
Enter fullscreen mode

Exit fullscreen mode

class Picture {
    constructor(src, bgPosition) {
        this.src = src
        this.bgPosition = bgPosition
    }
}

class Album {
    constructor(title) {
        this.title = title
        this.photos = []
    }

    addImages(photos, album = '') {
        photos.forEach(([image, bgPosition]) => {
            const src = album ? `media/${album}/${picture}` : `media/${picture}`

            const imageObj = new Picture(src, bgPosition || '')

            this.photos.push(imageObj)
        })

        return this
    }
}

const albums = [
    new Album('Taylor Swift').addImages([['taylor_swift.jpg']], ''),
    new Album('Fearless').addImages(
        [['1.jpg'], ['2.jpg', 'center 80%'], ['3.jpg']],
        'fearless'
    ),
    new Album('Communicate Now').addImages(
        [['1.jpg'], ['2.jpg'], ['3.jpg']],
        'speak_now'
    ),
    new Album('Crimson').addImages(
        [['1.jpg'], ['2.jpg'], ['3.jpg', 'center']],
        'purple'
    ),
    new Album('1989').addImages([['1989.jpeg']], ''),
    new Album('Fame').addImages(
        [['1.jpg'], ['2.jpg'], ['3.jpg']],
        'repute'
    ),
    new Album('Lover').addImages(
        [['1.jpg'], ['2.jpg', 'center bottom'], ['3.jpg', 'center']],
        'lover'
    ),
    new Album('folklore').addImages(
        [
            ['1.jpg', 'center bottom'],
            ['2.jpg', 'center'],
            ['3.jpg', 'center bottom'],
        ],
        'folklore'
    ),
    new Album('Evermore').addImages(
        [['1.jpg', 'center'], ['2.jpg'], ['3.jpg']],
        'evermore'
    ),
    new Album("Fearless (taylor's model)").addImages(
        [['fearlesstv.jpg', 'center 70%']],
        ''
    ),
    new Album("Crimson (taylor's model)").addImages(
        [['redtv.jpg', 'center bottom']],
        ''
    ),
]

const fullPageEl = doc.getElementById('fullpage')

const createSlides = photos =>
    photos.map(picture => {
        const slide = doc.createElement('div')
        slide.classList.add('slide')

        slide.model.backgroundImage = `url(${picture.src})`
        slide.model.backgroundPosition = picture.bgPosition

        return slide
    })

const createSection = album => {
    const part = doc.createElement('part')
    part.classList.add('part')

    const slides = createSlides(album.photos)

    slides.forEach(slide => part.appendChild(slide))

    const title = doc.createElement('h1')
    title.classList.add('title')
    title.innerText = album.title

    part.appendChild(title)

    return part
}

albums.forEach(album => {
    const part = createSection(album)

    fullPageEl.appendChild(part)
})

const albumNames = albums.map(album => album.title)

new fullpage('#fullpage', {
    navigation: true,
    navigationPositon: 'proper',
    showActiveTooltip: true,
    navigationTooltips: albumNames,
})
Enter fullscreen mode

Exit fullscreen mode

Clarification:

  1. Picture class situations may have two properties. src and bgPosition(background place).
  2. Album class situations will include the album title and array Picture object.
  3. We create an albums array with situations of Album object.
  4. Then we loop over the albums array. On every loop, we create a brand new part with slides and insert them into the fullpage container.

And right here is our closing end result.



Shameless Plug

I’ve made few venture primarily based movies with vanilla HTML, CSS, and JavaScript.











You’ll find out about:

  • Javascript intersection observer so as to add cool results
  • DOM manipulation
  • Aligning parts with CSS positions.
  • Learn how to make responsive web sites.

These shall be nice initiatives to brush up in your entrance finish abilities.

If you’re you possibly can verify the movies.

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

That is it for this weblog. I’ve tried to clarify issues merely. If you happen to get caught, you possibly can ask me questions.

By the best way, I’m searching for a brand new alternative in an organization the place I can present nice worth with my abilities. If you’re a recruiter, searching for somebody expert in full stack internet improvement and enthusiastic about revolutionizing the world, be happy to contact me. Additionally, I’m open to speaking about any freelance venture.

See my work from here



Contacts

Movies may you may wish to watch:














Blogs you may wish to learn:

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?