HomeCSSHalloween Special Codepens

Halloween Special Codepens

Hey everyone welcome to today’s tutorial. In today’s tutorial, we will check out a collection of 15 Halloween special codepens.

Video Tutorial:

Pikaboo Follows You:

This codepen by Morgane is the perfect balance between spookiness and cuteness. In ‘Pikaboo Follows You’, the author has created a ghost-style Pikachu. The author builds this codepen using HTML, SVG and Javascript. We initially see ‘pikaboo’ floating in the air. On mouse move, the ‘pikaboo’ follows the mouse cursor.

Simple Falling Objects Game:

Even though this is a simple game, I enjoyed playing this game. The objective of this game is to click on various falling figures before they hit the ground. The code keeps the score of the figures clicked by the user. Also, the game comes with a countdown of 60 seconds.

Halloween 2020:

I love this Dracula illustration. The author of this codepen has used HTML, CSS and JS. The colours, symmetry and art style are perfect. Also, the background music that plays on click is perfect for the spooky feel.

Halloween:

In this codepen, I love how the creator of the codepen has faked depth. The author has used Blednder3D to create this amazing illustration.

Halloween Toaster Ghoster:

The colour, art style and animation used in this code are just perfect. Here is yet another Halloween special codepen from ‘Morgane’ where she perfectly balances between spookiness and cuteness. The author uses SVG and Javascript to create this codepen.

Halloween-Frankenstein:

Here is the cutest Frankenstein animation. This codepen was created by Ricardo Olivia Alonso The creator of this code builds the illustration and animation using HTML(Pug) and CSS(SCSS).

CodePenChallenge: SKELETONS

This is one of the most creative code pens I have ever seen. This project consists of a girl holding a camera which asks the user to click on it. When the user clicks on the camera’s button, they see skeletons and a few ghosts for a few seconds. Love it!

Arachnophobes stay away:

This codepen by ‘Paulina Hetman’ comes with an unexpected output. The author uses HTML, CSS and Javascript to build the codepen. In this project, the author asks the user to enter their name. Upon entering our name and hitting enter, the code transforms the name into loads of spiders that crawl away from the screen.

TrickOrTreat:

The TrickOrTreat codepen is creativity at its finest. The code comes with a click-me button. When the user clicks on this button you can see a girl dressed in various costumes ready for trick or treat. Love this halloween special codepens.

Mrs Pumpkin Head:

This code is created by ‘Joni Trthall’. The objective of this game is to decorate ‘Mrs. Pumpkin head’. This code uses various props created using SVG. The user has to drag these props onto the desired position to dress up the pumpkin.

Parallax Trick or Treat:

This code is created by ‘Takane Ichinose’. The author has used various layers of backgrounds moving at different speeds to build this parallax effect.

CSS Trick or Treat toggle:

The trick-or-treat toggle codepen by Jhey is creative. The transition from skull to candy is smooth. You should check this one out.

Pure CSS video game | Halloween Hunters:

Can you believe this game is created with pure CSS? Check it out right now. The game provides the user with an arrow to kill different kinds of monsters. The goal of the player is to stop the monster from passing across the screen.

Mike Goes Trick-or-Treating:

Get mike ready for trick or treat. Click on the ‘Change costume button’ to put the mike in different costumes.

Pumpkin Toss:

Click on the screen to toss some pumpkins. This codepen by ‘Christopher Wallis’ is fun.

Those were my favourite halloween special codepens. Let me know which one you liked the best.

Previous articleMCQ – 29/10/22
Next articleMCQ – 31/10/22
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

1 × five =

Most Popular