Tired of those plain “Next” and “Previous” buttons in your Articulate Storyline courses? It’s time to inject some personality and interactivity into your e-learning navigation! With the captivating “hover wipe” effect, you can transform those mundane buttons into eye-catching elements that delight your learners. Imagine a splash of color that gracefully slides across the buttons as the user hovers, adding a touch of dynamism and visual appeal.
The JavaScript Spell
Let’s unveil the JavaScript incantation that brings this effect to life within your Articulate Storyline project:
(function () {
let cssInjected = false;
function injectCSS() {
if (cssInjected) return;
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
#next.hoverWipeNav, #prev.hoverWipeNav, #submit.hoverWipeNav {
position: relative;
overflow: hidden;
}
#next.hoverWipeNav:after, #prev.hoverWipeNav:after, #submit.hoverWipeNav:after {
content: '';
position: absolute;
transition: width 0.25s, height 0.25s, top 0.25s, left 0.25s, right 0.25s, opacity 0.25s;
z-index: 0;
opacity: 0;
}
#next.hoverWipeNav:hover:after, #prev.hoverWipeNav:hover:after, #submit.hoverWipeNav:hover:after {
width: 100%;
height: 100%;
opacity: 1;
}
#next.hoverWipeNav .text, #prev.hoverWipeNav .text, #submit.hoverWipeNav .text {
position: relative;
z-index: 1;
}
#next.hoverWipeNav .btn-icon, #prev.hoverWipeNav .btn-icon, #submit.hoverWipeNav .btn-icon {
position: relative;
z-index: 1;
}
/* Dynamic text color change on hover */
#next.hoverWipeNav:hover .text, #prev.hoverWipeNav:hover .text, #submit.hoverWipeNav:hover .text,
#next.hoverWipeNav:hover .btn-icon path, #prev.hoverWipeNav:hover .btn-icon path, #submit.hoverWipeNav:hover .btn-icon path {
color: var(--hover-wipe-text-color) !important;
fill: var(--hover-wipe-text-color) !important;
}
/* Modified styles for always-visible stroke */
#next.hoverWipeNav:before, #prev.hoverWipeNav:before, #submit.hoverWipeNav:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
box-sizing: border-box;
border: 2px solid var(--hover-wipe-color);
}
`;
document.head.appendChild(style);
cssInjected = true;
console.log("CSS injected");
}
function addHoverWipeNav(color, prevDirection, nextDirection, submitDirection, textColor) {
injectCSS();
var nextButton = document.getElementById('next');
var prevButton = document.getElementById('prev');
var submitButton = document.getElementById('submit');
function applyToButton(button, direction) {
if (button) {
button.classList.add('hoverWipeNav');
button.style.setProperty('--hover-wipe-color', color);
button.style.setProperty('--hover-wipe-direction', direction);
button.style.setProperty('--hover-wipe-text-color', textColor);
console.log(`Added hoverWipeNav class to ${button.id} button with color ${color}, direction ${direction}, and text color ${textColor}`);
}
}
applyToButton(prevButton, prevDirection);
applyToButton(nextButton, nextDirection);
applyToButton(submitButton, submitDirection);
// Add specific color and direction styles to buttons
var styleTag = document.createElement('style');
styleTag.innerHTML = `
#next.hoverWipeNav:after, #prev.hoverWipeNav:after, #submit.hoverWipeNav:after {
background-color: ${color};
}
.hoverWipeNav[style*="--hover-wipe-direction: right"]:after {
top: 0;
left: 0;
width: 0;
height: 100%;
}
.hoverWipeNav[style*="--hover-wipe-direction: left"]:after {
top: 0;
right: 0;
width: 0;
height: 100%;
}
`;
document.head.appendChild(styleTag);
}
// Expose the function globally
window.addHoverWipeNav = addHoverWipeNav;
// Check button states after a delay
setTimeout(function () {
var nextButton = document.getElementById('next');
var prevButton = document.getElementById('prev');
var submitButton = document.getElementById('submit');
console.log("Next button state:", nextButton ? nextButton.outerHTML : "Not found");
console.log("Prev button state:", prevButton ? prevButton.outerHTML : "Not found");
console.log("Submit button state:", submitButton ? submitButton.outerHTML : "Not found");
}, 2000);
})();
// Usage examples:
addHoverWipeNav('#CC5500', 'left', 'right', 'right', 'white'); //color, previous, next, submit, text color on wipe
Breaking It Down: Behind the Scenes of the Magic
Now that you’ve seen the code in action, let’s dive deeper into how the magic works.
The Wizard’s Apprentice: injectCSS
The injectCSS function acts as the wizard’s apprentice, discreetly setting the stage by adding the necessary CSS rules to your Articulate Storyline player. These rules ensure the hover wipe effect looks and feels just right, handling everything from element positioning to smooth animations. Plus, it’s smart enough to run only once, no matter how many times you call the main function – no redundant CSS here!
The Star of the Show: addHoverWipeNav
Next, we have the star of the show: the addHoverWipeNav function. This is where the real transformation happens, specifically targeting those Articulate navigation buttons. You’re the director here, with the power to customize the effect to your liking. Choose your favorite color for the overlay (or stick with the default sunny yellow) and decide which way you want the color to sweep across (right, left, up, or down – the choice is yours!). This function first checks if the CSS stage is set, calling injectCSS if needed. Then, it locates your “Next” and “Previous” buttons within the Articulate player, preparing them for their grand entrance.
The Makeup Artist: applyToButton
The applyToButton function acts as the makeup artist, adding special CSS classes and properties to your buttons, getting them ready for their close-up. These classes and properties ensure the buttons are styled correctly and prepared for the hover wipe animation.
The Finishing Touches: Custom CSS Rules
Finally, a few more CSS rules are added, tailored to your specific color and direction choices, ensuring the effect is pixel-perfect within the Storyline environment. These rules define the exact appearance and behavior of the hover wipe, such as the color of the overlay and the direction of the animation.
The Vigilant Assistant: Time-Out Function
But the magic doesn’t stop there! The addHoverWipeNav function is made available globally within your Storyline project, so you can easily cast this spell from anywhere in your JavaScript code. There’s also a little time-out function that acts as a vigilant assistant, checking on your buttons after a couple of seconds to ensure everything is working smoothly within the Articulate player. It’s like having a built-in debugger, ready to catch any unexpected hiccups.
Unleash the Magic
Now, the moment you’ve been waiting for: it’s time to make some magic! With a simple call to addHoverWipeNav, you can enchant your Articulate Storyline navigation buttons. For example: addHoverWipeNav('#320082', 'left'); This will create a left-to-right hover wipe with a deep purple color on both your “Next” and “Previous” buttons.
This code is not only visually impressive but also efficient and customizable. It gives you the freedom to personalize the hover wipe effect to match your course’s branding and style. Plus, it includes helpful console logs, allowing you to peek behind the curtain and understand how the magic works. The code is neatly organized within an IIFE (Immediately Invoked Function Expression), keeping your global namespace clean and tidy.
So go ahead, play around with different colors and directions, and watch your Articulate Storyline navigation buttons come alive! Impress your learners with this subtle yet engaging enhancement and make navigating through your e-learning content a more delightful experience. And remember, if you have any questions or want to delve deeper into the code’s inner workings, feel free to ask!
