DEV Community

Takane Ichinose
Takane Ichinose

Posted on

2

Flying Birds Sunset

CodePenChallenge Flying Birds Sunset

Description

This is just a simple mouse pointer effect, that when the user moves the mouse on the screen, birds will come out, then will fly randomly everywhere.

I created the SVG background by using Inkscape. I put rectangular shape at the whole canvas, then added gradient color. For the clouds, I used filter -> overlay -> clouds (I'm not sure if my English translation is correct), then fixed the settings based on how I liked it. For the sun, I just use ellipse to make a circle, and blurred it by using Filter -> Blur.

There is a different transforms for the movement of the bird, and its wings, so that they will not intersect with each other.

This also works in smart phone using touch event.

Resources

I created the background image using Inkscape

I used VueJS to create the functionality.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (1)

Collapse
 
fradar profile image
FRADAR

Beautiful!

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️