Spaces:
Running
Running
File size: 1,728 Bytes
3c8b4f7 a67ae61 48cb32a a67ae61 9a5a10f 48cb32a d6b8d19 48cb32a d6b8d19 48cb32a a67ae61 48cb32a 8ed5f8a 48cb32a 8ed5f8a 48cb32a 9a5a10f 48cb32a d6b8d19 8ed5f8a 48cb32a 8ed5f8a 48cb32a 9a5a10f 48cb32a 8ed5f8a 3a238b7 48cb32a f4f6649 48cb32a 3a238b7 8ed5f8a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
# Cover {.unnumbered}
<!-- load dot lotti js code -->
<script src="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>
<!-- the riksha file is obtained through:https://lottiefiles.com/103030-rickshaw-from-pakistan
and https://lottiefiles.com/ranaadeelfarrukh -->
<dotlottie-player
id="lotti_Main_Page"
autoplay
loop
mode="bounce"
src="./Data/7_Animation/Riksha.lottie"
style="width: 100% height:90%">
</dotlottie-player>
<div id="iframe_Tornado" style="display:none;"></div>
<script>
function createIframe() {
const iframe = document.createElement("iframe");
iframe.src = "./Data/6_Html_Data/0_Viz/mPV_16.78.html";
iframe.frameBorder = "0";
iframe.width = "100%";
iframe.height = "600";
return iframe;
}
function hide_Riksha() {
// get lottify riksha
const player = document.getElementById('lotti_Main_Page');
// get iframe container
const content = document.getElementById("iframe_Tornado");
// hide riksha
player.style.display = "none";
// show iframe container
content.style.display = "block";
}
// wait until the whole page has loaded once
window.addEventListener("load", function() {
console.log("whole page has loaded");
// create and insert iframe
const content = document.getElementById("iframe_Tornado");
const iframe = createIframe();
content.appendChild(iframe);
// hide riksha and show iframe when iframe content has loaded
iframe.addEventListener("load", function() {
console.log("iframe has loaded");
setTimeout(function() {
// code to be executed after 2.3 seconds
hide_Riksha();
}, 3300);
});
});
</script>
|