MARKETPLACE

Parallax Scrolling

Parallax Containers

For those unfamiliar with the parallax effect in web design, Wikipedia has a good definition:

Parallax scrolling, also known as “asymmetrical scrolling,” is a technique in computer graphics and web design where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.

I built a plugin that supports a background container with multiple foreground containers — all with unique scrolling speeds and directions for a WordPress theme at Vanderbilt University. The effect can, sometimes, be a little choppy due to the continuous burden placed on the browser during scrolling but I am hoping to make improvements in the future.

View the Demo

xyPanles

xyPanels

This is a plugin that I developed as a twist to single page website designs and a variation on one of my other projects — Vertical Pagination. Most of the heavy lifting is done by jQuery but I am planning to replace certain functions with modern CSS (such as the Flexbox) in the future. xyPanels also operates “outside” the layout and can be used with “inside” front end frameworks such as Bootstrap.

View the Demo

Fruit

Page Content Filtering Using CSS and jQuery

This is something that I first created for a project at Vanderbilt University when this type of filtering was less common than it is now. The basic idea is to have a keyword match input field on a page that filters page content for the user without making a server request and reloading the page.

View the Demo

Some thoughts on what to do with this:

  • Use to filter list items (as in my example), images, table rows or any type of container.
  • The text that gets targeted by the filter can be hidden (as in my example) or exposed.
  • What happens to matches (or non-matches) can vary according to the added (or removed) class and what it triggers (a style change or a jQuery effect for example).
Accordion

Accordion Menus

When they first came into use, accordion menus took a lot of coding but now they are quite simple to create. This very simple and super light plugin will close open accordions when another one is opened and does not rely on CSS hover classes since they can be problematic on mobile devices.

View the Demo