Don’t Miss It: Animate Your Articulate Storyline Next Button When its Time to Move On!

natestoker 22 September 2024 JavaScript or Logic

Are you looking to add some flair to your Articulate Storyline e-learning course? Today, we’re going to explore a cool JavaScript function that can transform your ordinary navigation buttons into eye-catching, interactive elements. Whether you’re a complete beginner or have some coding experience, this blog post will walk you through the process and explain the magic behind the scenes.

What Does This Function Do?

The JavaScript function we’re discussing today, called addHoverWipeNav, adds a sleek “wipe” effect to your “Next” and “Previous” navigation buttons in Articulate Storyline. When a learner hovers over these buttons, a color sweeps across the button in a specified direction, creating a visually appealing transition.

Key Features

  1. Customizable Colors: You can set your own colors for the wipe effect and the text.
  2. Flexible Directions: The wipe can move in four directions: left, right, up, or down.
  3. Responsive Design: The effect works smoothly on various screen sizes.
  4. Easy Implementation: With just one line of code, you can apply this effect to your course.

The Complete Code

Here’s the full JavaScript code that you can copy and paste into 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 {
position: relative;
overflow: hidden;
}
#next.hoverWipeNav:after, #prev.hoverWipeNav:after {
content: '';
position: absolute;
transition: width 0.25s, height 0.25s, top 0.25s, left 0.25s, opacity 0.25s; 
z-index: 0;
opacity: 0; 
}
#next.hoverWipeNav:hover:after, #prev.hoverWipeNav:hover:after {
width: 100%; 
height: 100%; 
opacity: 1; 
}
#next.hoverWipeNav .text, #prev.hoverWipeNav .text {
position: relative;
z-index: 1;
}
#next.hoverWipeNav .btn-icon, #prev.hoverWipeNav .btn-icon {
position: relative;
z-index: 1;
}

/* Dynamic text color change on hover */
#next.hoverWipeNav:hover .text, #prev.hoverWipeNav:hover .text,
#next.hoverWipeNav:hover .btn-icon path, #prev.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 {
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 = '#efc94c', direction = 'right', textColor = 'white') {
injectCSS();

var nextButton = document.getElementById('next');
var prevButton = document.getElementById('prev');

function applyToButton(button) {
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(nextButton);
applyToButton(prevButton);

// Add specific color and direction styles to buttons
var styleTag = document.createElement('style');
styleTag.innerHTML = `
#next.hoverWipeNav:after, #prev.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%;
}
.hoverWipeNav[style*="--hover-wipe-direction: up"]:after {
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 0;
}
.hoverWipeNav[style*="--hover-wipe-direction: down"]:after {
top: 0;
left: 0;
width: 100%;
height: 0;
}
`;
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');
console.log("Next button state:", nextButton ? nextButton.outerHTML : "Not found");
console.log("Prev button state:", prevButton ? prevButton.outerHTML : "Not found");
}, 2000);
})();

// Usage example:
addHoverWipeNav('#A11100', 'left', 'white');

How to Use It

To implement this feature in your Articulate Storyline course:

  1. Open your Articulate Storyline project.
  2. Go to the slide or master slide where you want to add this effect.
  3. Insert a “Execute JavaScript” trigger.
  4. Copy and paste the entire code above into the JavaScript editor.
  5. At the bottom of the code, you’ll see the usage example. You can modify this line to customize the effect:
addHoverWipeNav('#A11100', 'left', 'white');

This line sets the wipe color to a deep red (#A11100), the wipe direction to left, and the text color to white.

Breaking Down the Code (For the Curious Minds)

If you’re interested in understanding how this works, let’s break down some key parts:

  1. CSS Injection: The injectCSS function dynamically adds CSS to your course, defining the hover effects and transitions.
  2. Button Selection: The addHoverWipeNav function targets the “Next” and “Previous” buttons using their IDs (‘next’ and ‘prev’).
  3. Custom Properties: The function uses CSS custom properties (variables) to make the effect easily customizable.
  4. Pseudo-elements: The wipe effect is created using the :after pseudo-element, which is animated on hover.
  5. Z-index Magic: Careful use of z-index ensures that the text remains visible above the wipe effect.

Customization Options

Feel free to experiment with different colors and directions. Here are some ideas:

  • addHoverWipeNav('#4CAF50', 'up', 'black') for a green upward wipe with black text.
  • addHoverWipeNav('#3498db', 'right', 'white') for a blue rightward wipe with white text.

Conclusion

Adding this interactive element to your Articulate Storyline course can significantly enhance the user experience. It’s a small touch that can make your e-learning content feel more polished and engaging. Whether you’re a coding novice or an experienced developer, this function offers an easy way to elevate your course design.

Remember, the key to great e-learning isn’t just about the content—it’s also about creating an enjoyable, interactive experience for your learners. Happy course creating!

 

Related Posts