Hi Ian,
The first step after exporting is uploading entire exported folder to your web server.
After that, you can use iframe
tag to embed Saola Animate content into your page, for example:
<div style="width:100%; padding-bottom:75%; position:relative;">
<iframe src="path/to/Saola Animate/HTML file" style="position:absolute; top:0px; left:0px; width:100%; height:100%; border: none; overflow: hidden;"></iframe>
</div>
As you may already know, the outer div in the above code with padding-bottom
style is used to keep the aspect ratio for the iframe
content. Please update its style depending on your content aspect ratio (see https://danieljones.design/css-aspect-ratio-calculator/ for more detail).
An example of this method is the banner of Saola Animate home page: https://atomisystems.com/saola-animate/. You can Inspect Element to see the code.
In case you want to show Saola Animate content directly inside your page (without using iframe
), please open its HTML file in a text editor, copy parts of its content and make some changes as follows into your page:
- The player script:
<script type="text/javascript" src="new/path/to/slplayer.js"></script>
Please remember to update the path of slplayer.js
file. This path can be absolute, or relative to the your page.
- The content inside the
body
tag, e.g.
<!-- you may need to add styles for Container_ID div to suit your need -->
<div id="Container_ID" style="position: relative; height: 100%;"></div>
<script type = "text/javascript">
// script to load Saola Animate content into Container_ID div
(function(Saola) {
var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
Saola.openDoc('path/to/Saola Animate/content JavaScript file', 'Container_ID', {
paused:false,
preloaderOptions: li,
center: 'horizontal',
resourceFolder: 'path/to/resources'
});
})(AtomiSaola);
</script>
Please remember to update the path of content JavaScript file, and path of the resources folder. These path can be absolute, or relative to the your page.
An example of this method is the Motion Path feature in Saola Animate home page: https://atomisystems.com/saola-animate/. You can click the Motion Path feature to see the embedded content, and Inspect Element to see the code.
You can change Container ID, Resource folder, even the content of the output HTML in Document pane in the editor.
Regards