DEV Community

Freecodez
Freecodez

Posted on

👻 Happy Halloween Parallax Landing Page. 👻 Halloween special, Credit: codepen ❤️

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

👻 Happy Halloween Parallax Landing Page. 👻 Halloween special, Credit: codepen ❤️

👻 Happy Halloween Parallax Landing Page. 👻 Halloween special, Credit: codepen ❤️

For full source code visit : https://freecodez.com/post/2r2x6jq

<!-- https://freecodez.com -->
<section class="parallax">
    <h2 id="title">Happy Halloween</h2>
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9648a7a2-03fe-4b48-b7ab-195ec34ac6a6" id="leftside" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5c125b01-3bda-46ed-87bf-f64a9cc39d9b" id="rightside" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/8102d1ed-0b60-40b6-a38a-75600c1c9c75" id="moon" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5c7a5d00-501e-4f2b-b31a-0d0e2dac47e5" id="bottom" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/b8c09600-d3c2-4eab-a3e1-4f9a75d14331" id="leftpumpkin" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/dc895daa-7d0c-4b65-946c-36faecc1d78e" id="rightpumpkin" alt="halloween" />
</section>

<section class="blog">
    <h3>Activities</h2>

        <!-- Swiper -->
        <div style="--swiper-pagination-color: #fff" class="swiper">
            <div class="parallax-bg" data-swiper-parallax="-23%"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Ghastly Ghost Tours" data-swiper-parallax="-500">
                            Ghastly Ghost Tours
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Explore the dark history of Ravenwood Manor with guided tours
                                through its haunted halls. Who knows what you might encounter
                                in the shadowy corners?
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/943f5f64-3718-4d72-b4d0-d9f5a2b8af8e" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Wicked Costume Contest" data-swiper-parallax="-500">
                            Wicked Costume Contest
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Dress to impress in your most scary, creative, or weird
                                Halloween costume. Prizes will be awarded to the best-dressed
                                attendees.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/78ccffdf-c873-486b-ada5-55e4cc0d4fb9" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Spooky Dance Floor" data-swiper-parallax="-500">
                            Spooky Dance Floor
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Dance the night away to hauntingly good tunes from our live
                                DJ, under the dim glow of scary candlelight.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/3b936c77-625f-4587-bf1c-368a2074eb06" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Sinister Snacks" data-swiper-parallax="-500">
                            Sinister Snacks
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Satisfy your taste buds with a variety of spooky-themed snacks
                                and refreshments at our chillingly delightful food stalls.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e0adf8a6-c25e-4f15-bab9-5f4a41a5063f" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Scary Movie Screening" data-swiper-parallax="-500">
                            Scary Movie Screening
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Sit back and relax in our indoor cinema as we showcase classic
                                horror films for your enjoyment.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/158d56ce-8720-495f-9b44-68551e374eed" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Pumpkin Carving" data-swiper-parallax="-500">
                            Pumpkin Carving
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Get your hands dirty and create your own Jack-O'-Lantern
                                masterpiece. We provide the pumpkins and carving tools.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/feea059e-0dca-45cc-9c5c-7c78fa4d8a29" alt="" />
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <p>
            Join us for a scary night of Halloween! Ravenwood Manor, a historic and scary mansion, will
            open its doors for an unforgettable night of thrills and chills.
        </p>
        <button class="btn">
        <span>buy ticket</span>
      </button>
</section>
Enter fullscreen mode Exit fullscreen mode

Source Code : https://freecodez.com/post/2r2x6jq

For more such articles visit : https://freecodez.com

Top comments (3)

Collapse
 
ibtisam021 profile image
Ibtisam021

Looks great! Visited your site and the pumpkin cursor is giving a proper vibe. Also, the glitch effect on the images was a good idea.
I've seen a lot of purple as the primary color of the theme on many websites, but the orange gradient on your site was balancing it out.
Great work buddy!

Collapse
 
freecodez profile image
Freecodez

Thank you so much for your kind words and feedback!

Collapse
 
freecodez profile image
Freecodez

Thanks