ny2honolulu.com Progress Update: Added Gentle Cloud Movement + Enhanced Palm Tree Animation 🌴☁️
After using the first subtle palm tree animation for about a week, I decided to improve it and add more life to the homepage.
What I Did:
- Enhanced the palm trees: Increased the sway range and made the movement a bit more noticeable while keeping it natural and elegant.
- Added subtle drifting clouds: Very slow-moving clouds in the night sky that drift across the background.
How I Did It:
I used pure CSS (no JavaScript or heavy libraries):
- Used @keyframes to create smooth looping animations.
- Added overlay elements (SVG for palm trees and simple cloud emojis) on top of the existing hero background image.
- Positioned them with position: absolute and controlled the movement using transform: rotate() for the trees and translateX() for the clouds.
- Tuned timing, opacity, and delay so everything feels calm and natural rather than flashy.
All of this was added safely through Appearance → Customize → Additional CSS in WordPress.
The result is a homepage that feels more alive and peaceful — like a real gentle breeze in Honolulu at night.
Small but meaningful progress. Still learning one step at a time. 🚀
Live on: https://ny2honolulu.com