Since the first time that I witnessed the particle effect on a website (for example), it has always been in the back of my head. Now that I finally decided to get my own homepage, it was time to bring the idea of the particle effect into life. However, there was one major obstacle between me and my goal: the Google Sites editor. I went for Google Sites, and not for a self-built website via Wordpress or some other website kit, because of the simplicity of it and the gained benefits of staying within the Google-verse (e.g. SEO). Now, how can you still get the desired result?
First, if you are as lazy as I am, you search for a suitable particle effect on sites like codepen. After going through quite many examples, I settled with the most prominent version: particle.js by Vincent Garreau. I forked the code into my own codepen repository and started adapting the basic behavior of the particles. Afterwards, I've added the blurry header title block which was inspired by Dinesh Balaji. I first thought about having a small, normal-sized header with the particles just swirling around. But after trying that out on the live site, it seemed that the particles didn't have enough "space" to move around and the whole effect got a bit diminished. Hence, a new idea was born to stretch the header across the full site. However, now I needed some form of indicator for visitors to see that the actual homepage starts below the moving particles. This code bit as partly taken from here.
Second, now comes the integration into Google Sites. Luckily, with the new update this part is fairly easy to paste custom HTML code into the sites. In order to utilize the created pen, you can switch to full page view and use this permanent link to include in an iframe. There is only one remaining obstacle, namely the fixed header bar and ads in the full page view. However, with a bit of tinkering the top and bottom parts can be hidden. Afterwards just drag-and-drop the embed site into the header and adept the block. Now comes a bit of back-and-forth to adept the different CSS classes to align all the parts. As each save in codepen generates a new link, you need to adept > embed > test > repeat.
The code to embed the pen looks like this:
The code for the particle effect consists of HTML, CSS and JS parts: