Multimedia And Animation SECTION A Program No.1: Program to Design LOG IN Form in Html. Login Page

Student Login Form

username:
password:

Remember me
Forgot password?
SNJPSNMS Trust’s Degree College Nidasoshi Page 1 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 2 Multimedia And Animation Program No.2: Program for Creating animation of “Bouncing Cloud” using HTML and CSS. Bouncing cloud
SNJPSNMS Trust’s Degree College Nidasoshi Page 4 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 5 Multimedia And Animation Program No.3: Program to demonstrate a keyframe animation.

MULTIMEDIA AND ANIMATION

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 7 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 8 Multimedia And Animation Program No.4: Program to demonstrate A Font style, font weight and font size properties using CSS.

the font property

Multi Media

Animation

SNJPSNMS Trust’s Degree College Nidasoshi Page 9 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 10 Multimedia And Animation Program No.5: Program to demonstrate multiple animations.

MULTIPLE ANIMATION

note: when animation is finished, it goes back to its original style.

SNJPSNMS Trust’s Degree College Nidasoshi Page 11 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 12 Multimedia And Animation Program No.6: Program to use table tag to format web page. Also create the Time Table of your class using table tag.

TIME TABLE

SNJPSNMS Trust’s Degree College Nidasoshi Page 14

Day/Period
 I
9:00-9:55 		II
9:55-10:50
10:50-10:55 		III
10:55-11:50 		IV
11:50-12:45 		12:45-1:30 V
1:30-2:25 		VI
2:25-3:20 		SNJPSNMS Trust’s Degree College Nidasoshi Page 13 Multimedia And Animation VII
3:20-4:15
Monday Pyt OS

S
H
O
R
T
B
R
E
A
K
E

 M&A Eng

L
U
N
C
H

 LAB OEC
Tuesday Pyt Kan OS SPORTS LAB M&A
Wednesday M&A pyt LAB Eng OST OS
Saturday
height="50">M&A height="50">Eng height="50">Kan height="50">Pyt height="50">OS height="50"> height="50">Eng height="50">OS height="50">M&A height="50">OEC height="50">Pyt Multimedia And Animation Thursday LAB Pyt Eng OST M&A OEC Friday LAB SNJPSNMS Trust’s Degree College Nidasoshi Page 15 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 16 Multimedia And Animation Program No.7: Program to Demonstrate Longhand properties in CSS.

Welcome To Multimedia And Animation

SNJPSNMS Trust’s Degree College Nidasoshi Page 17 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 18 Multimedia And Animation Program No.8: Program to Demonstrate shorthand properties in CSS.

Welcome to Multimedia and Animation

SNJPSNMS Trust’s Degree College Nidasoshi Page 19 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 20 Multimedia And Animation Program No.9: Program to Demonstrate animation in reverse direction or alternate cycles. CSS |animation-direction Property

Multimedia And Animation

animation-direction property

Animation ....

SNJPSNMS Trust’s Degree College Nidasoshi Page 21 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 22 Multimedia And Animation Program No.10: Write JavaScript Program to show light ON/OFF Demo. LIGHT ON AND OFF

Light ON And OFF

SNJPSNMS Trust’s Degree College Nidasoshi Page 23 Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 24 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 25 Multimedia And Animation SECTION B Program No.1: Program to Demonstrate SVG (Scalable Vector Graphics) Circle.

Welcome To Multimedia And Animation

SNJPSNMS Trust’s Degree College Nidasoshi Page 26 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 27 Multimedia And Animation Program No.2: Program to Demonstrate SVG (Scalable Vector Graphics) Ellipse. SVG Ellipse

Sample SVG Ellipse Image

Ellipse #1: without opacity. SNJPSNMS Trust’s Degree College Nidasoshi Page 28 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 29 Multimedia And Animation Program No.3: Program to Demonstrate SVG (Scalable Vector Graphics) Star. SVG

SVG STAR

SNJPSNMS Trust’s Degree College Nidasoshi Page 30 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 31 Multimedia And Animation Program No.4: Program to demonstrate “StrokeText()” method using HTML Canvas. your browser does not support the HTML canvas tag. SNJPSNMS Trust’s Degree College Nidasoshi Page 32 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 33 Multimedia And Animation Program No.5: Program to demonstrate BezierCurveTo() method using HTML canvas. your browser does not support the HTMLs canvas tag. SNJPSNMS Trust’s Degree College Nidasoshi Page 34 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 35 Multimedia And Animation Program No.6: Program to demonstrate different line patterns with different colors using Canvas. Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 37 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 38 Multimedia And Animation Program No.7: Program to Demonstrate Gradients using HTML canvas.

Gradient

SNJPSNMS Trust’s Degree College Nidasoshi Page 39 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 40 Multimedia And Animation Program No.8: Program Demonstrate Text Shadows using HTML Canvas.
SNJPSNMS Trust’s Degree College Nidasoshi Page 41 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 42 Multimedia And Animation Program No.9: Program to Demonstrate Source-over, Source-in, Source-outProperties for composition using HTML Canvas.



SNJPSNMS Trust’s Degree College Nidasoshi Page 43 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 44 Multimedia And Animation Program No.10: Program to create rectangle and animate increase and decrease the size of rectangle. SNJPSNMS Trust’s Degree College Nidasoshi Page 46 Multimedia And Animation OUTPUT: SNJPSNMS Trust’s Degree College Nidasoshi Page 47