Draycen D. DeCator

Doctoral Candidate

A website maintained by Draycen DeCator. It contains content related to many subjects (psychology, health, statistics, grad school, and more), and professional materials (such as a copy of Draycen's CV, and materials to make your own!).

Website Tweak: Interaction

Some of you may have already noticed, but I've begun making some minor tweaks to my site to make it more interactive. In order to help show what elements on the pages can be clicked/interacted with, there is now a hover effect to mimic the element rising towards you while the cursor is over the item. After the cursor is moved, the element will transition back down to it's normal level and shadow.

This effect is very similar to some of Google's work, including Google Play Music, and I think it adds a nice touch. For now, I have it only on image blocks and the Flipboard magazine links that are on my social page. I've considered adding them to the embedded office document viewers as well, but I'm not sure what that experience would be like since they aren't simply clicked like the other elements. (Plus, on a side note, I'm busy trying to figure out how to get rid of the border around the PowerPoint viewers...if anyone knows, please let me know).

In addition to these minor interactive effects, I had played around with some other CSS transitions. The main one I wanted to implement was a transition of the page content from below the screen up to it's current position, in a cascading way. Unfortunately, I couldn't get the transition smooth enough, despiting trying to trigger GPU rendering and using efficient CSS code. The reason seems to be that I'll need to access the javascript for the pages, and I would need to re-prioritize the loading of the different elements (squarespace seems to have several things loading at once, so the content loads while the browser also tries to handle the CSS, leading to poor framerates). 

The hover effects are now in my CSS post so you can see how they're implemented.

If you have recommendations for other ways I can improve the visual interactions on my site, let me know in the comments!