PLEASE NOTE THAT THIS IS NOT MY WTF PROJECT, THIS IS AN ADDITIONAL PROJECT I COMPLETED AFTER I FINISHED MY WTF PROJECT!
I researched this project on stackoverflow, W3School, and CodePen user Benjamin Zanatta. I found a really cool effect in which colored stripes pull apart and the center to reveal the page. I decided to attempt this for my portfolio about page.
The HTML was a bit tricky because I have to set up a different div for each bar. I organized each bar by left and right and labeled the divs a1-a8 and b1-b8. This way, I could give each individual bar different CSS properties while still being able to use the left and right id names to give a CSS attribute to all the left bars at once (same for the right bars). After this, I used some basic 210 skills to put in a picture of me (img src) and my professional bio (a simple p tag).
Next, I was on to the CSS. For the effect, I needed to use animation, more specifically, keyframes. Keyframes is a specific kind of CSS animation that allows me to specify when I want a certain change in CSS to occur (how far along in the animation). So, as far as the code goes, I first had to code the basic animation movement. I needed two traits for my animation: forward and linear. The forward is what makes the bars move horizontally away, and the linear part means that the bars will pull away with a constant speed.
I used my letter/numbering system to give each bar a background color and then applied the forward and linear animation properties to each one. For example:
animation: openA2 1.5s linear 0.5s forwards;
Next, I needed to incorporate the keyframes. With each keyframe, I first indicated which animation I was talking about. Then, I coded in a different width (from the original 50%, since each bar covered half the page and there was a set of bars on the right and the left) for when the bars were 75% through with the transformation and finally, done with the transformation.
I thought it might be nice to have the bars have a little stagger effect, so I coded every other bar differently at the 75% mark. Half are at 15% at this point in the animation, and half are at 10%. This took a little while to get to work because I had a small syntax error, but I finally got the bar animation exactly how I wanted!
I also played around with another keyframe animation to have my info (picture and bio) fade in. This was another animation line of code, called the FadeIn, which required another keyframe. This time, instead of changing width, I changed opacity throughout the animation. Unfortunately, with the way my theme is set up, the header image is so large that you have to scroll down to see my info, which my that time, is basically already faded in. I made the fade effect a little longer, so hopefully the user is still able to see the fading by the time they scroll down. I didn’t want to make the animation so long that the user gets confused, so it was a fine line (I ended up with a 3 second transition). In the future, hopefully I’ll be able to make the header image a bit smaller so that this is not an issue.
From there, it was pretty much basic CSS; image border radius, font family, and text color. After that, it was complete! It is currently implemented on my about page here.
I had fewer obstacles to overcome with this project as compared to my actual WTF project, my image overlays, but it was still a fun challenge that introduced me to a whole new concept. I didn’t find keyframes terribly difficult, so I definitely will keep them in mind for the future. The fade in effect is especially useful, and adds a nice twist to any web page with information to display.
Overall, this was a great little bonus for my WTF project that I really wanted to document. I’m glad I didn’t stop exploring just because I reached my first goal with the image overlays. To me, advanced web authoring is about pushing every possible boundary, and continuing to expand my skills.