Can anyone explain: 1) How the fish animation was created in the first example, and what slide size did he choose to make the screen appear so wide in the browser (PC). How should I set the slide size to create something like this?
2) Are the animations files - lotties, gifs or something else?
3) In the second Typography example, how was the slide size set-up?
jQuery in fact is the only library used in this. Every fish in fact is a geometrical calculation and draws on Canvas using this kind of code. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D A function createGoldfishes( ) creates them and each instance has specific settings in code. GOLDFISH.prototype = { OFFSET : 30, RIPPLE_INTERVAL : 20, VELOCITY_LIMIT : 0.3,
In the second slide it just another SlideLayer on top of the previous one.
Where do you find stuff like this👆 I'm still a beginner with Javascript, HTML & CSS, but would love to explore more. BTW, is it possible to find details like the Canvas width, font name, font size etc... from the "Source" section in Chrome's Developer tools. Can you share any tutorial which wil help me learn all these basics?
All this info you can indeed find in the browsers developers tools. The Console, Source and Elements sections indeed the most usefull. Codepen is a great source of inspiration. Get a account there and you can find kind all kind of magic stuff. If you want to simply embed something like Ahman did, you can download/export the source and use it in a folder as an embedded WebObject in Storyline. However it is better to use those as reference only and build something alike in your own.
Embedding WebObjects is easy. If you have a working external index.html file in a separate folder you can just point to that file and it works. If you want to control elements of the WebObject with triggers in Storyline it is somewhat more complicated.
Fantastic Math! Sounds like an incredible resource for all JS and SL enthusiasts here. Can't wait to check them all out. Let me know when you finish. Wishing you all success!
15 Replies
They look great, The fishies are a web object animated using jQuery the canvas width is 1160x576
Not sure about the second slide size.
Its a WebObject with Canvas on it. If you check it in the console you end up here...
https://www.amnvohra.com/projects/fish/story_content/WebObjects/5te71AC6ooa/index.html
The size he uses is 1160x576..
The Canvas is called "jsi-ripple-container", so probably somewhere a Javascript ripple library called something like that that handles all.
And a bit of search... here it is... the original...
https://codepen.io/K-T/pen/Ldgdab
jQuery in fact is the only library used in this.
Every fish in fact is a geometrical calculation and draws on Canvas using this kind of code.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
A function createGoldfishes( ) creates them and each instance has specific settings in code.
GOLDFISH.prototype = {
OFFSET : 30,
RIPPLE_INTERVAL : 20,
VELOCITY_LIMIT : 0.3,
In the second slide it just another SlideLayer on top of the previous one.
Kind regards,
Math
Thanks Phil!
Thanks for the detailed explanation, Math! This looks amazing: https://codepen.io/K-T/pen/Ldgdab
Where do you find stuff like this👆 I'm still a beginner with Javascript, HTML & CSS, but would love to explore more. BTW, is it possible to find details like the Canvas width, font name, font size etc... from the "Source" section in Chrome's Developer tools. Can you share any tutorial which wil help me learn all these basics?
All this info you can indeed find in the browsers developers tools. The Console, Source and Elements sections indeed the most usefull. Codepen is a great source of inspiration. Get a account there and you can find kind all kind of magic stuff. If you want to simply embed something like Ahman did, you can download/export the source and use it in a folder as an embedded WebObject in Storyline. However it is better to use those as reference only and build something alike in your own.
Thanks for the suggestions Math, I'll definitely try 'em!
Hi Math! Is there any tutorial which shows how to achieve this? I mean
embedding the web object just like what Aman did.
Embedding WebObjects is easy. If you have a working external index.html file in a separate folder you can just point to that file and it works. If you want to control elements of the WebObject with triggers in Storyline it is somewhat more complicated.
For both options you can find solutions on the forum though.
https://community.articulate.com/discussions/articulate-storyline/how-to-add-jquery-or-anyother-external-javascript-library-to-storyline
This post of mine shows how to add external javascript libraries to Storyline. Under the subtitle 'Another Approach' you find an explanation on how to use a WebObject for this. The same way it works for doing things like Ahman did. Instead of jQuery you can use any html and/or library you find.
When you want to control values from your html file/folder you can do it like this.
https://community.articulate.com/discussions/articulate-storyline/2-way-communication-between-content-in-an-iframe-and-storyline
Basically you set a custom variable and get/set that in the WebObject/iFrame.
Thanks Math 👍
Hi Math! Was wondering if you could make a quick short screen recording of the whole process.
Working on a series of tutorials to show how to use Javascript in Storyline. From start to finish.
Fantastic Math! Sounds like an incredible resource for all JS and SL enthusiasts here. Can't wait to check them all out. Let me know when you finish. Wishing you all success!
Have you finished working on the tutorials
Alas not. Work and projects came across. Will start sharing the first ones soon...
Cool