While working on a web. project I felt the requirement for vast animations which wasn’t easily possible with SASS & Bootstrap.
Since, CSS had confined choices for content animation so I moved towards “jQuery”
Even though I never worked with jQuery before yet, it was pretty easy to play with its effects. So, let’s get started- I’ll show this inside the HTML file since the majority of students work with it. (For the application, I’ll update it in another post).
Open the index.html file within your favorite text editor( Visual studio preferred). Forex- I’ll work with the underneath file.
Note- Select any project of your choice.
We’ll apply library effect to First heading of the above image.
NOW,-
Open the following link in your web browser- https://mattboldt.com/demos/typed-js/
You’ll see two downloading option- click on – “Download as zip”.
Extract file & open the folder.
It’ll look like this-
You can see the selected file named as typed. [note- you can see the location within the address bar]
Cut or copy the file and paste it inside the folder where index.html is sleeping.
See below-
Now,
Open the text editor-
Mine is looking like this-
We’ll be getting below image if we run it now..
As you can see, the heading which I want to animate is highlighted with white color(sort of).
Typed.js provide a variety of animation as shown below–(open it by clicking index.chrome of typedjs folder.)
(small size for you to see complete image.)
Choose your favorite animation & copy the code. I’ll have “smart backspace” one.
Let seee.. the 1st & 2nd image respectively
—–
1st image
—–
2nd image
All you gotta do is,
1)-select a random class name with heading tags embedded .
2)-Put the script URL of typed.js(Same folder where index.html is sleeping) .
3)-put your preferred animation code from index of typedjs.
4)- select the speed and loop(if any).
And you’re good to go…
See the video below–
VIDEO….link
Same can be apply to any heading, sub-heading, long para etc..
Contact for any assistance .
I’ll post “THREE.JS’s” working in the next blog….
Suggestions are welcome—-
