Skip to content

DEV Community

Takane Ichinose

Posted on Oct 14, 2021

4

1

Input Box For Halloween

#codepen #javascript #showdev #webdev

Input Box For Halloween

Description

Try to focus on the text box! Trust me, it won't hurt you! 😉

I can't think of any text boxes having a bad UX interface, so I made an animation of halloween themed objects instead. 😅

This is an animation of objects when the user focuses on the text box.

There are few objects will appear during animation. Below is those objects:

Pumpkins 🎃
Graves 🪦
Bats 🦇
Spider 🕷
Manor 🏠
Castle 🏰
Frankenstein 🧟‍♂️

All the images are made using HTML and CSS only.

Apologize

I would like to say sorry for the repetitive codes I made especially in CSS, and JavaScript animation.

Resources

GreenSock Animation library for JavaScript. I really love this animation tool!

Creepster Font used for this.

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Top comments (0)

Subscribe

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read next

Don't MISS OUT! Build a Responsive Expense Tracker with HTML, CSS & JavaScript

sharathchandark - Jan 2

Happy New Year animation using html css and js

Prince - Jan 2

PHP 8.4: Top Features and Improvements

Olushola - Jan 2

How to Set Up CopilotKit in Your React App: A Step-by-Step Guide

Farhan Ahmad - Dec 31 '24

Takane Ichinose

Front end web developer by profession, game developer by hobby. I love learning many things about web development. I love creating music, and pixel art graphics for my game.

Location

Kanagawa, Japan
Education

Colegio de San Juan de Letran - Calamba Campus
Work

Front End Web Developer, Full-Stack Web developer, Programmer
Joined

May 9, 2019

#gamedev #webdev #showdev #javascript

Zombie Gun War PICO-8 Game

#gamedev #showdev #lua #pico8

PICO-8 Game : Tomato Run

#gamedev #showdev #pico8 #retro

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post →