Hello, friends how are you guys, I hope you guys are doing well, in this article and video I’ll make a personal portfolio website with animation using HTML, CSS, and Anime js & Lettering js. if you follow my channel and watch my videos, you will know that I made this a personal portfolio website earlier. If that student has liked it more, then I have made a project of different types of portfolio websites on it, whose link I have given below, you can see.
In this portfolio website, I have used Anime JS and Lettering JS for animation. To use lettering js, you have to access the link of jquery, you cannot use lettering js without jquery because lettering js is dependent on jquery and in Anime JS you will not need jquery, you can use it like this.
You also might like this Portfolio Website
Portfolio Website with Animation & FadeIn Transition Effect Using HTML,CSS & JQUERY Part-1
Portfolio Landing Page Design With Dark & Light Toggle Using HTML, CSS & JS, GSAP Animation
Portfolio Website Design using html, css, jquery | Multiscroll | OnePage Website
Creative Portfolio Website Design Using HTML, CSS, JQuery WOW Animation #1
I have added the code of jsfiddle below, you can copy it, you can copy it for this, you will need 3 files. first index.html second style.css third script.js, If you do not want to create three files, then you can also do it from one file. For this in index.html, you have to copy all the code in the index.html file, after that the code of CSS is to create a style tag inside the head tag. Hey and paste it, then the HTML code should be inside the body and the JS code should be pasted inside the script tag. That’s all you have to do and you’re done.
index.html This file is to copy the complete HTML code. In this, there is a left swede logo and right side menu inside the main header, then in the middle is the name and image. And then at the bottom is the text of the introduction.
style.css This file contains the style code of the entire website, you can copy it. And in this, the respect of the thing to which I have given animation has been reduced to zero. So that no object(images, text, button, etc.) is visible first.
script.js This file contains the code for the entire animation, which is the code for the JS. In this, I have used lettering js (lettering js separates the character of any word so that I can give animation to each character accordingly) and in anime js, I have given animation (if you use anime js then you have to No need to add jquery.)
As you have seen the code of jsfiddle above and you can also copy it in your file and you can also learn how I made this layout, how animations are done in it. And you can also add your own image to it (Image size: 527×533). If you do not understand, then no problem, I have also told you in the video below that you can see it. I have given the link to the video below.
So, friends, I hope that you have liked this article and video and especially I made this video for college students only and I have many such videos which students can use in their project and learn something new from it. And in their own way, they can also create their own project. And if you are a student and you want the direct code, then you can download it from the link given below. So, friends, I request you to write and share this video so that other students can also take advantage of it and if there is any question, then you can ask through the comment below, I will definitely try to answer it. Thank you very much for taking the time to read this article and watch the video.
Subscribe to the LearnDesign youtube channel.
Below I have attached the source code you can download.
