Animation Library
Add animation classes to content you'd like to animate.
Fade-in content animation
The fade-in class added to the <h2> and <p> elements will fade-in the elements when users scroll to it.
<h2 class="icon-book-open fade-in">Module Introduction</h2>
<p class="fade-in">Lorem ipsum dolor...</p>Slide-in content animations
Slide-in classes will slide-in the elements when users scroll to it. Elements can slide in from either left, right, top or bottom. The animation can either be more pronounced (i.e. slide-left-offscreen) or more subtle (i.e. slide-left-subtle).
slide-left-offscreen
<h2 class="icon-book-open">Module Introduction</h2>
<p class="slide-left-offscreen">Lorem ipsum dolor...</p>slide-right-offscreen
<h2 class="icon-book-open">Module Introduction</h2>
<p class="slide-right-offscreen">Lorem ipsum dolor...</p>slide-top-offscreen
<h2 class="icon-book-open">Module Introduction</h2>
<p class="slide-top-offscreen">Lorem ipsum dolor...</p>slide-bottom-offscreen
<h2 class="icon-book-open">Module Introduction</h2>
<p class="slide-bottom-offscreen">Lorem ipsum dolor...</p>slide-left-subtle
<h2 class="icon-book-open">Module Introduction</h2>
<p class="slide-left-subtle">Lorem ipsum dolor...</p>slide-right-subtle
<h2 class="icon-book-open">Module Introduction</h2>
<p class="slide-right-subtle">Lorem ipsum dolor...</p>slide-top-subtle
<h2 class="icon-book-open">Module Introduction</h2>
<p class="slide-top-subtle">Lorem ipsum dolor...</p>slide-bottom-subtle
<h2 class="icon-book-open">Module Introduction</h2>
<p class="slide-bottom-subtle">Lorem ipsum dolor...</p>Button animations
The following classes can be added to buttons or links styled as buttons to make them more interactive.
- change-bg-color: changes the background color of a button on hover
- slide-bg-color: slides in a new background color on hover
- pulse-hover: slightly increases the size of a button on hover
- click-shadow: an inset shadow is added to a button when clicked
- hover-glow: button has halo-like glow on hover
- rounded-bg-slide: slides in a new background color on hover for rounded buttons
- parallel-outlines: background color of a button turns transparent and outlines get added to the top and bottom
- outline: background color turns transparent and outline is added
// Change background color of button
<a class="btn change-bg-color" href="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=608068&type=content&rcode=PIMA-3596885" target="_blank">Go to Readings</a>
// Slide new background color in from left
<a class="btn slide-bg-color" href="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=608068&type=content&rcode=PIMA-3596885" target="_blank">Go to Readings</a>
// Button slightly increases in size on hover
<a class="btn pulse-hover" href="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=608068&type=content&rcode=PIMA-3596885" target="_blank">Go to Readings</a>
// Adds inset shadow to button when clicked
<a class="btn click-shadow" href="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=608068&type=content&rcode=PIMA-3596885" target="_blank">Go to Readings</a>
// Button has a halo-like glow on hover
<a class="btn hover-glow" href="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=608068&type=content&rcode=PIMA-3596885" target="_blank">Go to Readings</a>
// New background slides in from left for rounded buttons
<a class="btn rounded-bg-slide" href="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=608068&type=content&rcode=PIMA-3596885" target="_blank">Go to Readings</a>
//Background color turns transparent with outlines on top and bottom
<a class="btn parallel-outlines" href="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=608068&type=content&rcode=PIMA-3596885" target="_blank">Go to Readings</a>
// Background color turns transparent and button is outlined
<a class="btn outline" href="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=608068&type=content&rcode=PIMA-3596885" target="_blank">Go to Readings</a>View Options
Quickly offer view option features by adding just a single attribute to your <body> element
Dark Mode
Use dark-mode to add the dark mode view option to your course shell. This gives students the option to toggle on a dark mode version of the webpage.
<body dark-mode>Focus Text
Use focus-text to add the focus reader view option to your course shell. This gives students the option to toggle on a view with larger line spacing and a dynamic highlighting feature.
<body focus-text>Large Text
Use large-text to add the large text view option to your course shell. This gives students the option to toggle on a version of the webpage that increases the font sizes (without zooming the entire viewport).
<body large-text>Narrow Width
Use narrow-width to add the narrow width view option to your course shell. This gives students the option to toggle on a version of the webpage with a more narrow paragraph width.
<body narrow-width>Custom Combinations
Use any combination of the view options above to add them as options to your course shell. This gives students the option to toggle any combination of the designated view options.
<body dark-mode large-text>All View Options
Use view-options to automatically add all of the above view options to your course shell. This gives students the option to toggle any combination of dark mode, focus reader, large text, or narrow width versions of the webpage.
<body view-options>