Developers also celebrate Halloween (a collection of thrilling snippets)

We’re almost there, the Halloween party is imminent.

Born primarily as an occasion for fun for children, the atmosphere of this party has been able to strongly involve people of all ages. Web designers , creative by nature, are certainly not immune to the charm of Halloween, so much so that many are decorating their showcase and corporate sites to pay tribute to the celebration of pumpkins, but not limited to: this is an excellent opportunity to put showcasing the client-side potential offered by today’s technologies!

Let’s see some of these fun compositions. All the examples presented can be reached and tested immediately on the CodePen platform.

1) Attention to the Hockey Mask

This fun snippet , a tribute to the bad guys that horror terror in horror films covered by a hockey mask, allows you to produce an effect in which an element in the background is “colored” gradually to fill what is “under the mask”. No Javascript is used, the merit is all in CSS animations :

{.fade position: absolute; background: # 9c0000; border-radius: 120px; top: 20px; left: 40px; animation: fade 6s ease-in infinite; } @keyframes fade { 0% {height: 0px; left: 90px; width: 120px} 80% {opacity: 1;} 100% {height: 360px; width: 230px; opacity: 0;} } .st26 {fill: # 1B1711;} .st27 {fill: # D3D1CE;}

2) The shy ghost

Did you know that many ghosts are afraid of humans? This is what the author Anthony Simone must have thought when he produced this fun animation . The render presents a shy phantom that, as soon as the user hears the mouse pass, hides like a mole to reappear in another (random) point of the page. Remarkable use of HTML, SCSS, CSS3 and ECMA2015.

3) Horror Toogle

The effects of toogling are always very used in Web Design. This toggle effect , however, which involves a transition from pumpkin to vampire and vice versa, is decidedly original. HTML compiled with the Pug engine, use of CSS preprocessor and zero Javascript.

4) The haunted house

The years were running when Flash technology was needed to produce more complex animations of mere CSS-based computing. Fortunately, that was the past. This animation , produced only thanks to HTML, Less and jQuery , is impressive.

5) Make up the pumpkin!

Mike White offers us an extraordinary example of the potential Drag and Drop offered by Javascript ! In this program we can compose the pumpkin as we please, giving it a rough or serene look! No framework used, pure drag’n’drop Vanilla Javascript, HTML and CSS minimal state-of-the-art:

(function dragndrop () { let xpos = ”; let ypos = ”; let whichArt = ”; function resetZ () { const imgEl = document.querySelectorAll (‘img’); for (let i = imgEl.length – 1; i> = 0; i–) { imgEl [i] .style.zIndex = 5; } } function moveStart (e) { whichArt =; xpos = e.offsetX === undefined? e.layerX: e.offsetX; ypos = e.offsetY === undefined? e.layerY: e.offsetY; = 10; } function moveDragOver (e) { e.preventDefault (); } function moveDrop (e) { e.preventDefault (); = e.pageX – xpos + ‘px’; = e.pageY – ypos + ‘px’; } function touchStart (e) { e.preventDefault (); const whichArt =; const touch = e.touches [0]; let moveOffsetX = whichArt.offsetLeft – touch.pageX; let moveOffsetY = whichArt.offsetTop – touch.pageY; resetZ (); = 10; whichArt.addEventListener (‘touchmove’, function () { let posX = touch.pageX + moveOffsetX; let posY = touch.pageY + moveOffsetY; = posX + ‘px’; = posY + ‘px’; }, false); } document.querySelector (‘body’). addEventListener (‘dragstart’, moveStart, false); document.querySelector (‘body’). addEventListener (‘dragover’, moveDragOver, false); document.querySelector (‘body’). addEventListener (‘drop’, moveDrop, false); document.querySelector (‘body’). addEventListener (‘touchstart’, touchStart, false); }) ();