While I've mastered adding images to my HTML website, there's one thing that still eludes me despite scouring numerous online resources.
I recently created a small animation using JavaScript on a different IDE, and I have the link to my output:
I'm struggling to figure out how to embed this animation link into my HTML website. Using the regular <img src .... tag doesn't seem to work.
The animation was coded in JavaScript, and the corresponding code looks like this:
import Vue from "vue";
import App from "./App.vue";
import TypeIt from "typeit";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
new TypeIt("#inner-demo-2", {
speed: 100,
lifelike: true,
cursor: true,
cursorSpeed: 200,
loop: true
})
.pause(1000)
.type('<span style="font-family: Segoe UI Emoji">👋</span>', {
html: true
})
.type(" Hi there! I'm Hussain Omer")
.go();
How can I incorporate this code into my HTML file?
This is for my personal website, so any assistance would be greatly valued!
I'm relatively new to HTML, having started learning just a week ago, so any guidance is highly appreciated!
I aim for the animation to be prominently displayed at the top of the page, covering the entire width but aligning perfectly at the top.
Here's the HTML code snippet from my website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
...
...
...
</html>
CSS CLASS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
...
...
...
JS CLASS:
// header scrolling effect
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('header').addClass('nav-show');
}
else{
$('header').removeClass('nav-show');
}
})
...
...
...
By the way, this is a free HTML website template that I came across.