WORKING WITH jQuery LIBRARY(anim):-

HTML & CSS book

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

Pardon me for the dumb ads video recommendation!!

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—-

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: