A “parallax” website is usually defined as a site that uses scroll-linked effects. As you scroll down, the content changes dynamically. I had always wanted to make one of these, and I had some old Photoshop assets from a previous abandoned project. I decided to combine the two, and make a simple sunset animation. During development, I ended up redoing most of the Photoshop from scratch, and the project began to grow larger than I had pictured it. Rather than just creating a simple parallax sunset effect like I had imagined, I filled up the art with all sorts of different animations.
For many of the linear and one-off animations, I used CSS. Although I had created more simple animations in the past, this was a chance to fully brush up my skills in that area. The clouds and the lighting effects were mainly done by CSS, as well as the frame-based animation of the bird.
To implement the scroll-based effect, I used ScrollMagic. Although it took a while for me to wrap my head around the syntax, I soon grew to enjoy working with the library.
I even went so far as to learn some Adobe After Effects to create the bird wing flap and fire animations. This project was my first encounter with the software, so I enjoyed trying that out. Adobe CC programs are ridiculously powerful.
For the interface, I went with Vue.js, as it was familiar to me and easy to combine with my already-built design. I was initially worried that it would be difficult to integrate with ScrollMagic, but it ended up (somehow) working perfectly on my first try. Overall, this was a fun project to design and implement.
View live –>
(Seriously, just scroll to the top. It isn’t hard.)
(Yep, that’s this place. Right here.)
I needed something to do, and I needed a portfolio. A perfect match.
I wanted to do something different here, something interesting and new. Like always, I enjoy branching out – and what better way to do so than to combine the cutting edge with the standard WordPress theme?
You’ve probably noticed how smooth the site feels. The instant you press a button, a loading screen appears – instant gratification, no waiting or awkward pauses when something takes a while to load. That’s because this website is a full Single-Page App (SPA) – it loads the data asynchronously when you request it, so the browser doesn’t actually have to reload.
Although a SPA is not really necessary for a smaller site like this one, I wanted to try to create one in a production environment. For the framework, I chose Vue.js, a lightweight combination of the principles of React and Angular. It’s still relatively unknown, but it is excellent at what it does.
For the backend, I used WordPress, like normal. After some research, I found the WP REST API plugin, which exports the WordPress data in a JSON format useable by the front-end. I built a very minimal theme – no tagging or categories, for example – but I’m not planning on blogging much. If I change my mind later on, Vue.js is VERY extensible.
This website was also my first experience with Webpack. Although I was initially put-off by the seemingly overcomplicated system, I grew to enjoy using the structure and ease of file management (no more scrolling through endless files!)
I don’t believe I will transition to using it normally, due to the difficulty in setup (particularly when dealing with WordPress) but it certainly has potential in already built applications.
This whole process represents an exciting new possibility – WordPress and SPAs in production. The advantages of both are combined – the extensibility, familiarity, and ease-of-use of WordPress, with the blazing fast speed and modern approach of SPAs. Although the technology isn’t mature enough to use with clients, I am looking forward to seeing what the future brings.
R. Scot Duncan
I was looking for a project, so I designed my father’s website for him. He is a professor of biology at Birmingham-Southern College, and has recently written a book about ecology for the layperson. Naturally, he required a site to provide information about him and his studies. So I made one.
Although WordPress is relatively heavy for the small, informational site required, Scot was already familiar with the WordPress interface. It would be easier for both me and him to just use WordPress.
This website is where I finally came to grasp the entire WordPress theme design workflow. I set up several reusable templates for future projects, as well as an “order of operations” for quickly and effectively creating a theme.
One of the main hurdles I had to overcome was the main header image. Unfortunately, stock imagery was not an option, and I had a very small library of Scot’s personal photos to choose from. Image compression was an issue in the final product, as was sizing to fit all devices. I am happy with the result, however, and it is a solid design with excellent mobile support.
Cane Creek Canyon
Although it isn’t my best design, the Cane Creek Canyon website was my first “real” project. I was hired by a small non-profit nature preserve, which I had previously had connections with. My task was to create a relatively simple informational site about the preserve, with an easy-to-use interface for content management.
During development, I decided to try out a new content management system: GetSimple. Although I was previously familiar with WordPress, it was very heavy-weight for the job, and GetSimple was a much lighter option. Rather than databases, it uses XML as the storage method, and the interface is straightforward and (hence the name) simple. I was very happy with the features offered, although its usefulness has more recently degraded due to the abundance of static site generators and RESTful APIs.
Sadly, the website was never used to its full potential. While it is online, it provides minimal information, and placeholder text still exists on many pages. Despite its shortcomings, it marks an important milestone in my web development career.
You can view it live, but I recommend checking out the locally stored version instead. It gives a better idea about the overall design direction, and provides a more accurate interface.
I have been practicing violin and piano since 2006, and I very much enjoy playing. I am a member of the Birmingham Suzuki Violinists, a learning group under the instruction of LaDonna Smith.
I play many different genres, from classical to more modern styles such as jazz and blues. I don’t have any recordings up at the moment, but it’s in the works! Stay tuned if you’re interested, I’ll make a blog post about them when the time comes.