master_Thesis / index.qmd
JavedA's picture
added aircraft and rocket animation above the table of contents toc view
d6b8d19
raw
history blame
1.73 kB
# 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>