Create Modern slide based landing page with fullpage.js

In this blog, I will teach you how to build an awesome slide based landing page with html, css, JavaScript, and fullPagejs library.

Video tutorial

You will learn about:

Css positions, background image
How to create slide based section…


This content originally appeared on DEV Community and was authored by Anjan Shomodder

In this blog, I will teach you how to build an awesome slide based landing page with html, css, JavaScript, and fullPagejs library.

Video tutorial

You will learn about:

  1. Css positions, background image
  2. How to create slide based sections
  3. JavaScript array methods
  4. Dom manipulation. How to create and insert html elements directly through JavaScript.

Requirements(Basic)

  1. Html
  2. CSS
  3. JavaScript

Live demo

You can try out this webpage from here


<head>
    <link
        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="anonymous"
        referrerpolicy="no-referrer"
    />
</head>

<body>
    <section id="fullpage">
        <div class="section one">
            <div class="slide one"></div>

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

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

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

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

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

html {
    font-size: 62.5%;
}

.slide {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

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

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

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

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

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

.section:after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.6;
    z-index: 5;
}

.title {
    font-size: 12rem;
    text-align: center;
    color: white;
    font-family: Kalam, cursive;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: 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 {
    height: 10rem;
    z-index: 10;
    width: 6rem !important;
    border: none;
    background-repeat: no-repeat;
    background-size: contain;
}

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

#fp-nav.fp-right {
    top: auto;
    bottom: 2rem !important;
    transform: translateY(0px);
}

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

new fullpage('#fullpage', {
    navigation: true,
    navigationPositon: 'right',
    showActiveTooltip: true,
    navigationTooltips: albumNames, // we will create albumNames later.
    anchors: ['one', 'two', 'three'],
})

Fullpagejs

Explanation:

  1. Create a container with the id of fullpage
  2. Create a section with the section class.
  3. Create slide element with slide class inside section. These slides will hold the background image.
  4. We also added the overlay and title.
  5. We added the fullpagejs CDN. Then we create a new instance of the fullpage class.
  6. We also customized navigation icons and tooltips. To learn about them please watch the video.

Now that's how you create slide based fullpage landing page. But the way we have done this is inefficient. Why?

  1. If you want to add a new section, you manually have to copy paste code, have to attach classes and styles. Basically, you have to repeat the whole process.
  2. Again if you want to change the structure of the section, you manually have to update every section.

That is not good. We are doing repeatig tasks. We should not.

What is the solution?

It is JavaScript DOM manipulation. We will create and insert every html element through JavaScript.

<head>
    <link
        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="anonymous"
        referrerpolicy="no-referrer"
    />
</head>

<body>
    <section id="fullpage"></section>

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

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

class Album {
    constructor(name) {
        this.name = name
        this.images = []
    }

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

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

            this.images.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('Speak Now').addImages(
        [['1.jpg'], ['2.jpg'], ['3.jpg']],
        'speak_now'
    ),
    new Album('Red').addImages(
        [['1.jpg'], ['2.jpg'], ['3.jpg', 'center']],
        'red'
    ),
    new Album('1989').addImages([['1989.jpeg']], ''),
    new Album('Reputation').addImages(
        [['1.jpg'], ['2.jpg'], ['3.jpg']],
        'reputation'
    ),
    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 version)").addImages(
        [['fearlesstv.jpg', 'center 70%']],
        ''
    ),
    new Album("Red (taylor's version)").addImages(
        [['redtv.jpg', 'center bottom']],
        ''
    ),
]

const fullPageEl = document.getElementById('fullpage')

const createSlides = images =>
    images.map(image => {
        const slide = document.createElement('div')
        slide.classList.add('slide')

        slide.style.backgroundImage = `url(${image.src})`
        slide.style.backgroundPosition = image.bgPosition

        return slide
    })

const createSection = album => {
    const section = document.createElement('section')
    section.classList.add('section')

    const slides = createSlides(album.images)

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

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

    section.appendChild(title)

    return section
}

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

    fullPageEl.appendChild(section)
})

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

new fullpage('#fullpage', {
    navigation: true,
    navigationPositon: 'right',
    showActiveTooltip: true,
    navigationTooltips: albumNames,
})

Explanation:

  1. Image class instances will have two properties. src and bgPosition(background position).
  2. Album class instances will contain the album name and array Image object.
  3. We create an albums array with instances of Album object.
  4. Then we loop over the albums array. On each loop, we create a new section with slides and insert them into the fullpage container.

And here is our final result.

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.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

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:


This content originally appeared on DEV Community and was authored by Anjan Shomodder


Print Share Comment Cite Upload Translate Updates
APA

Anjan Shomodder | Sciencx (2022-03-19T15:19:54+00:00) Create Modern slide based landing page with fullpage.js. Retrieved from https://www.scien.cx/2022/03/19/create-modern-slide-based-landing-page-with-fullpage-js/

MLA
" » Create Modern slide based landing page with fullpage.js." Anjan Shomodder | Sciencx - Saturday March 19, 2022, https://www.scien.cx/2022/03/19/create-modern-slide-based-landing-page-with-fullpage-js/
HARVARD
Anjan Shomodder | Sciencx Saturday March 19, 2022 » Create Modern slide based landing page with fullpage.js., viewed ,<https://www.scien.cx/2022/03/19/create-modern-slide-based-landing-page-with-fullpage-js/>
VANCOUVER
Anjan Shomodder | Sciencx - » Create Modern slide based landing page with fullpage.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/19/create-modern-slide-based-landing-page-with-fullpage-js/
CHICAGO
" » Create Modern slide based landing page with fullpage.js." Anjan Shomodder | Sciencx - Accessed . https://www.scien.cx/2022/03/19/create-modern-slide-based-landing-page-with-fullpage-js/
IEEE
" » Create Modern slide based landing page with fullpage.js." Anjan Shomodder | Sciencx [Online]. Available: https://www.scien.cx/2022/03/19/create-modern-slide-based-landing-page-with-fullpage-js/. [Accessed: ]
rf:citation
» Create Modern slide based landing page with fullpage.js | Anjan Shomodder | Sciencx | https://www.scien.cx/2022/03/19/create-modern-slide-based-landing-page-with-fullpage-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts