Deep Embed with iFrame and WordPress Utilizing Canvas and Particles.js
Recently, I wanted to do a little touch-up on my website. The goal was to add a particles.js
field to my website’s front page, which already had a blueprint background, and to customize the style parameters inside of the particles.js library accordingly. Lastly, I would embed the final HTML5 Canvas and Javascript elements into my site’s WordPress framework.
Particles.js is a lightweight Javascript library created by Vincent Garreau. It allows developers to create beautiful particle animations very easily by changing the variables in the Javascript file, and styling the HTML Canvas with CSS code. There are numerous particle.js parameters to choose from, such as particle number, size and color, and also included are shape options, such as circles, triangles, polygons, stars and images.
Getting Started
The first and easiest step of the project was to go to Vincent’s above sites to review the documentation for particles.js. The next step was to go to his particles.js page at CodePen, where there is an awesome example waiting and ready for editing, which is where changing the parameters of the Javascript and CSS live is fun, and an easy experiment in interactivity.
Inside the CodePen Javascript panel:
I was able to configure the parameters more, according to the contrasting colors and style of my site’s blueprint background. My goal with the particles was to have a sort of “pick-up sticks” feel as far as the particles’ length and the numbers go, and also a contrasting orange for the stroked-base area of the particles to contrast the blueprint background.
Inside the CodePen CSS panel:
I changed the background-color and background-image settings so that my blueprint background image could seamlessly merge with the particles.js elements without overlap of any kind.
Once I had gone through all of the parameters of the particles.js library and chosen my preferred styles and parameters, and finished my CSS customization work, I was ready for integration of the new design into my site. I wanted to have the exact same working code I had been using at CodePen. So I went to the bottom-right area of the CodePen interface and pressed the Embed Button. From there I downloaded a zipped version of my project.
The next step was to get this zipped code embedded into my website’s front page via WordPress and FTP. The first thing I did was create a new directory on my webserver.
The next step was to extract all files from my zipped project folder and upload them into
my brand new directory—and inside, also create a CSS and JS directory to upload the corresponding files into.
If you do not have FTP access to your WordPress server, you can use this great WordPress plugin solution.
Once I installed the plugin, I proceeded to create a new directory on my server, and then upload the remaining extracted files into the brand new directory—and inside, also create a CSS and JS directory to upload the corresponding files into.
Now came the tricky part: How to embed this code into WordPress
This part had been troublesome for me in the past, trying to wrestle with the WordPress WYSIWYG editor with no desired results to show for it, even though I was embedding code directly from working models, both live online and from my native machine—not to mention working CodePen examples, too.
With some digging online, I found numerous sources which spoke of an iFrame solution.
Could they lead to the ugly solution to a beautiful problem? For this project, YES!
It was the old iFrame tag I had not used to embed content in many years that was now the solution to my HTML5 Canvas woes inside of WordPress. Wow.
Lastly, I added a Div called iframeHolder so I could style the iFrame and its border too.
Here is the extra CSS code I embedded using the plugin below:
Now for embedding those rascally codes into your WordPress pages
WordPress sometimes seems like a rabbit hole, and existing plugins are often the quickest solution to solving various problems. One I found for users needing to embed CSS, Javascript and other code is Easy Code Manager Plugin.
Once installed, I took the above CSS code and added it to Easy Code Manager’s code panel.
Then I assigned the code only to the front page in the Easy Code Manager’s
Assignments page panel, and saved the setting as css_blueprintparticles.
Voila! The final result at my home page: http://noladynamic.com/
My fork off of Vincent’s Original CodePen Post: https://codepen.io/TreyNOLA/pen/GOObxo
