Code adventures

7 thoughts
last posted Sept. 5, 2016, 5:16 p.m.

1 earlier thought

0

Formalities turned Fun!

Alex and I are getting married later on this year, in March. We both dislike traditional weddings, with fancy invites, wedding lists, huge parties where you have to invite all your extended family and acquaintances etc.

We were trying to think out of the box a little bit and find ways to have fun!

So, for the handful of friends that will be attending, we decided to deliver our invite in the form of a webpage.

Step 1: Domain

What would a good website be without a fancy domain? After spending some good time playing around with the search tools I found thisinvite.rocks was up for grabs! Click purchased!

Step 2: Design/ideas

I'm not a designer, so it felt easier to fetch some image resources like background patterns and create a rough version of the page in Macaw. This sped up the generation of HTML/CSS and I was pleasantly surprised by the good quality output.

Looking for doge, cat patterns and dinosaur gifs on the internet was fun!

Step 3: Building it

Macaw is nice, but its support for additional CSS and JS is very limited (maybe their upcoming version will cover this?). I went back to the code editor for this. No fancy JS frameworks were used/needed. To give the page an early-internet parallax feel I used:

  • WOW.js with Animate.css for one-off/triggered effects
  • Scrollme for reversible animations that look nicer when you scroll back up.
  • Twemoji to add silly emojis all over the place :)

Result

You can go visit the page at thisinvite.rocks. It uses github pages for hosting. Here's the unimpressive code.

PS: If the link above stop working I took a gif screengrab too.

5 later thoughts