Parallax.

If you’ve been around the Internet during the past few years, you may have stumbled across this term. If you are a salty dog on the sea, you likely know the term from looking at the stars. In either case, the idea is the same; layers on top of other layers create a feeling of distance and depth. The Parallax style creates this same effect on the Web and is used in various ways and to varying degrees of success. You can let your creative side run wild with the possibilities.

You can also add it to SharePoint 2010 and SharePoint 2013.

The Internet is filled with web plug-ins of every size, shape, color, format, and language. A simple Google search for “parallax plugin” returns more than a half-million results, most of which you can implement inside a SharePoint environment. But which one do you choose? The decision-making process can and probably should take some time. You’ll need to consider the following:

  • Can you use HTML5 and CSS3?
  • What browsers does the feature need to work in?
  • Is it for a full site or smaller feature?
  • Do you need to set the size?
  • Does it need to be responsive?
  • Does it need to display and play video and if so, using what player and from what source?
  • What kinds of transitions do you need?
  • Do your target end users have scroll wheels on their mice?
  • Do you need to incorporate audio?
  • What aspects of the feature need to be editable?
  • Can this be accomplished solely in code or do you need an administrative function?
  • How easy is it to use?

Before you rush into using the first flashy (not Flash) plug-in you find, take the time to ask the questions. It usually helps to have the design in front of you, complete with what assets are available and how they can best move to affect the viewer in the most dynamic way.

Now, it should be mentioned that many of the plug-ins allow you to edit the HTML and CSS files directly, making the process in SharePoint as simple as referencing a file inside a Content Editor Web Part. But what if a client wants the feature? What if that client wants to be able to create and edit projects using the parallax feature, but:

  1. Doesn’t have anyone staffed to create the HTML and CSS, or
  2. Doesn’t want to have to call someone for assistance every time?

Using the documentation that comes with a good portion of the plug-ins available, you can craft a user-friendly administrative feature for the parallax presentations. You can do this relying on some custom code, SharePoint sub-sites, lists, and libraries.

PresentationsFor example, we implemented this feature recently using a sub-site to house all the parallax content. This included image, video, and document libraries. The presentations themselves were custom lists with custom content types. Upon creation, those lists generated global settings files for the presentations. You then added slides and sub-layers of text, images or videos (the custom content types). You could add as many as you wanted or as few as you wanted. Each slide and layer had its own set of configurable options. You could add custom CSS to the sub-layers to make them your own. You could change the easing (transition animation), timing, positioning, and z-index of any of the elements, along with a host of other options. This short video shows you a little bit of what’s possible.

While working with the slides, you could click a custom ribbon button that would generate an HTML file based on the slides and sub-layers you had set up. It would also launch a preview of your parallax presentation in a modal window for visual testing. As the user tweaks and updates the presentation, the HTML file simply overwrites the older versions, but can keep version history just in case.

Sub-layer sampling options in Microsoft SharePoint 2013When the HTML is finally to a user’s liking, the file just needs to be referenced in a Content Editor Web Part on any page. Once saved, the parallax elements render inside the page. Using this approach, you can use the parallax design on any SharePoint platform that can serve and render an HTML file.

Our implementation required custom C# coding to set up the administration feature, but the end result is code-free for the user. It works in IE, Firefox, Chrome, and Safari, and across a variety of devices including tablets and smartphones.

While some may choose to build entire sites using the parallax design technique, the more practical business application comes in the form of interactive marketing presentations and eye-catching ad placement. The possibilities are only limited by the creativity of design.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments