AR5 and Leveraging the Rest of the Web


You already know that the web presents an endless source of creative ideas and techniques. Within web design, change and innovation are in constant motion. So instead of building thousands of different plugins that are quickly outdated, we've decided to build a platform with a strong core set of features that is also flexible and allows you to leverage the rest (or best) of the web.

Thanks again for everyone's interest in attending our first in a series of demos entitled "AR5 & Leveraging the Rest of the Web.", which will include examples of how to set up the following:

  1.     Link & Video Lightbox
  2.     Background Parallax
  3.     Scroll Animations

Before we begin, let's review common features in AR5 that you'll be using when adding third-party packages.

AR5 Boilerplates

There are many ways to add third-party code (HTML, CSS, JS) in your AR5 websites. You can add an HTML module to a column of a page. You can add a Stylesheet and assign it to the website. For today's demo, we'll be adding code in HTML modules , doing so under Admin > Boilerplates in AR5. This will allow us to easily assign to all or select pages, as needed.

Most JavaScript is added before the close of the BODY tag. Most CSS is added inside the HEAD tag. In AR5, you will find these Boilerplate (BP) regions and more.

AR5 Library

If there are any third-party files (CSS, JS, IMAGES) needed, they will go in your AR5 Library. You can add a folder anywhere, but we recommend placing third-party files under the designs folder to keep them separate from other files. Note: file URLs in your HTML code (added in Boilerplates) will need to be updated to reflect new location in your AR5 Library.

First add your Folder, then upload files. Repeat as needed to recreate the third-party file structure.

AR5 Structure Styles

Many third-party packages use "classes" to identify the blocks of content where the CSS or JavaScript will be applied. In AR5, you can create custom Structure Styles for any module, which applies a class to the content when that style is chosen by you or other AR5 users when publishing. These custom styles can be added under Design > Structures > Module > (module type). In some of these examples, we'll be adding Section styles.

The class must match the class used in the third-party CSS or JS.

Once a structure style has been added, it is available as a selection in the options panel when you are editing a module of that type. If you like, you can add more than one style to a module to get the desired effect.

The name of the new style will display as a selection in that module's option panel.

AR5 Live THEME

Themes give you control of the look and feel of your website through an easy-to-use interface, allowing you to implement custom website designs without custom CSS. With control over navigation styles, content styles, and logos, you can get your website looking how you want it—and make changes on the fly—with no technical knowledge required. In the parallax example, we'll be using Live THEME to edit background images in a few regions.

Parallax scrolling requires the background attachment to be fixed. We recommend using a very tall image that fades out at the bottom.

Link & Video Lightbox

There are countless JavaScript packages on the web for creating the lightbox effect for links, images, videos, and other content. And countless more added each day. Today, we'll be looking at a package called fancyBox.

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, HTML content and multimedia on your webpages. It is built on top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

Page shown in demo:
Link & Video Lightbox

Code used in demo:
lightbox-1-of-2-head.txt
lightbox-2-of-2-bodyend.txt

Background Parallax

Parallax scrolling is a very popular technique in web design, where the background moves more slowly than the foreground, creating an illusion of depth in a 2D scene and adding to the sense of immersion.

Again, there are many ways to achieve this effect, but today we will be looking at a simple method that uses JavaScript to offset the background image's vertical position as the user scrolls.

Page shown in demo:
Background Parallax

Code used in demo:
parallax-bodyend.txt

Scroll Animations

You may find that a single third-party CSS or JavaScript package doesn't quite do the trick on its own. Here we are using wow.js to detect when content is scrolled into view, and animate.css to animate the content.

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. 

wow.js enables you to reveal CSS animation as you scroll down a page.

Page shown in demo:
Scroll Animations

Code used in demo:
wow-animate-1-of-2-head.txt
wow-animate-2-of-2-bodyend.txt

Session Video (Edited)