The latest episode of our Articulate Storyline 360 Magic Series is now available to watch on Youtube!
In Episode Three of our video tutorial series, Chris Hodgson takes you through the simple steps to take in order to create a smooth image zoom transition in / out effect using just a few extra lines of CSS code added to your project. The idea for this episode was expanded on from one of our previous eLearning blog posts on the Discover eLearning website!
This interactive UI capability is not possible ‘out of the box’ with Articulate Storyline 360, however as with many of our other videos in the series so far we aim to demonstrate how there are so many creative possibilities when developing with the world’s leading eLearning authoring software than what meets the eye!
Here is the latest episode to watch right now:
Be sure to subscribe to the Discover eLearning YouTube Channel to be notified of future episodes!
Discover eLearning are specialists in the development of engaging interactive digital learning content using Articulate Storyline 360, having created award-winning public exhibition eLearning work utilising everything that the software has to offer, as well as our entries into weekly eLearning Heroes Challenge ran on the official Articulate website.
A copy of the written transcript for this episode of our Storyline Magic Series is available to read here:
Hi this Chris from Discover eLearning, and welcome to episode three of our Storyline Magic Series where we have been exploring some of the things that you can achieve with your Articulate Storyline content with the help of some extra CSS and JavaScript code.
In this episode I’m going to show you how you can create this smooth image zoom in and out animation using just a few line of custom CSS code.
To make this trick work, we first need to apply an Accessibility Text value to our image in Storyline. This will then allow us to target this specific image with CSS using the value that we have set.
To do this, right click on the image in your project and then click Accessibility.
Now enter a value into this box. Something explaining what the image is would be recommended just in case a user does use a screen reader to identify the object on the slide, but try to keep this to one word if you can.
With this in place you can publish your project whenever you are ready, as either a web activity or a SCORM or xAPI package.
When the project is published, go ahead and open the story.html file in your favourite code editing software.
What we’ll then do is add our custom CSS code between the style tags that already exist in the head tag of the document.
Start by adding an open square bracket and write data-acc-text, follow this with a tilde and an equals symbol. What these two symbols together mean in code is that we want to target any data accessibility text value containing what is written between these double quote symbols. This is where we will add the accessibility value that we wrote earlier in Storyline.
Let’s now add a closing square bracket and then write the word div, as we’ll be targetting the container for the image with this first CSS code block. Add an open close curly brace and within this space we will add an overflow is hidden CSS value. Finish the line with a semi-colon.
Next we’ll quickly duplicate that code block but this time we want to write some rules for the image itself so we will change the word div to svg, and we’ll add the following two CSS values between the curly braces. This transition value defines for long the zoom effect will last, so if you want a fast zoom effect you can change the second value here. The transform-origin value makes sure that the zoom effect is centered throughout.
Finally we’ll copy that new code block and this time we’ll create a rule based on if the mouse is being hovered over the image. We do this by writing a colon followed by the word hover.
Between the curly braces this time we will add a transform scale value, with the number 1.4 in parenthesis. This is the scale value for the zoomed in image, so in my case the image will be magnified to 1.4 times its original size when a mouse is hovered over it. You can play around with this value as you see fit.
We’re all set so let’s save the story.html file and see the result.
As you can see we get the zoom effect but with the original image size still in tact throughout the transition, like a fixed frame around the edge of the image. This is because we have the overflow hidden value in place in our CSS, but if we wanted we can change this value to visible and the image will expand past the boundary of the original size.
Finally if you would prefer to have your image zoom effect occur when the user clicks on the image instead of hovering with their mouse, then you can come back to your CSS values and change the word hover to active.
This will change the interaction to a mouse click in order to trigger the zoom transition, but be aware that CSS only allows this to happen whilst the mouse click stays down. We could get around this by introducing an onClick event using JavaScript, but that would be a topic for another video!
If you are feeling adventurous, you could also try mixing CSS interactions based on whether the user is hovering their mouse or clicking on the image! Take a look at this code example. In this case we have four different images on our Storyline slide so we use a comma seperator to apply each object to the same CSS rule contained in the curly braces.
You can see here that we have a default greyscale value set for each image of 80%. This will then fade to full colour when any of the images are hovered over with the mouse, as you can see here, and then the image itself will scale to 1.2 times its size when it is clicked.
Let’s take a look at the result in the browser.
Thank you for joining us for another episode of our Storyline Magic Series. Please be sure to like this video and subscribe to the Discover eLearning YouTube Channel for notifications of future episodes.
Bye for now!
