Storyline Magic Series - Episode 09 Building 3D Parallax Hover Effects Using Tilt.JS
Vložit
- čas přidán 6. 09. 2024
- Discover our Advanced eLearning Developer Series courses over on the Discover eLearning website for more great learning opportunities for Articulate Storyline developers - discoverelearn...
Welcome to a brand new tutorial for Articulate Storyline 360 developers here on the Discover eLearning CZcams Channel!
In this video, Chris Hodgson ( / skriss ) will provide a comprehensive walkthrough for how to get the Tilt.JS library working in your Articulate Storyline projects.
Doing so will give you the ability to create impressive looking 3D parallax hover effects for your grouped images, as well as many other styles of rollover effect that are possible with Tilt.JS
Using 3rd party JavaScript libraries is a great way of expanding the capabilities of Articulate Storyline, so keep experimenting and have fun!
If you've been enjoying our Storyline Magic Series so far, please do like, share, and subscribe to our channel!
Music from Uppbeat (free for Creators!):
uppbeat.io/t/r...
License code: IYCY8B7FLQETOGGY
#articulatestoryline #tutorials #javascript #tiltJS
This is a great idea, thanks for sharing! I have some suggestions for users in the comments if you are having trouble, or want to use this on several elements.
1. Make sure to follow the structure in the video: Objects MUST be grouped together in storyline - the outer element (your group) is what gets the "data-tilt" attribute for tiltJS to work. The inner elements need to have their transform properties set to stop wacky repositioning.
2. For the inner transform, I suggest wrapping the split() calls into a function if you need it for multiple buttons. It will save a lot of repetition. ~~
const innerTransform = function(element) {
const style = window.getComputedStyle(element);
const transform = style.getPropertyValue('transform');
let values = transform.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
let posX = parseInt(values[4].trim());
let posY = parseInt(values[5].trim());
element.style.transform = "translate3d("+posX+"px, "+posY+"px, 30px) rotate(0deg) scale(1,1)";
}
I did the above where element is the document.querySelector(foo). You can then just call it for all the inner elements of each group rather than typing it all out again for each element, like so: innerTransform(document.querySelector('div[data-acc-text="bar"]'));
3. save yourself a lot of copy and pasting and load tilt.js from a CDN the same way you did with jquery: unpkg.com/tilt.js@1.2.1/dest/tilt.jquery.min.js
4. another way to achieve the cursor change without a null layer is to convert to a freeform select one and assign your groups to the form. You don't have to use the quiz logic.
To all those having trouble getting the steps shared in this tutorial working in their own Storyline projects:
1) Do not miss out any steps from the tutorial as they are all equally important
2) Make sure you have pasted the tilt.jquery.js file to the root directory of your project, and do this every time you publish from Storyline
3) The browser console can be your friend to help identify any issues with your own code
4) Take advantage of the console.log() or alert() functions in JS. Try creating alerts at different points in the code to ensure variables are capturing the correct values
Hi, Thanks for this, its really an amazing effect to add in my projects. Finally had it worked for 1 button. Now I am trying to put multiple buttons/groups in one slide like your initial example. I followed putting 2 and 3 on the slGroup for the 2nd and 3rd button(group) but when i publish it, only the inner on button one worked and only outer of 2nd and 3rd moves not the inner icon. is there any other code in the script that i need to duplicate aside from the slGroup? thanks again in advance for your help.
HI @@johncalvin02, yes you will also need to repeat the steps that apply to the inner image (in our video this is everything from 8:36 onwards). Make sure each new inner image has its own unique accessibility text value, and use this value in everything repeated (in our video between lines 9-22) as the selected data-acc-text value.
Hi! Does anyone have the entire thing followed and is successfully working? Mine is not. I am not sure what part I missed. I followed every code.
a few others and myself had the same issue. When I pressed for help, he was unwilling to help explain further, which leads me to believe he left out an important step or detail. It's really upsetting when people make tutorials and claim they are to help other L&Ds, when infact that is not the case at all.
I'm also unable to get it to work... Sad about that because this seemed like such a cool feature to include in courses!
Hi! I followed everything as closely as I could, and in the Sources in the Console, I don't didn't see the tilt.jquery,js for my file, but I do for his file. I tried put the scripts above everything else in the Execute Javascript trigger, and then I could finally see the tilt.jquery.js in the console!
I have had success with the tutorial. See my response to @fwu007 in the thread below. HTH
@@davidrosenfeld4787 Can you please copy paste the code here if you dont mind?
This looks and works awesome. It took a little fiddlin' to get it to work, but after I downloaded a different version of the tilt.jquery.js, it started working.
I embedded the js into a Storyline webobject, and re-routed it in your script so I wouldn't have to keep dragging it into the published folder.
I also changed the 30px to 70px (in the translat3d section) so that it looks more cartoony.
VERY NICE!
Really cool, one thing i have been trying and failing to do in storyline is to visually move objects on the screen without storyline breaking it. This method using grouping works for the most part, but if you were to say translate the image to right side of the screen, there are still issues with resizing the browser window since storyline thinks the object is still in it's inital location. Has anyone been able to figure this out?
Awesome
I have to be doing something wrong with naming the accessibility text and it not matching the javascript. I just wanted to quickly test this with two objects. So i layered a triangle on top of a square and grouped them. My group is named group. Inside the group my rectangle is named rectangle and my triangle is named triangle. Now if someone could please tell me what I should label the accessibility text for these and how that would be named properly in the const slGroup = document.querySelector('div[data-acc-text="???"] .group'); I would appreciate it.
In this video - 'outerg' is the data-acc-text value of the group, 'innerb' is the value of the weather icon, and 'outerb' is the value of the card shape beneath the icon (which we don't actually reference in the JS). We apply the data-tilt attributes to the child div (with class name 'group') contained within the parent div (with class name 'outerg') because this ensures the transform positioning values assigned to the parent div by Storyline are not overridden by Tilt.js.
@@discoverelearning I appreciate the help. Unfortunately something doesn't work. Running latest version of Storyline 32bit. I have a box with a triangle on top. Grouped the objects and named the group accessibility text outerg. Copied your js code exactly, and triple checked that there were no mistakes in the code. Exported the project, added the tilt.js file to the main folder, started the project and it's just flat shapes with no movement. I even tried changing the js to call the latest jquery 3.7.1, I tried putting the const script1 and 2 above the const slGroup, and nothing works.
Hey chris, i got the effects working as per your explaination, thanks a ton, can you just explain, how to add other effects into it? For instance Just explain On change event effect and then i can add others. Thanks again
Hi Zartab, many thanks for your feedback. We could potentially record a follow-up to this video if it would be useful. What exactly are you trying to accomplish within your project? CH
I can't seem to get my accessbility image to work with the code. any reason? I just have 1 image. no group.
@discover eLearning. can you help? I follwed the video exactly and still not working
@@mab14920ify Is it working if you make the group like how Chris has shown in the Video?
I have done exactly like how he did in the video but for some reason the JS is not working.
Let me know if you face the same issue.
@@akbarshaikh6545 SAME!!!! mine isn't working! So i'm wondering what code we are missing? can you help Chris?
It's important to follow the instructions provided in the tutorial carefully. I explain at 04:30 why the transform values need to be applied to a group. Hope this helps.
@@discoverelearning to follow up on my below comment, when I go to hit F12 button and look at the code to gather the div, I can't 1: find the Div class for my image or the acc text within the code? ( does this cause an issue?) also, where would I get my numbers for the dynmaic values to apply to the group div?
not working
thank you so much, it is very useful.
I need your help if possible, I tried to add more features such as glare
slGroup1.setAttribute('data-tilt-glare', 'true');
slGroup1.setAttribute('data-tilt-glare-max', '0.5');
but the glare is not showing when i publish it, other features are working great thanks to you.
You will have better results using the glare effect if you just used tilt.js with a single object/image on your slide that isn't in a group, as I don't think this would work when applied to a Storyline group div. E.g. Here is the 'outerb' shape only with the glare applied: 360.articulate.com/review/content/7b60daf6-54c3-4704-a274-2b7b49b2e747/review
@@discoverelearning It worked!! Thank you for your help. your videos are very inspiring and really helpful.
but there is a minor problem, the effect is applied to the rectangle, but the image above is erased with the glare every time I hover the mouse over it. How did you manage to keep the image unaffected? I tried to apply the glare on the image as the rectangle too.