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.
6 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!