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 ❤️
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>
Source Code : https://freecodez.com/post/2r2x6jq
For more such articles visit : https://freecodez.com
Top comments (3)
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!
Thank you so much for your kind words and feedback!
Thanks