0% found this document useful (0 votes)

2K views157 pages

Multimedia &AnimationS NEP Notes

Uploaded by

pavanpavan9938

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

2K views157 pages

Multimedia &AnimationS NEP Notes

Uploaded by

pavanpavan9938

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 157

DEPT OF COMPUTER SCIENCE MULTIMEDIA &ANIMATIONS

Multimedia and Animation

History of HTML

HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially
released. It was published in 1995 as HTML 2.0. HTML 4.01 was published in
late 1999 and was a major version of HTML.

HTML is a very evolving markup language and has evolved with various versions
updating. Long before its revised standards and specifications are carried in, each
version has allowed its user to create web pages in a much easier and prettier way
and make sites very efficient.

• HTML 1.0 was released in 1993 with the intention of sharing information
that can be readable and accessible via web browsers. But not many of the
developers were involved in creating websites. So the language was also
not growing.
• Then comes HTML 2.0, published in 1995, which contains all the features
of HTML 1.0 along with a few additional features, which remained the
standard markup language for designing and creating websites until January
1997 and refined various core features of HTML.
• Then comes HTML 3.0, where Dave Raggett introduced a fresh paper or
draft on HTML. It included improved new features of HTML, giving more
powerful characteristics for webmasters in designing web pages. But these
powerful features of the new HTML slowed down the browser in applying
further improvements.
• Then comes HTML 4.01, which is widely used and was a successful version
of HTML before HTML 5.0, which is currently released and used
worldwide. HTML 5 can be said for an extended version of HTML 4.01,
which was published in the year 2012.
What is html?
HTML (Hypertext Markup Language) is the only markup language for creating
web pages. It provides some titles, headings, paragraphs, lists, tables, embedded
images, etc., to describe the structure of text-based and multimedia information
in HTML documents.
NDRK FGC AAV
DEPT OF COMPUTER SCIENCE MULTIMEDIA &ANIMATIONS

Here is some key information to easily describe HTML:

• HTML (Hypertext Markup Language) is a language for publishing text-

based and multimedia information on the World Wide Web.
• HTML is a straightforward Computer Coding Language. It was developed
in the 90s. HTML is the basis of a web page, and the web page is the basis
of a website. HTML uses 'tags' to create web documents.
• HTML is a hypertext markup language, a predetermined set of markup tags
used to design web pages.
• HTML is the first language of web designing. CSS is also used along with
HTML to improve web page design further. JavaScript is used with HTML
to make web pages dynamic.
• HTML is relatively easy to learn because every tag is predefined, so only
we need to know the work of tags and their attributes.
• Web browsers (Chrome, Internet Explorer, Firefox, Safari, and other web
browsers) are software' to read HTML and display web page design as
output.
• You can write HTML in any simple editor, such as Notepad. And other
software, such as Adobe Dreamweaver, Sublime, NetBeans, Notepad ++,
etc., are mainly used for writing and editing HTML.
• ".html" or ".htm" are the two extensions used to write and save HTML files;
we can write HTML code in any text editor and save it as "filename.html"
or "filename.htm".

A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
NDRK FGC AAV
DEPT OF COMPUTER SCIENCE MULTIMEDIA &ANIMATIONS

<p>My first paragraph.</p>

</body>
</html>

Example Explained
• The <!DOCTYPE html> declaration defines that this document is an HTML5
document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content End tag

NDRK FGC AAV

DEPT OF COMPUTER SCIENCE MULTIMEDIA &ANIMATIONS

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents
and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the
document:

NDRK FGC AAV

DEPT OF COMPUTER SCIENCE MULTIMEDIA &ANIMATIONS

HTML Page Structure

Above is a visualization of an HTML page structure:

Basic Images Markups In HTML

The HTML <img> tag is used to embed an image in a web page. Images
are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
Example 1
<img src="pic_trulli.jpg" alt="Italian Trulli">
NDRK FGC AAV
DEPT OF COMPUTER SCIENCE MULTIMEDIA &ANIMATIONS

Example 2
<img src="img_girl.jpg" alt="Girl in a jacket">

Example 3
<img src="img_chania.jpg" alt="Flowers in Chania">

LISTS
• In HTML, there are three types of lists:
1) Ordered lists,
2) Unordered lists and
3) Definition lists

Ordered Lists
• An ordered list is a numbered list where each item is numbered sequentially.
• You can create an ordered list using the <ol> tag.
• Each item within the list should be wrapped in <li> tags.
• Example:

Unordered Lists
• An unordered list is a list of items with a bullet point next to each one.
• You can create an unordered list using the <ul> tag.
• Each item within the list should be wrapped in <li> tags.
• Example:

Definition Lists
• A definition list is a list of terms and their corresponding definitions.
• You can create a definition list using the <dl> tag.
• Each term should be wrapped in a <dt> tag.
NDRK FGC AAV
DEPT OF COMPUTER SCIENCE MULTIMEDIA &ANIMATIONS

• Each definition should be wrapped in a <dd> tag.

• Example:

TABLES
• <table> tag is used to create a table in a web-page.
• It allows you to display data in a tabular format, with rows and columns.
• Syntax:

Where
<table>: defines the table.

<tr>: defines each row in the table.

<th>: defines a header-cell in the table.
<td>: defines each cell in the row.

NDRK FGC AAV

DEPT OF COMPUTER SCIENCE MULTIMEDIA &ANIMATIONS

• The <table> element can also have several optional attributes, such as: border: specifies
the width of the border around the table cellspacing: specifies the space between
cells
cellpadding: specifies the space between cell borders and their content
width: specifies the width of the table
height: specifies the height of the table

Program to illustrate usage of Table with optional attributes

1.2 Forms
• Forms are used to collect input from users on a web-page.
• <form> is the main form-element, which wraps around all the form fields.
• Syntax:

Where
action: specifies the URL to which the form-data will be submitted.
method: specifies the HTTP method to be used when submitting the form-data.
This can be either "GET" or "POST"

NDRK FGC AAV

COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
• Some
utercommon
Applications
form-elements are:
<input type="text">: This creates a single-line text input-field.

<input type="email">: This creates an email input-field.

<input type="password">: This creates a password input-field that hides the text entered.

<input type="checkbox">: This creates a checkbox that can be checked or unchecked.

<input type="radio">: This creates a set of radio buttons where only one can be selected at a time.

<select>: This creates a dropdown menu for selecting from a list of options.
<textarea>: This creates a multi-line text input-field.

Program to illustrate usage of form

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

The uter
<img>Applications
tag has two required attributes:

• src - Specifies the path to the image

• alt - Specifies an alternate text for the image
•

Syntax
<img src="url" alt="alternatetext">

The src Attribute

The required src attribute specifies the path (URL) to the image.
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some
reason cannot view it (because of slow connection, an error in the src attribute, or if
the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
HTML <frame> tag (Not supported in HTML5)
HTML <frame> tag define the particular area within an HTML file where another HTML web
page can be displayed.

A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames,
and each frame can contain different web pages.

Note: Do not use HTML <frame> tag as it is not supported in HTML5, instead you can use <iframe> or <div>
with CSS to achieve similar effects in HTML.

Syntax

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
utersrc
< frame Applications
= "URL" >

Following are some specifications about the HTML <frame> tag

Display Block

Start tag/End tag Start tag(required), End tag(forbidden)

Usage Frames

Example 1
Create Vertical frames:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Output:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

Frame1.html

<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #7fffd4;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>

Frame2.html

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
<!DOCTYPE html>
<html>
<head>
<style>
div{

background-color: #2f4f4f;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>
</html>
Frame3.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #c1ffc1;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Third frame</h2>
</div>
</body>
</html>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
Example 2:Create Horizontal frames:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="frame1.html" >
<frame name="main" src="frame2.html">
<frame name="bottom" src="frame3.html">

</frameset>
</html>

Output:

HTML <frameset> tag is used to contain the group of frames which can be controlled and styled
as a unit. The <frameset> element also specifies the number of rows and columns in the frameset,
and how much space they will occupy in a frame.

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
Note: uter
Do Applications
not use HTML <frameset> element as it is deprecated and not supported by HTML5, but you can use
<iframe> tag instead.

Syntax
<frameset cols=" ">............</frameset>

Following are some specifications about the HTML <frameset> tag

Display Block

Start tag/End tag Both Start and End Tag

Usage Frames

Attribute
Tag-specific attribute

Attribute Value Description

cols Pixels It specifies the number and size of column spaces in the frameset. (Not
% Supported in HTML5)
*

rows Pixels It specifies the number and size of the rows spaces in the frameset. (Not
% Supported in HTML5)
*

Features opf HTML5:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

• uter Applications
Video and
Audio Features
• Header and Footer
• Input tag kinds have been expanded.
• Figure and figcaption
• Placeholders
• Preload Videos
• Controlling the display
• Regular Expressions
• Adaptability
• Elements that appear inline
• Support for Dynamic Pages
• Email as a property
• Cryptographic Nonces
• Reverse Links
• Images with a width of zero
• Canvas in HTML5

CSS (CASCADING STYLE SHEET)

INTRODUCTION
• CSS stands for Cascading Style-sheets.
• CSS is used to describe the visual presentation of HTML.
• CSS is used to define the layout, colors, fonts, and other visual aspects of a web-page.

ADVANTAGES OF CSS
1) Separation of Content and Presentation
• CSS allows for the separation of the content and presentation of a web-page.
• This makes it easier to maintain and update the website.

Consistency
• CSS enables the consistent application of styles across multiple web-pages.
• This helps in creating a unified and professional look for the entire website.

Easy to Learn
• CSS has a relatively simple syntax.
• CSS is easy to learn for beginners.
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
Flexibility
• CSS provides flexibility in designing web-pages.
• With CSS, developers can
create complex layouts
adjust the size and position of elements and
apply various effects and animations.

Efficiency
• CSS reduces page load-time by separating the presentation from the content.
• This makes web-pages load faster.
• This improves the overall performance of the website.

Responsive Design
• CSS allows for the creation of responsive webpages.
• The webpages can adapt to different screen-sizes & devices.
• This ensures that the website is accessible and user-friendly across all devices.

HTML vs CSS
HTM CSS
L
Stands for HyperText Markup Language Stands for Cascading Style-sheets
Used for creating the structure and content of a Used for controlling the presentation and layout of
web-page the content
Uses tags to define elements such as headings, Uses selectors to target HTML-elements and apply
paragraphs, images, links, etc. styles
Provides a way to add text, images, and other Provides a way to add styles such as color, font,
media to a web-page spacing, and layout to a web-page
Supports attributes that provide additional Supports various types of selectors, including
information about HTML-elements, such as the element, class, and ID-selectors
source of an image or the target of a link
Allows for the creation of responsive web-pages Allows for the creation of complex layouts and
using media queries and other techniques animations using advanced CSS techniques
Can be used in conjunction with other technologies Can be used in conjunction with preprocessors like
such as JavaScript to create dynamic web- Sass or LESS to create more efficient and organized
applications style-sheets

What is CSS?
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
• uter
CSSApplications
stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

• Why Use CSS?

• CSS is used to define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.
CSS Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {

color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}

</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS Syntax
A CSS rule consists of a selector and a declaration block.

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
CSS Syntax

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Example
In this example all <p> elements will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
Example Explained

• p is a selector in CSS (it points to the HTML element you want to style: <p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property value

CSS Selectors
A CSS selector selects the HTML element(s) you want to style.

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)

• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

This page will explain the most basic CSS selectors.

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

<head>uter Applications
<style>
p{
text-align: center;
color: red;
}
</style>
</head>

<body>

<p>Every paragraph will be affected by the style.</p>

</body>
</html>

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example
The CSS rule below will be applied to the HTML element with id="para1":

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class="center" will be red and center-aligned:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

Example
In this example only <p> elements with class="center" will be red and center-aligned:

<!DOCTYPE html>
<html>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

<head>uter Applications
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>

HTML elements can also refer to more than one class.

Example
In this example the <p> element will be styled according to class="center" and to class="large":

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications large">This paragraph will be red, center-aligned, and in a large font-size.</p>
<p class="center

</body>
</html>

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:

<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

</body>
</html>

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
h1 { uter Applications
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
</body>
</html>

Example
In this example we have grouped the selectors from the code above:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

All CSS Simple Selectors

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

Selector Example Example description

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements

element,element,.. div, p Selects all <div> elements and all <p> elements

Levels of style sheets:

Cascading Style Sheet (CSS) is used to set the style in web pages that
contain HTML elements. It sets the background color, font-size, font-
family, color, … etc. properties of elements on a web page.

There are three types of CSS which are given below:

• Inline CSS
• Internal or Embedded CSS
• External CSS
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to
red:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Output:

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.

The following example sets the text color of ALL the <h1> elements (on
that page) to blue, and the text color of ALL the <p> elements to red. In
addition, the page will be displayed with a "powderblue" background color
<html>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Output:

External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each
HTML page.
Output:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will
learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;

}
p {
color: red;
font-family: courier;
font-size: 160%;
}
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Output:

CSS Border
The CSS border property defines a border around an HTML element.

<html>
<head>
<style>
p{
border: 2px solid powderblue;
}
</style>
</head>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

CSS Padding
The CSS padding property defines a padding (space) between the text and
the border.
<html>
<head>
<style>
p{
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Output:

CSS Margin
The CSS margin property defines a margin (space) outside the border.
<html>
<head>
<style>
p{
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

</body>
</html>
Output:

CSS Lists:
Unordered Lists:
o Coffee
o Tea
o Coca Cola

▪ Coffee
▪ Tea
▪ Coca Cola

Ordered Lists:
1. Coffee
2. Tea
3. Coca Cola

I. Coffee
II. Tea
III. Coca Cola
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:

• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

• Set different list item markers for ordered lists

• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
</style>
</head>
<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

</ol>uter Applications

</body>
</html>
Output:

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect
the individual list items:

ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

ol li uter
{ Applications
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
Output:

CSS color Property

Definition and Usage
The color property specifies the color of text.

CSS Syntax
color: color|initial|inherit;
<html>
<head>
<style>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

bodyuter{Applications
color: red;
}

h1 {
color: #00ff00;
}

p.ex {
color: rgb(0,0,255);
}
</style>
</head>
<body>

<h1>This is heading 1</h1>

<p>This is an ordinary paragraph. Notice that this text is red. The default
text-color for a page is defined in the body selector.</p>

<p class="ex">This is a paragraph with class="ex". This text is blue.</p>

</body>
</html>
Output:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
CSS Text Alignment
Text Alignment
The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

<html>
<head>
<style>
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
</html>
Output:

Text Align Last

The text-align-last property specifies how to align the last line of a text.
<html>
<head>
<style>
p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}
</style>
</head>
<body>

<h1>The text-align-last Property</h1>

<h2>text-align-last: right:</h2>

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

</body>
</html>
Output:

Text Direction
The direction and unicode-bidi properties can be used to change the text
direction of an element:
<html>
<head>
<style>
p.ex1 {
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>

<p class="ex1">This is right-to-left text direction.</p>

</body>
</html>
Output:

Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}
</style>
</head>
<body>

<h1>The vertical-align Property</h1>

<h2>vertical-align: baseline (default):</h2>

<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image
with a default alignment.</p>

<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image
with a text-top alignment.</p>

<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image
with a text-bottom alignment.</p>
Output:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

HTML <span> Tag

Definition and Usage
The <span> tag is an inline container used to mark up a part of a text, or a
part of a document.

The <span> tag is easily styled by CSS or manipulated with JavaScript

using the class or id attribute.

The <span> tag is much like the <div> element, but <div> is a block-level
element and <span> is an inline element.
<html>
<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-

weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green</span>
eyes.</p>

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
</body>
</html>
Output:

HTML <div> Tag

Definition and Usage
The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

<h1>The div element</h1>

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

<p>This is some text outside the div element.</p>

</body>
</html>
Output:

Object orientation and java script:

Object-oriented (OO) languages usually are recognized through
their use of classes for creating various objects which have similar
properties and methods.
The simplest way to create a custom object is to create a new
instance of the object and add properties and methods to it, as in
the example mentioned below
var person = new Object();
person.name = "Karlos";
person.age = 23;
person.job = "Network Engineer";
person.say_Name = function() {
alert(this.name);
};
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

Program explained:
This example creates an object called the person that has three
properties which are: name, age, and job, and one method
(say_Name()). The say_Name() method displays the value of
this.name, which resolves to person.name.
The previous example can be rewritten using literal object notation
as follows:

var person = {
name: "Karlos",
age: 23,
job: "Network Engineer",
say_Name: function() {
alert(this.name);
}
};

The person object in the above example is equivalent to the object in the
previous example, with all those same properties and methods added.
These properties are all created with specific characteristics that define
their behavior in JavaScript.

JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are
constructed:

// How to create variables:

var x;
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

let y;uter Applications

// How to use variables:

x = 5;
y = 6;
let z = x + y;
JavaScript Values
The JavaScript syntax defines two types of values:

Fixed values
Variable values
Fixed values are called Literals.

Variable values are called Variables.

JavaScript Literals
The two most important syntax rules for fixed values are:

1.Numbers are written with or without decimals:

<h2>JavaScript Numbers</h2>

<p>Number can be written with or without decimals.</p>

</body>
</html>
Output:

2. Strings are text, written within double or single quotes:

<h2>JavaScript Strings</h2>

<p>Strings can be written with double or single quotes.</p>

</body>
</html>
Output:

JavaScript Variables
In a programming language, variables are used to store data values.
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

JavaScript uses the keywords var, let and const to declare variables.

An equal sign is used to assign values to variables.

In this example, x is defined as a variable. Then, x is assigned (given) the

value 6:
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.

Then, x is assigned the value of 6:</p>

</body>
</html>
Output:

JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values: <html>
<body>
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

<h2>JavaScript Operators</h2>

<p>JavaScript uses arithmetic operators to compute values (just like

algebra).</p>

</body>
</html>
Output:

JavaScript Expressions
An expression is a combination of values, variables, and operators, which
computes to a value.

The computation is called an evaluation.

For example, 5 * 10 evaluates to 50:

5 * 10
Output:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.

The let keyword tells the browser to create variables:

<h2>The <b>let</b> Keyword Creates Variables</h2>

</body>
</html>
****************
The var keyword also tells the browser to create variables:
<html>
<body>

<h2>The var Keyword Creates Variables</h2>

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

<p uter Applications

id="demo"></p>

</body>
</html>

JavaScript Operators:
JavaScript Operators
Operators are used to assign values, compare values, perform
arithmetic operations, and more.

There are different types of JavaScript operators:

Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
Conditional Operators
Type Operators
JavaScript Arithmetic Operators

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
Arithmetic operators are used to perform arithmetic between
variables and/or values.
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The + Operator</h2>

<p>y = 5, calculate x = y + 2:</p>

</body>
</html>
Output:

JavaScript Assignment Operators

Assignment operators are used to assign values to JavaScript variables

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

JavaScript Assignment Operators

Assignment operators are used to assign values to JavaScript
variables
<html>
<body>

<h1>JavaScript Assignment</h1>
<h2>Simple Assignment</h2>
<h2>The = Operator</h2>

<p>x = 10, y = 5, calculate x = y:</p>

</body>
</html>
Output:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

JavaScript String Operators

The + operator, and the += operator can also be used to concatenate
(add) strings.

Given that t1 = "Good ", t2 = "Morning", and t3 = "",

<h1>JavaScript Operators</h1>
<h2>The + Operator</h2>

<p>The + operator concatenates (adds) strings:</p>

</body>
</html>
Output:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

Logical Operators
Logical operators are used to determine the logic between variables
or values.
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The && Operator (Logical AND)</h2>

<p>The && operator returns true if both expressions are true, otherwise
false:</p>

document.getElementById("demo").innerHTML =
(x < 10 && y > 1) + "<br>" +
(x < 10 && y < 1);
</script>

</body>
</html>
Output:
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

Primitives in JavaScript:
JavaScript has seven types. Types are values that JavaScript can have. Below is a list of data types
that JavaScript can have:

1. Number
2. String
3. Boolean
4. Undefined
5. Null
6. Object
7. Symbol

Primitive Data Types

Primitive data types are number, string, boolean, NULL, Infinity and symbol. Non-primitive
data types is the object.

Numbers:

A number data type can be an integer, a floating point value, an exponential value, a ‘NaN’ or a
‘Infinity’.

var a=250; // integer value

var b=25.5; // a number containing a decimal

var c = 10e4 // an exponential value which evaluates to 10*10000;

String:

The string data type in JavaScript can be any group of characters enclosed by a single or double-
quotes or by backticks.

var str1 = “This is a string1”; // This is a string primitive type or string literal

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

var str2= ‘This is a string2’;

uter Applications

var str3 = `This is a string3`;

Boolean:

The boolean data type has only two values, true and false. It is mostly used to check a logical
condition. Thus Booleans are logical data types which can be used for comparison of two variables
or to check a condition.
var a =5;
var a =5;

var b=6;

a==b // returns false

unit-II
Introduction to Animations:

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS

the uter
end state. To better explain what is going on, let’s come up with
Applications

an easy-to-understand example as well.

Let’s say our start state looks like Figure 1-3.

Figure 1-3. In the beginning, there was a small blue circle

You start off with a small blue circle located to the left of the
screen. At the end state,
.

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

The circle moves right and grows larger

.
Interpolation
In order to make an animation out of what we have, we need a
smooth transition that creates all the intermediate states. The
process of creating these intermediate states is known
as interpolation.
This interpolation, which occurs over a period of time that we
specify

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

interpolation

Animations on the Web

CSS animations (i.e keyframe animations)
CSS animations are like traditional animations on some sort of
performance-enhancing substance that makes them more awesome.
With these kinds of animations, you can define not only the
beginning and the end state but also any intermediate states,
lovingly known as keyframes

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

Figure 1-6. How an animation made up of keyframes might

look

These intermediate states, if you choose to use them, give you

greater control over
the thing you are animating. blue circle isn’t simply sliding to the
right and getting larger. The individual keyframes adjust the
circle’s size and vertical position in ways that you wouldn’t see if
we simply interpolated between the start and end states.
CSS transitions
Transitions make up a class of animations where you only define
the start state, end state, and duration. The rest, such as

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
interpolating between the two states, is take care of automatically

Transitions only need a start and end state to do their thing

Scripted/JavaScript animations
If you want full control over what your animation does right down
to how it interpolates between states,

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

When we use JavaScript, you have a lot of freedom in defining

how your animation works

CSS Animations
• CSS Animations are a way to add visual effects to web pages.
AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
• With CSS animations, you can animate the position, size and
color of HTML elements.
• With CSS animations, you can specify
1) Duration of an animation
2) Speed of an animation
3) Number of iterations of an animation
4) Direction of an animation

Creating a Simple Animation

• Steps to create CSS Animation:
5) Define a keyframes with starting state and ending state of
the element
6) Apply the animation properties to an element

CSS Animation Properties

Property Description
@keyframes Defines
element.the animation behavior for an
animation-name Specifies
animationthe name
to be of the keyframe
applied.
animation-
duration Specifies theone
to complete duration
cycle.of an animation
animation-timing-
function Specifies
animation.the speed curve of the
animation-delay Specifies
starts. a delay before the animation
animation-
iteration-count Specifies
animationthe number
should of times the
be repeated.
animation- Specifies whether the animation should
direction play forwards,
backwards, or alternate back and forth.

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications
animation-fill- Specifies what styles are applied to the
mode element before and after
the animation.
animation-play-
state Specifies
running orwhether
paused.the animation is
animation A shorthand property used for setting
all the animation
properties (except the animation-play-
state and the animation- fill- mode
property).

AAV
COMPUTER SCIENCE Multimedia&Animations
SCIENCE&APPLICATIONS
uter Applications

AAV
Computer Applications Multimedia Animation

Animation Property - i) keyframes

• This is used to define the animation behavior for an element.
• This is used in combination with other animation-related

CSS properties such as animation- name, animation-

duration, animation-direction etc.
• CSS Syntax:
@keyframes animation-name {
from { /* element at the starting state
of the animation*/ } to { /* element
at the ending state of the animation*/
}
}
where animation-name is a user-defined name for the
animation
from keyword is used to define the starting state of the
element
to keyword is used to define the ending state of the
element
• keyframes can also be defined as a series of percentages (0%,
100%).
• CSS Syntax:
@keyframes animation-name {
0% { /* element at the starting state of the animation*/ }

AAV
Computer Applications Multimedia Animation

100% { /* element at the ending state of the animation*/

}}
where animation-name is a user-defined name for the
animation
0% keyword is used to define the starting state of the
element
100% keyword is used to define the ending state of the
element
• For example 1a:
@keyframes
changecolor {
from
{background:
red;}
to {background: green; }
}
Explanation of above code:
• changecolor is a user-defined name for the animation.
• from keyword is used to specify the starting state of the

animation where the background color of the element is set

to red.
• to keyword is used to specify the ending state of the

animation where the background color of the element is set

to green.
• For example 1b:
AAV
Computer Applications Multimedia Animation

@keyframes
changecolor {
0%
{background:
red;}
100% {background: green; }
}
Explanation of above code:
• changecolor is a user-defined name for the animation.
• 0% specifies the starting state of the animation where the

background color of the element is set to red.

• 100% specifies the ending state of the animation where the

background color of the element is set to green.

• For example 2:
@keyframes movebox {
from {left:0px;
top: 0px} to
{left:600px
:top: 0px}
}
Explanation of above code:
• movebox is a user-defined name for the animation.
• The from keyword is used to specify the starting state of

the animation where the element is positioned at left:0px

and top: 0px.
AAV
Computer Applications Multimedia Animation

• The to keyword is used to specify the ending state of the

animation where the element is positioned at left:600px
and top: 0px.
• This means that the element will move horizontally to the

right by 600 pixels over the course of the animation.

Animation Property –
ii) animation-name
• This specifies the name of the keyframe animation to be applied
to the element.
• This is used in combination with other animation-related

CSS properties such as animation- duration, animation-

delay, and animation-direction.
• CSS Syntax:
animation-name: name;
where name is the name of the animation defined using
the @keyframes rule.

Animation Property - iii) animation-duration

• This specifies the duration of an animation to complete one
cycle.
• CSS Syntax:
animation-duration: time;
where time is the duration of the animation.
time can be specified in seconds or milliseconds.
Default value is 0, which means that no animation will
AAV
Computer Applications Multimedia Animation

occur

• Program to change background color of an element

from red to green using animation- name and
animation-duration properties.
<html>
<head>
<style>
@keyframes changecolor {
from {background-color:red;} to
{background-color:green;}
}
div {
width: 100px;
height: 100px;
background: red;
animation-name: changecolor;
animation-duration: 5s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

AAV
Computer Applications Multimedia Animation

Explanation of the Program

• @keyframes declares a new animation named changecolor.
• from: defines the starting state of the box. So, the background
color of the box is set to red.
• to: defines the ending state of the box. So, the background color
of the box is set to green.
• width and height set the dimensions of the box to 100 pixels.
• background sets the color of the box to red.
• animation-name specifies the name of the animation

applied to the box. So, the name of the animation is

"changecolor".
• animation-duration sets the duration of the animation to 5
seconds.

AAV
[Type here] [Type here] [Type here]

SESSION 3

3.1 Animation Property - iv) animation-timing-function

• This specifies the speed of animation.
• CSS Syntax:
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-
out
Value Description
linear Theend animation has the same speed from start to
ease Default value. The animation has a slow start, then
fast, before it ends slowly
ease-in The animation has a slow start
ease-out The animation has a slow end
ease-in- The animation has both a slow start and a slow
out end

3.2 Animation Property - v) animation-delay

• This specifies a delay before the animation starts.
• CSS Syntax:
animation-delay: time;
where time is the time delay before the animation starts.
time can be specified in seconds (s) or milliseconds
(ms).

• Program to move a box from left to right using

animation-timing-function and animation- delay
properties
[Type here] [Type here] [Type here]

<html>
<head>
<style>
@keyframes movebox {
from {left: 0px; top:0px }
to {left: 600px; top:0px} }
div { width: 100px;
height:
100px;
background:
red; position:
relative;
animation-name: movebox;
animation-duration: 10s;
animation-timing-function :
linear; animation-delay: 5s; }
</style>
</head>
<body>
<div></div>
</body>
</html>
[Type here] [Type here] [Type here]

Explanation of the Program

• @keyframes declares a new animation named movebox.
• from: defines the starting position of the box. So, the box
will start at the top-left corner.
• to: defines the ending position of the box. So, the box
will move 600 pixels to the right from its initial position.
• width and height set the dimensions of the box to 100
pixels.
• background sets the color of the box to red.
• position sets the position property of the box to "relative".
• animation-name specifies the name of the animation
applied to the box. So, the name of the animation is
"movebox".
• animation-duration sets the duration of the animation to
10 seconds.
• animation-timing-function sets the timing function for
the animation to linear. So, the movement of the box will
be constant.
• animation-delay sets the delay of the animation to 5
second. So, the animation will start 5 seconds after the
page is loaded
Computer Applications Multimedia Animation

Animation Property - vi) animation-iteration-count

• This specifies the number of times the animation should be
repeated.
• CSS Syntax
animation-iteration-count: number | infinite;

4.1 Animation Property - vii) animation-direction

• This specifies the direction of an animation.
• CSS Syntax:

animation-direction: normal | reverse | alternate |

alternate-reverse;

1|P a g e
Computer Applications Multimedia Animation

Explanation of the Program

• @keyframes declares a new animation named rotatebox.
• 0%: The element is at its starting position of top: 0px and
left: 0px.
•25%: The element moves to the right by 100px, while
staying at the same vertical position (top: 0px).
• 50%: The element moves down by 100px, while still
being 100px to the right (top: 100px, left: 100px).
• 75%: The element moves to the left by 100px, while
staying at the same vertical position (top: 100px).
• 100%: The element returns to its starting position of top:
0px and left: 0px.
• width and height set the dimensions of the box to 100
pixels.
• background sets the color of the box to red.
• position sets the position property of the box to "relative".
• animation-name specifies the name of the animation
applied to the box. So, the name of the animation is
"rotatebox".
• animation-duration sets the duration of the animation to 8
seconds.
• animation-iteration-count sets the iteration count to
infinite. So, the box will rotate indefinitely.
• animation-direction sets the direction of the
animation to reverse. So, the box will rotate in anti-
1|P a g e
Computer Applications Multimedia Animation

clockwise direction.

Animation Property - viii) animation-fill-mode

• This specifies what styles are applied to the element before
and after the animation.
• CSS Syntax
animation-fill-mode: none | forwards | backwards ;

5.1 Animation Property - ix) animation-play-state

• This specifies whether the animation is running or paused.
• CSS Syntax
animation-play-state: running | paused;

Program to move a box from left to right and right to left

using animation-fill-mode and animation-play-state
properties
2|P a g e
Computer Applications Multimedia Animation

<style>

@keyframes movebox { from { top: 0px; left:0px }

div { width: 100px;

height: 100px;

animation-name: movebox;
animation-duration: 5s; animation-
iteration-count : 3;

</style>
</head>
<body>
<div></div></body>

3|P a g e
Computer Applications Multimedia Animation

Explanation of the Program

• @keyframes declares a new animation named movebox.
• from: defines the starting position of the box. So, the box will
start at the top-left corner.
• to: defines the ending position of the box. So, the box will
move 100 pixels to the right from its initial position.
• width and height set the dimensions of the box to 100 pixels.
• background sets the color of the box to red.
• position sets the position property of the box to "relative".
• animation-name specifies the name of the animation
applied to the box. So, the name of the animation is "movebox".
• animation-duration sets the duration of the animation to 5
seconds.
• animation-iteration-count sets the iteration count to 3. So, the
box will move 3 times.
•animation-direction sets the direction of the animation to
alternate. So, the box will move from left to right and then
from right to left.
• animation-fill-mode sets the fill mode of the animation to
forwards. So, the final animation state will be maintained even
after the animation has completed.
• animation-play-state sets the play state of the animation to
running. So, the animation will start as soon as the page is
loaded.

4|P a g e
Computer Applications Multimedia Animation

Longhand and Shorthand Properties

• In CSS, there are two types of properties: longhand and
shorthand properties.
1) In Longhand properties, individual CSS properties can be set
separately.
2) In Shorthand properties, multiple CSS properties can be set
with a single line of code.

6.1 Animation Property - ix) Animation

• The animation is a shorthand property for:
i) animation-name
ii) animation-duration
iii) animation-timing-function
iv) animation-delay
v) animation-iteration-count
vi) animation-direction
• CSS Syntax:
animation: [name] [duration] [timing-function] [delay]
[iteration-count] [direction]; where name specifies the
name of the animation you want to use.
duration specifies the length of time it takes for the
animation to complete one cycle
timing-function specifies the speed curve of the animation.
delay specifies the delay before the animation starts

1|P a g e
Computer Applications Multimedia Animation

iteration-count specifies the number of times the

animation should be played.
direction specifies the direction of the animation
• For example:
CSS Longhand Equivalent CSS Shorthand
animation-name: animation: changecolor 5s linear
changecolor 1s infinite normal
animation-duration:
5s animation-timing-
function: linear
animation-delay: 1s
animation-iteration-
count: infinite
animation-direction:
normal

• Program to change background color of a box using

shorthand property.

@keyframes changecolor {
from {background: red;
to

div {

2|P a g e
Computer Applications Multimedia Animation

background: red; position:

relative;
animation: changecolor 5s linear 1s infinite normal
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Explanation of the Program

• <html>: This tag denotes the beginning of an HTML document.
• <head>: This tag is used to contain meta-data about the

document, such as the title of the page, links to external

stylesheets, and scripts.
• <style>: This tag is used to define CSS styles that will be

applied to the elements in the HTML document.

• div : This selector targets all div elements and applies the
following styles to them:
width and height set the dimensions of
the box to 100 pixels. background
sets the color of the box to red.
position sets the position property of
the box to "relative". Animation
named "changecolor" is applied to
the box.
The Animation lasts for 5 seconds.
The Animation has a linear
timing function. The
3|P a g e
Computer Applications Multimedia Animation

Animation starts after 1

second.
The Animation repeats infinitely.
The Animation runs in normal direction.

6.2 Declaring Multiple Animations

• In CSS, you can apply multiple animations to a single element
using the animation property.
• For example:
Equivalent CSS Shorthand
CSS
Longhand
animation- animation: changecolor 5s linear 1s infinite
name: normal, movecolor 5s linear 1s infinite normal
changecolor
animation-
duration: 5s
animation-
timing-function:
linear animation-
delay: 1s
animation-
iteration-count:
infinite
animation-
direction: normal
4|P a g e
Computer Applications Multimedia Animation

animation-
name: movebox
animation-
duration: 5s
animation-
timing-function:
linear animation-
delay: 1s
animation-
iteration-count:
infinite
animation-
direction: normal

5|P a g e
Computer Applications Multimedia Animation

• Program to change background color of a box and

move the box from left to right using shorthand property.

@keyframes changecolor {

@keyframes movebox {
from {left: 0px; top:0px

div { width: 100px;

height: 100px;

</style>

</head>
Explanation of the Program
• <html>: This tag denotes the beginning of an HTML document.
• <head>: This tag is used to contain meta-data about the

document, such as the title of the page, links to external

stylesheets, and scripts.
• <style>: This tag is used to define CSS styles that will be

applied to the elements in the HTML document.

• div : This selector targets all div elements and applies the
following styles to them:

6|P a g e
Computer Applications Multimedia Animation

width and height set the dimensions of

the box to 100 pixels. background
sets the color of the box to red.
position sets the position property of the box to "relative".

Explanation of Animation -1 (changecolor)

• This animation changes the box color from red to green and
green to red infinitely.
• Animation named "changecolor" is applied to the box.
• The Animation lasts for 5 seconds.
• The Animation has a linear timing function.
• The Animation starts after 1 second.
• The Animation repeats infinitely.
• The Animation runs in normal direction.

7|P a g e
MULTIMEDIA & ANIMATIONS

Explanation of Animation -2 (movebox)

• This animation moves the box from left to right and right to left
infinitely.
• Animation named "movebox" is applied to the box.
• The Animation lasts for 5 seconds.
• The Animation has a linear timing function.
• The Animation starts after 1 second.
• The Animation repeats infinitely.
• The Animation runs in normal direction.

CSS Transitions
• CSS transitions are a way to make web page elements
change smoothly from one style to another
• A transition effect could typically occur when a user hover over
an element.
• With CSS transitions, you can specify
1) Duration of transition
2) Speed of transition
3) CSS property for transition

7.2 Adding a Transition

• Steps to create CSS Transitions:
1) Define starting state of the element
2) Define ending state of the element and
3) Select the properties of the element

AAV
MULTIMEDIA & ANIMATIONS

CSS Transition Properties

Transition Property - i) CSS transition-property

• This specifies which property of an element

should have the transition effect. For

example: background, width or height.
• A transition effect could typically occur when a user hover over
an element.
• CSS Syntax:
transition-property: property;
where property is the property to which the transition
effect should be applied.

Transition Property - ii) CSS transition-duration

• This specifies the duration of a transition effect.
• CSS Syntax:
transition-duration: time;
where time is the duration of the transition effect
time can be specified in seconds or milliseconds.
Default value is 0, which means that no transition will
occur.
AAV
MULTIMEDIA & ANIMATIONS

Program to change background color of a box from red to

yellow when it is being hovered over.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:100px; height:
100px;
background:red;
}
div:hover {
background:yellow;
}
div {
transition-property:background;
transition-duration:1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Explanation of the Program

• <html>: This tag denotes the beginning of an HTML document.
• <head>: This tag is used to contain meta-data about the

document, such as the title of the page, links to external

stylesheets, and scripts.
• <style>: This tag is used to define CSS styles that will be

applied to the elements in the HTML document.

• div : This selector targets all div elements and applies the
following styles to them:
width:100px;: Sets the width of the div element to 100
pixels.

AAV
MULTIMEDIA & ANIMATIONS

height: 100px;: Sets the height of the div element to 100

pixels.
background:red;: Sets the background color of the div
element to red.
div:hover : This selector targets all div elements when
•

they are being hovered over by the cursor, and applies the
following styles to them:
background:yellow;: Sets the background color of the div
element to yellow.
• div : This selector targets all div elements and applies the
following styles to them:
transition-property:background;: This property specifies
which CSS properties should be transitioned when
changes occur. In this case, it's the background
property. transition-duration:1s;: This property
specifies the duration of the transition in seconds. In this
case, it's 1 second.

AAV
Computer Applications Multimedia Animation

SESSION 8

8.1 Transition Property - iii) transition-timing-function

•This specifies the speed of a transition effect.
• CSS Syntax:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-
out

8.2 Transition Property - iv) transition-delay

• This specifies a delay before the transition starts.
• CSS Syntax:
transition-delay: time
where time is the time delay before the transition starts.
time can be specified in seconds (s) or milliseconds (ms).

Program to change width of a box from 100 pixels to 200 pixels

when it is being hovered over.

5|P a g e
Computer Applications Multimedia Animation

<html>
<head>
<style>
div {
width:100px;
height: 100px;
background:blue;
}
div:hover {
width:200px;
}
div {
transition-property:width;
transition-duration:5s;
transition-timing-function: linear;
transition-delay: 1s;
}
</style>
</head>

Explanation of the Program

• <html>: This tag denotes the beginning of an HTML document.
• <head>: This tag is used to contain meta-data about the

document, such as the title of the page, links to external

stylesheets, and scripts.
• <style>: This tag is used to define CSS styles that will be

applied to the elements in the HTML document.

• div : This selector targets all div elements and applies the
following styles to them:
width:100px; Sets the width of the div element to 100
pixels.

6|P a g e
Computer Applications Multimedia Animation

height: 100px; Sets the height of the div element to 100

pixels.
background:blue; Sets the background color of the div
element to blue.
•div:hover : This selector targets all div elements when they
are being hovered over by the cursor, and applies the
following styles to them:
width:200px; Sets the width of the div element to 200
pixels.
• div : This selector targets all div elements and applies the
following styles to them:
transition-property:width; This property specifies which
CSS properties should be transitioned when changes
occur. In this case, it's the width property.
transition-duration:5s; This property specifies the duration
of the transition in seconds. In this case, it's 5 seconds.
transition-timing-function: linear; This property
specifies the timing function used for the transition. In this
case, it's set to linear, which means the transition will
occur at a constant speed.
transition-delay: 1s; This property specifies the delay
before the transition starts in seconds. In this case, it's set
to 1 second.

7|P a g e
Computer Applications Multimedia Animation

Longhand and Shorthand Properties

• In CSS, there are 2 types of properties: longhand and shorthand
properties.
1) In Longhand properties, individual CSS properties can be
set separately.
2) In Shorthand properties, multiple CSS properties can be set
with a single line of code.
• Shorthand properties can be useful for simplifying your code
and making it more concise.
CSS transition Property
• The transition is a shorthand property for:
i) transition-property
ii) transition-duration

iii) transition-timing-function and

iv) transition-delay
• CSS Syntax:
transition: [property] [duration]
[timing-function] [delay]; where property
specifies the CSS property that you want to
transition.
For example: background-color, width, height etc.
duration specifies the length of time it takes for the
transition to complete.
This can be expressed in seconds (s) or milliseconds
AAV
Computer Applications Multimedia Animation

(ms).
timing-function specifies the speed curve of the transition.
This can be one of the following values: linear, ease, ease-
in, ease-out, or ease-in-out
delay specifies the delay before the transition starts.
This can also be expressed in seconds or milliseconds.
• When using the shorthand notation for transitions, the

order of the properties must be: [property] [duration]

[timing-function] [delay].
• For example:
CSS Longhand Equivalent
Shorthand CSS
transition- transition: width
property:width; 5s linear 1s;
transition-
duration:5s;
transition-timing-
function: linear;
transition-delay: 1s;

AAV
Computer Applications Multimedia Animation

Program to change width of a box from 100 pixels to 200 pixels

when it is being hovered over using shorthand property.
<html>
<head>
<style>
div {
width:100px;
height: 100px;
background:blue;
}
div:hover {
width:200px;
}
div { transition: width 5s linear 1s; }
</style>
</head>
<body>
<div></div>
</body>
</html>

Explanation of the Program

• <html>: This tag denotes the beginning of an HTML document.
• <head>: This tag is used to contain meta-data about the

document, such as the title of the page, links to external

stylesheets, and scripts.
• <style>: This tag is used to define CSS styles that will be

applied to the elements in the HTML document.

background:blue;: Sets the background color of the div

element to blue.
•div:hover : This selector targets all div elements when
they are being hovered over by the cursor, and applies the
following styles to them:
width:200px;: Sets the width of the div element to 200
pixels.
• div : This selector targets all div elements and applies the
following styles to them:
transition: width 5s linear 1s;: This property specifies the
duration, timing function, and delay for the transition of
the width property. Specifically, it means that the
transition of the width property should take 5 seconds,
have a linear timing function, and begin 1 second after
the change is triggered.

AAV
Computer Applications Multimedia Animation

9.2 Working with Multiple Transitions

• In CSS, you can apply multiple transitions to a single element
using the transition property.
• When using multiple transitions, the order of the

properties in the transition property value matters.

• For example:
CSS Longhand Equivalent CSS Shorthand
transition- transition: width 5s linear 1s,
property:width; height 5s linear 1s;
transition-
duration:5s;
transition-timing-
function: linear;
transition-delay: 1s;

transition-
property: height;
transition-
duration: 5s;
transition-timing-
function: linear;
transition-delay: 1s;

Program to change both width & height of a box from 100

pixels to 200 pixels when it is being hovered over using
shorthand property.
AAV
Computer Applications Multimedia Animation

<html>
<head>
<style>
div {
width:100px; height:
100px;
background:blue;
}
div:hover { width:200px;
height: 200px;
}
div { transition: width 5s linear 1s,
transition: height 5s linear 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Explanation of the Program

• <html>: This tag denotes the beginning of an HTML document.
• <head>: This tag is used to contain meta-data about the

document, such as the title of the page, links to external

stylesheets, and scripts.
• <style>: This tag is used to define CSS styles that will be

applied to the elements in the HTML document.

AAV
Computer Applications Multimedia Animation

• div : This selector targets all div elements and applies the
following styles to them:
width:100px;: Sets the width of the div element to 100
pixels.
height: 100px;: Sets the height of the div element to 100
pixels.
background:blue;: Sets the background color of the div
element to blue.
•div:hover : This selector targets all div elements when
they are being hovered over by the cursor, and applies the
following styles to them:
width:200px;: Sets the width of the div element to 200
pixels
height:200px;: Sets the height of the div element to 200
pixels
• div : This selector targets all div elements and applies the
following styles to them:
transition: width 5s linear 1s, height 5s linear 1s;: This
property specifies the duration, timing function, and
delay for the transition of the width and height
properties. Specifically, it means that the transition of
the width and height properties should take
5 seconds, have a linear timing function, and begin 1
second after the change is triggered.
AAV
Computer Applications Multimedia Animation

HTML5 – SVG
• SVG stands for Scalable Vector Graphics.
• SVG is a vector-based image format.
• Mathematical equations are used to create SVG images.
• SVG images can be scaled up or down without losing quality.
• SVG images are commonly used in webpages to display logos,
icons, maps etc.

Viewing SVG Files

• There are 2 ways to view SVG files:
1) Web browsers: Most modern web browsers, such as

Google Chrome, Mozilla Firefox, Microsoft Edge, and

Safari, have built-in support for SVG files. Simply double-
click the SVG file or drag and drop it into the browser
window to view it.
2) SVG editors: There are many free and paid SVG editors

available that allow you to open, edit, and view SVG files.
Some popular options include Adobe Illustrator, Inkscape,
Sketch, and Figma.

Embedding SVG in HTML5

• The <svg> tag is used to create an SVG image in HTML.
• Syntax
<svg width="width"
1|P a g e
Computer Applications Multimedia Animation

height="height">
[SVG elements]
</svg>
Where width and height : specify the dimensions of
the SVG image
width and height: can be specified in pixels or %
SVG elements : can be <line>, <rect>, <circle> etc

• Program to create empty svg image with green background

Explanation of the Program

• <html>: is the opening tag of the HTML document, which
indicates that everything within the document is HTML
code.
• <body>: is the opening tag for the body of the HTML

document, which contains the content that is displayed on

the webpage.
• We use the <svg> tag to create an SVG graphic with a width and
height of 200 pixels.
• The style attribute sets the background color to green.

1|P a g e
Computer Applications Multimedia Animation

HTML5 − SVG Line

• This draws a straight line between two points in a SVG image.
• Syntax:
<line x1="[x1]“ y1="[y1]" x2="[x2]“
y2="[y2]" [attributes] /> Where,
x1: specifies the x-coordinate of the
starting point of the line y1: specifies
the y-coordinate of the starting point
of the line x2: specifies the x-
coordinate of the ending point of the
line y2: specifies the y-coordinate of
the ending point of the line
attributes specify other properties such as stroke-color,
stroke-width etc
• Here's an example:

1|P a g e
Computer Applications Multimedia Animation

<!DOCTYPE html>

<html>

<body>

<svg width="200" height="200">

<line x1="50" y1="50" x2="150" y2="150" stroke="blue" stroke-width="2"/>

Output:

Explanation of the Program

• We use the <svg> tag to create an SVG graphic with a width and
height of 200 pixels.
• We then use the <line> tag to create a line that starts at (x1, y1) =
(50, 50) and ends at (x2, y2)
= (150, 150).
• The stroke attribute is set to "blue", which gives the line a blue
color.
• The stroke-width attribute is set to 2, which sets the width of the
line to 2 pixels.

1|P a g e
Computer Applications Multimedia Animation

HTML5 − SVG Rectangle

• This draws a rectangle in a SVG image.
• Syntax:
<rect x="[x]“ y="[y]" width="[width]“
height="[height]" [attributes] /> Where,
x: specifies the x-coordinate of the upper-left
corner of the rectangle y: specifies the y-
coordinate of the upper-left corner of the
rectangle width: specifies the width of the
rectangle
height: specifies the height of the rectangle
attributes specify other properties such as stroke-color,
stroke-width, fill-color etc.
• Here's an example:
<!DOCTYPE html>

<html>

<body>

<svg width="200" height="200">

<rect x="50" y="50" width="125" height="75" fill="blue" stroke="red" stroke-width="2" />

Output:

Explanation of the Program

• We use the <svg> tag to create an SVG graphic with a width and
2|P a g e
Computer Applications Multimedia Animation

height of 200 pixels.

• We then use the <rect> tag to create a blue rectangle with a

top-left corner at (x, y) = (50, 50), a width of 125 pixels, and

a height of 75 pixels.
• The fill attribute is set to "blue", which fills the rectangle with
the color blue.
• The stroke attribute is set to "red", which gives the rectangle a
red stroke.
• The stroke-width attribute is set to 2, which sets the width of the
stroke to 2 pixels.

2|P a g e
Computer Applications Multimedia Animation

HTML5 − SVG Circle

• This draws a circle in a SVG image.
• Syntax:
<circle cx="[cx]" cy="[cy]“
r="[r]" [attributes] /> Where,
cx: specifies the x-coordinate of the
center of the circle cy: specifies the
y-coordinate of the center of the
circle r: specifies the radius of the
circle
attributes specify other properties such as stroke-color,
stroke-width, fill-color etc.
• Here's an example:
<!DOCTYPE html>

<html>

<body>

<svg width="200" height="200">

<circle cx="100" cy="100" r="50" fill="blue"/>

Output:

Explanation of the Program

AAV
Computer Applications Multimedia Animation

• We use the <svg> tag to create an SVG graphic with a width and
height of 200 pixels.
• We then use the <circle> tag to create a circle with
i) center at (cx, cy) = (100, 100) and
ii) radius of 50 pixels.

• The fill attribute is set to "blue", which fills the circle with the
color blue.

AAV
Computer Applications Multimedia Animation

HTML5 − SVG Ellipse

• This draws an ellipse in a SVG image.
• Syntax:
<ellipse cx="[cx]“ cy="[cy]“ rx="[rx]“
ry="[ry]" [attributes] /> Where,
cx: specifies the x-coordinate of the
center of the ellipse cy: specifies the
y-coordinate of the center of the
ellipse rx: specifies the horizontal
radius of the ellipse
ry: specifies the vertical radius of the ellipse
attributes specify other properties such as stroke-color,
stroke-width, fill-color etc.
• Here's an example:
<!DOCTYPE html>

<html>

<body>

<svg width="200" height="200">

<ellipse cx="50" cy="50" rx="40" ry="20" fill="blue" />

Output:

Explanation of the Program

• We use the <svg> tag to create an SVG graphic with a width and
height of 200 pixels.
1|P a g e
Computer Applications Multimedia Animation

• The cx and cy attributes are set to 50 and 50,

respectively, which centers the ellipse at (50,50).
• The rx and ry attributes are set to 40 and 20, respectively,

which makes the width of the ellipse twice the height.

• The fill attribute sets the fill color to blue.

HTML5 − SVG Polygon

• This draws a closed shape, which consists of a series of
connected straight lines.
• Syntax:
<polygon points="[x1,y1 x2,y2
x3,y3 ]“
[attributes] /> Where,
points specifies the vertices of the polygon
attributes specify other properties such as stroke-color,
stroke-width, fill-color etc
• Each coordinate is separated by a comma.
• Multiple vertices are separated by spaces.
• The first vertex represents the starting point of the polygon.

• The last vertex is automatically connected to the first vertex.

• Here's an example:

2|P a g e
Computer Applications Multimedia Animation

<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<polygon points="25,25 100,100 175,25" fill="blue" />
</svg>
</body>
Output:

Explanation of the Program

• We use the <svg> tag to create an SVG graphic with a width and
height of 200 pixels.
• We then use the <polygon> tag to create a polygon with

vertices at (25,25), (100, 100), and 175, 25).

• The fill attribute is set to "blue", which fills the polygon with
the color blue.

3|P a g e
Computer Applications Multimedia Animation

13.1 HTML5 − SVG Polyline

• This draws an open shape, which consists of a series of
connected straight lines.
• Syntax:
<polyline points="[x1,y1 x2,y2
x3,y3 ]"
[attributes] /> Where,
points specifies the vertices of the polyline
attributes specify other properties such as stroke-color,
stroke-width, fill- color etc.
• Each coordinate is separated by a comma.

• Multiple vertices are separated by spaces.

• The first vertex represents the starting point of the polyline.
• Unlike polygon, the last vertex is not connected to the first
vertex.
• Here's an example:
<!DOCTYPE html>

<html>

<body>

<svg width="200" height="200">

<polyline points="25,25 100,100 175,25"

Output:

Explanation of the Program

4|P a g e
Computer Applications Multimedia Animation

• We use the <svg> tag to create an SVG graphic with a width and
height of 200 pixels.
• We then use the <polyline> tag to create a polyline with

three vertices at (25,25), (100, 100), and 175, 25).

• The "fill" attribute is set to "none" to indicate that the polyline
should not be filled.
• The stroke attribute is set to "blue", which gives the polyline a
blue color.
• The stroke-width attribute is set to 2, which sets the width of the
polyline to 2 pixels.

HTML5 − SVG Star

• To create a star shape,
1) use a polygon element and
2) specify vertices of the star
• Here's an example:
<!DOCTYPE html>

<html>

<body>

<svg width="200" height="200">

<polygon points="100,50 120,95 170,95 130,125 150,170 100,140 50,170 70,125

Output: 30,95 80,95" fill="blue" />

5|P a g e
Computer Applications Multimedia Animation

Explanation of the Program

• The points attribute of the <polygon> element specifies
the coordinates of the ten vertices that make up the star.
• The first vertex is at (100,50) and subsequent vertices are

defined in a clockwise direction around the star.

• The fill attribute is set to "blue", which fills the star with the
color blue.
HTML5 − SVG Gradients
• A gradient is a gradual transition between two or more colors.
• Two types of gradients are:
3) Linear gradients change gradually in a straight line from
one color to another.
4) Radial gradients change gradually from the center of a
circle to its edge.

LinearGradient
• This defines a linear gradient.
• Two types of linear gradients are: horizontal and vertical
gradients.
• Syntax:
<svg>
</svg> Where,

6|P a g e
Computer Applications Multimedia Animation

< x1=“[x1]" y1=“[y1]" x2=“[x2]" y2=“[y2]" >

linearGradi <stop offset="0%" stop-color="start-color" />
ent <stop offset="100%" stop-color="end-color" />
id="gradie </linearGradient>
ntID"
id: This is a unique identifier for the gradient.
x1,y1: specifies the start point of
the linear gradient x2,y2:
specifies the end point of the
linear gradient stop: defines the
position and color of the
gradient
offset: specifies the position of the color along the gradient
stop-color: specifies the color of the gradient
• Here's an example:
<!DOCTYPE html>

<html>

<body>

<svg width="200" height="200">

<defs>

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%" >

<stop offset="0%" style="stop-color: red; " />

<stop offset="100%" style="stop-color:green; " />

Output:

7|P a g e
Computer Applications Multimedia Animation

Explanation of the Program

• We use the <linearGradient> tag inside the <defs> section
to define a linear gradient with ID "grad1".
• The gradient starts at (0%, 0%) and ends at (100%, 0%),

which means it is a horizontal gradient.

• The <stop> tags inside the <linearGradient> tag define the color
stops for the gradient.
• The first stop has a color of red, and the second stop has a color of
green.
• We then use the "url(#grad1)" syntax to fill a rectangle with the
gradient.

RadialGradient
• This defines a radial gradient.
• Syntax:
<svg>
<radialGradient
id="gradientID"
cx=“[cx]"
cy=“[cy]"
r=“[r]">
</sv <stop offset="0%" stop-color="start-color" />
g> <stop offset="100%" stop-color="end-color" />
Where, </radialGradient>

id: This is a unique identifier

8|P a g e
Computer Applications Multimedia Animation

for the gradient. cx,cy:

specifies the center of the
radial gradient r: specifies the
radius of the radial gradient
stop: defines the position and color of the gradient
offset: specifies the position of the color along the gradient
stop-color: specifies the color of the gradient
• Here's an example:
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" " >
<stop offset="0%" style="stop-color: red; " />
<stop offset="100%" style="stop-color:green; " />
</radialGradient>
</defs>
<rect x="25" y="25" width="150" height="100" fill="url(#grad2)" />
</svg>
</body>
</html>

9|P a g e
MULTIMEDIA AND ANIMATIONS

Output:

Explanation of the Program

• We use the <radialGradient> tag inside the <defs> section
to define a radial gradient with ID "grad2".
• The gradient starts at center of rectangle.
• The <stop> tags inside the <radialGradient> tag define the color
stops for the gradient.
• The first stop has a color of red, and the second stop has a color of
green.
• We then use the "url(#grad2)" syntax to fill a
rectangle with the gradient.

Introduction to Animations:

Definition of Animation :
Animation is the process of creating an illusion of motion and
shape change by means of rapid display of various type of pictures
that were made to create a single scene.
The Start and End States
If visualizing change is an important part of an animation, we need
to create some reference points so that we can compare what has
changed. Let’s call these reference points the start state and
NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
the end state. To better explain what is going on, let’s come up with
an easy-to-understand example as well.
Let’s say our start state looks like Figure 1-3.

Figure 1-3. In the beginning, there was a small blue circle

You start off with a small blue circle located to the left of the
screen. At the end state,
.

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

The circle moves right and grows larger

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

interpolation

Animations on the Web

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Figure 1-6. How an animation made up of keyframes might

look

These intermediate states, if you choose to use them, give you

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
interpolating between the two states, is take care of automatically

Transitions only need a start and end state to do their thing

Scripted/JavaScript animations
If you want full control over what your animation does right down
to how it interpolates between states,

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

When we use JavaScript, you have a lot of freedom in defining

how your animation works

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
UNIT-III
HTML CANVAS
HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript. <canvas> element is only a container for graphics. You must use JavaScript to actually
draw the graphics.Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.HTML5 introduces canvas and svg tags to draw graphical content such as graphs,
animation, geometrical shapes etc. using javascript API.

1.
Canvas
2. Svg
• The HTML <canvas> element is used to draw graphics on a web page.
• The <canvas> element is only a container for graphics which is drawn using JavaScript API
to actually draw the graphics.
• Javascript is used to draw the graphics in the container.
• Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
• <canvas id="identification" width="width" height="height"></canvas>
Rendering Context

Browser Support

The numbers in the table specify the first browser version that fully supports the <canvas>
element.

HTML5 <canvas> element.

Sr.No. Examples & Description
Drawing Rectangles
1
Learn how to draw rectangle using HTML5 <canvas> element

Drawing Paths
2
Learn how to make shapes using paths in HTML5 <canvas> element

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
Drawing Lines
3
Learn how to draw lines using HTML5 <canvas> element

Drawing Bezier
4
Learn how to draw Bezier curve using HTML5 <canvas> element

Drawing Quadratic
5
Learn how to draw quadratic curve using HTML5 <canvas> element

Using Images
6
Learn how to use images with HTML5 <canvas> element

Create Gradients
7
Learn how to create gradients using HTML5 <canvas> element

Styles and Colors

8
Learn how to apply styles and colors using HTML5 <canvas> element

Text and Fonts

9
Learn how to draw amazing text using different fonts and their size.

Pattern and Shadow

10
Learn how to draw different patterns and drop shadows.

Canvas States
11 Learn how to save and restore canvas states while doing complex drawings on a
canvas.

Canvas Translation
12 This method is used to move the canvas and its origin to a different point in the
grid.

Canvas Rotation
13
This method is used to rotate the canvas around the current origin.

Canvas Scaling
14
This method is used to increase or decrease the units in a canvas grid.
NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Canvas Transform
15
These methods allow modifications directly to the transformation matrix.

Canvas Composition
16
This method is used to mask off certain areas or clear sections from the canvas.

Canvas Animation
17
Learn how to create basic animation using HTML5 canvas and JavaScript.
Drawing Rectangles:
The rect() method is used to create a rectangle. The stroke() or the fill() method is used to draw
the rectangle on the canvas.
JavaScript syntax: context.rect(x,y,width,height);

Drawing Paths
There are one or more points in each subpath that are connected by straight lines or curves. To
create a custom shape perform the following steps :
• Use beginPath() method to start drawing the path.
• Draw the path that makes a shape using lines, curves and other primitives

JavaScript syntax: context.beginPath();

Drawing Lines
To draw a straight line on a canvas, use the following methods:

• moveTo(x,y) - defines the starting point of the line

• lineTo(x,y) - defines the ending point of the line

Drawing circle
To draw a circle on a canvas, use the following methods:

• beginPath() - begins a path

• arc(x,y,r,startangle,endangle)
• creates an arc/curve. To create a circle with arc(): Set start angle to 0 and end angle to
2*Math.PI. The x and y parameters define the x- and y-coordinates of the center of the
circle. The r parameter defines the radius of the circle.

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Center
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Start angle
arc(100,75,50,0,1.5*Math.PI)
End angle
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Drawing Bezier canvas

Drawing quadratic curves

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Canvas bezierCurveTo() Method

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The bezierCurveTo() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
</script> </body></html>

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Start point: moveTo(20, 20)

Control point 1: bezierCurveTo(20, 100, 200, 100, 200, 20)
Control point 2: bezierCurveTo(20, 100, 200, 100, 200, 20)
End point: bezierCurveTo(20, 100, 200, 100, 200, 20)

Canvas quadraticCurveTo() Method

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The quadraticCurveTo() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
</script>
</body>
</html>

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Start point: moveTo(20, 20)

Control point: quadraticCurveTo(20, 100, 200, 20)
End point: quadraticCurveTo(20, 100, 200, 20)

Using Images
The drawImage() method draws an image into the canvas. The drawImage() method can also
draw parts of an image, and/or increase/reduce the image size.

Syntax

Position the image on the canvas:

context.drawImage(img, x, y)
Position the image on the canvas, and specify width and height of the image:
context.drawImage(img, x, y, width, height)
Clip the image and position the clipped part on the canvas:
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height)

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

HTML program to import an external Image into a canvas and then to draw on that image
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="flower" width="100" height="100"
src="flower.jpg" alt="flower">
<p>Canvas:</p>
<canvas id="myCanvas" width="100" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<button onclick="mycanvas()"> Draw image in canvas </button>

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Create gradients
Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited
to solid colors.

There are two different types of gradients:

• createLinearGradient(x,y,x1,y1) - creates a linear gradient

• createRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient

Once we have a gradient object, we must add two or more color stops.

The addColorStop() method specifies the color stops, and its position along the gradient. Gradient
positions can be anywhere between 0 to 1.

To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape
(rectangle, text, or a line).

Linear Gradients

• createLinearGradient() method used to create a linear gradients in HTML5 canvas.

• Once gradient is created we can add colors using addColorStop() property.
• 0 at the beginning point and 1 is at the ending point.

Syntax: var gradient=object.createLinearGradient(x0,y0,x1,y1);

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid grey;"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
var grdient = ctx.createLinearGradient(0,0,200,0);
grdient.addColorStop(0,"red");
grdient.addColorStop(1,"blue");
// Fill with gradient
ctx.fillStyle = grdient;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

Radial Gradients
• createRadialGradient() method used to produce aradial gradient with HTMl5 canvas.
• Radial gradients are described with two fictional circles- a beginning circle and an ending
circle
• Gradient begins with the start circle and goes towards the end circle
NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Syntax:
var gradients=object.createRadialGradient(x0,y0,x1,y1,r1);

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid grey;"></canvas>

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Styles and colors

HTML5 canvas provides two important properties to apply colors to a shape.

SI.No. Method and Description

fillStyle
1
This attribute represents the color or style to use inside the shapes.

strokeStyle
2
This attribute represents the color or style to use for the lines around shapes
By default, the stroke and fill color are set to black which is CSS color value #000000.
1.fillstyle

The fillStyle property sets or returns the color, gradient, or pattern used to fill the drawing.
Default value: #000000

JavaScript syntax: context.fillStyle=color|gradient|pattern;

Property Values

Value Description

Color A CSS color value that indicates the fill color of the
drawing. Default value is #000000

gradient A gradient object (linear or radial) used to fill the drawing

pattern A pattern object to use to fill the drawing

<!DOCTYPE html>
<html>

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>
</body></html>

2.Stroke Style

The strokeStyle property sets or returns the color, gradient, or pattern used for strokes.
Default value: #000000

JavaScript syntax: context.strokeStyle=color|gradient|pattern;

Property Values

Value Description

color A CSS color value that indicates the stroke color of the
drawing. Default value is #000000

gradient A gradient object (linear or radial) used to create a

gradient stroke

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

pattern A pattern object used to create a pattern stroke

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#FF0000";
ctx.strokeRect(20, 20, 150, 100);
</script> </body> </html>
Output:

Text and fonts

Text

To draw text on a canvas, the most important property and methods are:
• font - defines the font properties for the text
• fillText(text,x,y) - draws "filled" text on the canvas
• strokeText(text,x,y) - draws text on the canvas (no fill)

fillText() is used to render filled text to the canvas by using the existing fill style and font

syntax: ctx.fillText(text,x,y);

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
Ouput:

strokeText()
strokeText() is used to render the specified text at the specifies position by using current font,
lineWidth and strokeStyle property.
NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
Syntax: ctx.strokeText(text,x,y);

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid grey;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>

Pattern and shadow

Pattern
The createPattern() method repeats the specified element in the specified direction.
The element can be an image, video, or another <canvas> element.
NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
The repeated element can be used to draw/fill rectangles, circles, lines etc.
Synatx:
context.createPattern(image, "repeat|repeat-x|repeat-y|no-repeat");

Shadow
1. shadow color
2. shadowoffsetX
3.shadowoffsetY
4.shadowblur

1. Shadowcolor : The shadowColor property sets or returns the color to use for shadows.
context.shadowColor = color

2. shadowblur :The shadowBlur property sets or returns the blur level for shadows.
The default value is 0.
3. shadowoffsetX : The shadowOffsetX property sets or returns the
horizontal distance of the shadow from the shape.
Syntax: context.shadowOffsetX = number

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
4. shadowOffsetY : The shadowOffsetY property sets or returns the vertical distance of the
shadow from the shape.
Default value is 0.

Syntax: context.shadowOffsetY = number

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The createPattern() Method</h2>
<p>Image to use:</p>
<img src="\D:\p.png" id="lamp" width="50" height="50">
<p>
<button onclick="draw('repeat')">Repeat</button>
<button onclick="draw('repeat-x')">Repeat-x</button>
<button onclick="draw('repeat-y')">Repeat-y</button>
<button onclick="draw('no-repeat')">No-repeat</button>
</p>
<canvas id="myCanvas" width="1000" height="1050" style="border:1px solid
#d3d3d3;">
</canvas>
<script>
function draw(direction)
{
const c = document.getElementById("myCanvas");

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
const ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
const img = document.getElementById("lamp")
const pat = ctx.createPattern(img, direction);
ctx.rect(0, 0, 600, 600);
ctx.fillStyle = pat;
ctx.fill();
}
</script>

</body>
</html>

Save and restore

The save() method saves the state of the drawing context with all its attributes.
context.save()
The restore() method restores the state of a saved drawing context:
context.restore()
<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The save() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Draw
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 50, 50);
// Save the state
ctx.save();
// Draw new
ctx.fillStyle = "red";
ctx.fillRect(100, 10, 50, 50);
// Restore saved state
NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
ctx.restore();
// Draw new
ctx.fillRect(200, 10, 50, 50);
</script>
</body>
</html>

Canvas Translation
This method is used to move the canvas and its origin to a different point in the grid.
Synatx:
context.translate(x, y)

The translate() method remaps the (0,0) position of the context.

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The translate() Method</h2>

<canvas id="myCanvas" width="300" height="450" style="border:1px solid grey"></canvas>

Canvas Scaling
This method is used to increase or decrease the units in a canvas grid. If you scale a context, all
future drawings will be scaled. If you scale(2,2), drawings will be positioned twice as far from the
0,0 position of the canvas as you specify.
Synatx:
context.scale(scalewidth, scaleheight)

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The scale() Method</h2>
<canvas id="myCanvas" width="500" height="550" style="border:1px solid grey"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
ctx.scale(2,2);
ctx.fillStyle="blue";
ctx.fillRect(40,40,50,50);
</script>
</body>
</html>

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

Canvas Rotation
The rotate() method rotates the context. This method is used to rotate the canvas around
the current origin.

Syntax: context.rotate(angle)

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The rotate() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);
</script>
</body>
</html>

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
Canvas Transform
These methods allow modifications directly to the transformation matrix.
The transform() method scales, rotates, moves, and skews the
context.
Each object on the canvas has a transformation matrix.
The transform() method replaces the transformation matrix, and multiplies the it with a matrix
described by:
ace
bdf
001
Synatx:
context.transform(a, b, c, d, e, f)

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The transform() Method</h2>
<canvas id="myCanvas" width="500" height="550" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
ctx.fillRect(0, 0, 250, 100);

ctx.transform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
</script></body></html>

Canvas Composition :- This method is used to mask off certain areas or clear sections from the
canvas The globalCompositeOperation property sets or returns how a source are drawn over a
destination.

Source = drawings you are about to draw on the canvas.

Destination = drawings that are already drawn on the canvas.

Syntax: context.globalCompositeOperation = "value"

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The globalCompositeOperation Property</h2>
<canvas id="myCanvas" width="500" height="550" style="border:1px solid grey"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 250, 100);
ctx.globalCompositeOperation = "source-over";
//ctx.globalCompositeOperation = "source-in";
//ctx.globalCompositeOperation = "source-out";
//ctx.globalCompositeOperation = "source-atop";
//ctx.globalCompositeOperation = "lighter";
//ctx.globalCompositeOperation = "xor";
//ctx.globalCompositeOperation = "destination-in";
//ctx.globalCompositeOperation = "destination-out";
//ctx.globalCompositeOperation = "destination-atop";
//ctx.globalCompositeOperation = "copy";
ctx.fillStyle = "blue";
ctx.fillRect(90, 90, 250, 100);
</script>
</body>
</html>

Canvas animations

1. setinterval
2. settimeout

Setinterval :The setInterval() method calls a function at specified intervals (in milliseconds).

The setInterval() method continues calling the function until clearInterval() is called, or the
window is closed.

NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
1 second = 1000 milliseconds.

2.settimeout:

The setTimeout() method calls a function after a number of milliseconds.

1 second = 1000 milliseconds.

The setTimeout() is executed only once.

If you need repeated executions, use setInterval() instead.

<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setInterval() Method</h2>
<p id="demo"></p>
<script>
var element = document.getElementById("demo");
setInterval(function(){element.innerHTML += "Hello"}, 1000);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
NDRK FGC
MM AAV
MULTIMEDIA AND ANIMATIONS
<body>

<h1>The Window Object</h1>

<h2>The clearTimeout() Method</h2>
<p>Click the button to prevent the timeout to execute. (You have 3 seconds).</p>
<h2 id="demo"></h2>
<button onclick="myStopFunction()">Stop it</button>
<script>
const myTimeout = setTimeout(myGreeting, 3000);
function myGreeting() {
document.getElementById("demo").innerHTML = "hello!"
}
function myStopFunction() {
clearTimeout(myTimeout);
}
</script>
</body>
</html>

NDRK FGC
MM AAV

BCA - (WEB PROGRAMMING) (Total 5 Units PDF
100% (2)
BCA - (WEB PROGRAMMING) (Total 5 Units PDF
153 pages
R Programming First Unit
100% (1)
R Programming First Unit
34 pages
2nd SEM BCA English Grammar
No ratings yet
2nd SEM BCA English Grammar
108 pages
Bca II Sem Dbms Question Bank With Answers
No ratings yet
Bca II Sem Dbms Question Bank With Answers
35 pages
Bca IV Sem Os - I Unit Notes
No ratings yet
Bca IV Sem Os - I Unit Notes
41 pages
BCA IV Sem Cyber Law & Internet Security
100% (1)
BCA IV Sem Cyber Law & Internet Security
22 pages
Attachment 11.2 LF
No ratings yet
Attachment 11.2 LF
5,716 pages
BCA-3rd Sem DBMS Important Questions.
100% (2)
BCA-3rd Sem DBMS Important Questions.
4 pages
Chapter - 5 Programming Timers
No ratings yet
Chapter - 5 Programming Timers
29 pages
ADA Notes-NEP 2023-1
No ratings yet
ADA Notes-NEP 2023-1
17 pages
E Commerce Notes For Bca Students
No ratings yet
E Commerce Notes For Bca Students
93 pages
ANU UG 5th Sem B.SC Computers Web Interface Designing Technologies Material PDF (WWW - Anuupdates.org)
No ratings yet
ANU UG 5th Sem B.SC Computers Web Interface Designing Technologies Material PDF (WWW - Anuupdates.org)
170 pages
Write An HTML Program To Create The Table
No ratings yet
Write An HTML Program To Create The Table
48 pages
DBMS and SQL Notes
100% (1)
DBMS and SQL Notes
68 pages
Service Manual: DVD Receiver
No ratings yet
Service Manual: DVD Receiver
100 pages
ಕೆ.ಎಮ್. ಸುರೇಶ್ ಅರ್ಥಶಾಸ್ತ್ರ
No ratings yet
ಕೆ.ಎಮ್. ಸುರೇಶ್ ಅರ್ಥಶಾಸ್ತ್ರ
261 pages
Web Designing Theory (4th Sem) .
100% (1)
Web Designing Theory (4th Sem) .
23 pages
1.3 Fundamentals of The Analysis of Algorithmic Efficiency - Analysis Framework
No ratings yet
1.3 Fundamentals of The Analysis of Algorithmic Efficiency - Analysis Framework
5 pages
Maintenance of Electrical Machines
No ratings yet
Maintenance of Electrical Machines
8 pages
Bcs 053 Web Programming Study Notes
No ratings yet
Bcs 053 Web Programming Study Notes
20 pages
WEB PROGRAMMING Unit 1 Notes
100% (1)
WEB PROGRAMMING Unit 1 Notes
15 pages
Spring AOP
No ratings yet
Spring AOP
48 pages
KANNAD 406 As Installation Operation Manual DMA176M
No ratings yet
KANNAD 406 As Installation Operation Manual DMA176M
48 pages
41 Computer Science Model Paper
No ratings yet
41 Computer Science Model Paper
3 pages
Unit 3 & 4 Os
No ratings yet
Unit 3 & 4 Os
19 pages
Junaid Khan C.V
No ratings yet
Junaid Khan C.V
8 pages
Introduction To PHP Evolution and Its Comparison
100% (1)
Introduction To PHP Evolution and Its Comparison
10 pages
Method Statement of Drywall Installation For Gypsum Boards
100% (1)
Method Statement of Drywall Installation For Gypsum Boards
7 pages
Attribute Grammar
No ratings yet
Attribute Grammar
17 pages
Forms and Frames in HTML MCQ With Answers and Explanations
100% (2)
Forms and Frames in HTML MCQ With Answers and Explanations
3 pages
PHP BCA ALLUNITS Question
No ratings yet
PHP BCA ALLUNITS Question
6 pages
JDBC Api Components and Drivers
100% (1)
JDBC Api Components and Drivers
15 pages
Os Unit 1 & 2.
No ratings yet
Os Unit 1 & 2.
22 pages
327 Web Applications
No ratings yet
327 Web Applications
7 pages
Oss Unit-8 PDF
100% (1)
Oss Unit-8 PDF
24 pages
BSC CsIt Complete RDBMS Notes
No ratings yet
BSC CsIt Complete RDBMS Notes
86 pages
BCA 3rd Data Structure 1 20
100% (1)
BCA 3rd Data Structure 1 20
20 pages
Chapter 17 Web Designing1 PDF
100% (2)
Chapter 17 Web Designing1 PDF
15 pages
Iv Vsem Bca Blownup and Practical List
No ratings yet
Iv Vsem Bca Blownup and Practical List
28 pages
Real Life Project JBM
No ratings yet
Real Life Project JBM
19 pages
Web Designing Workshop
0% (1)
Web Designing Workshop
2 pages
Web Technology - Questions - Answers-1
100% (1)
Web Technology - Questions - Answers-1
113 pages
Process Control Boiler
No ratings yet
Process Control Boiler
70 pages
Web Design Notes For BCA 5th Sem 2019 PDF
No ratings yet
Web Design Notes For BCA 5th Sem 2019 PDF
44 pages
Web Application Practical Questions
100% (2)
Web Application Practical Questions
2 pages
Abhishek Rai Web Technology Practical File
100% (1)
Abhishek Rai Web Technology Practical File
33 pages
BCA
No ratings yet
BCA
28 pages
Introduction To HTML
No ratings yet
Introduction To HTML
99 pages
Layers of Netscape
100% (1)
Layers of Netscape
4 pages
DEH-P480MP, 4800MP Multi-CD Control High Power CD-mp3-Wma Player With Tuner
No ratings yet
DEH-P480MP, 4800MP Multi-CD Control High Power CD-mp3-Wma Player With Tuner
74 pages
HTML Exercise
No ratings yet
HTML Exercise
13 pages
HTML Notes
100% (1)
HTML Notes
18 pages
Rdbms Lab Questions
No ratings yet
Rdbms Lab Questions
3 pages
Python Quetion and Answers
No ratings yet
Python Quetion and Answers
5 pages
HTML Basics II - 2Q
No ratings yet
HTML Basics II - 2Q
16 pages
Python Teaching Notes-Exception Handling PDF
No ratings yet
Python Teaching Notes-Exception Handling PDF
9 pages
Chapter 9 - Input and Output Operators
100% (1)
Chapter 9 - Input and Output Operators
5 pages
Frames in Javascript
No ratings yet
Frames in Javascript
13 pages
A Brief History of Database Applications
67% (3)
A Brief History of Database Applications
2 pages
PC Software Notes Unit-I
No ratings yet
PC Software Notes Unit-I
4 pages
DHTML Notes
100% (1)
DHTML Notes
16 pages
Question Bank of WT-1
100% (1)
Question Bank of WT-1
4 pages
Introduction To HTML
No ratings yet
Introduction To HTML
33 pages
Aspen PIMS (Process Industry Modeling System)
No ratings yet
Aspen PIMS (Process Industry Modeling System)
4 pages
Refrigerant and Oil Filling Quantities Passenger Cars & Commercial Vehicles 2014-15
No ratings yet
Refrigerant and Oil Filling Quantities Passenger Cars & Commercial Vehicles 2014-15
112 pages
Bca 3 Sem File
No ratings yet
Bca 3 Sem File
62 pages
What Do You Mean by Software Crisis? Explain With Examples. How Can Software Crisis Can Be Minimized?
No ratings yet
What Do You Mean by Software Crisis? Explain With Examples. How Can Software Crisis Can Be Minimized?
11 pages
1st Sem BCA Midterm
No ratings yet
1st Sem BCA Midterm
10 pages
Frames & Layers in HTML
No ratings yet
Frames & Layers in HTML
9 pages
CNC PCB From CAD To CAM With Fritzing FlatCAM BCNC
No ratings yet
CNC PCB From CAD To CAM With Fritzing FlatCAM BCNC
48 pages
Introduction To Data Structures - BCA
100% (1)
Introduction To Data Structures - BCA
27 pages
Important Questions: Subject: Web Design Class: - BCA-4nd Sem
100% (3)
Important Questions: Subject: Web Design Class: - BCA-4nd Sem
2 pages
BCA Data Structures Notes
No ratings yet
BCA Data Structures Notes
24 pages
Introduction To HTML
No ratings yet
Introduction To HTML
17 pages
PM Coverage
No ratings yet
PM Coverage
9 pages
Divya Anand
No ratings yet
Divya Anand
4 pages
Read Online: Clark Gpx25 Manual
0% (1)
Read Online: Clark Gpx25 Manual
3 pages
01 MS-1542 v1.0 English GP
No ratings yet
01 MS-1542 v1.0 English GP
58 pages
91 Macro Economicsk KM
No ratings yet
91 Macro Economicsk KM
140 pages
Microprocessor-Lab 2
No ratings yet
Microprocessor-Lab 2
7 pages
Supervisor Daily Report-Time Sheet-R5a - in Progress
No ratings yet
Supervisor Daily Report-Time Sheet-R5a - in Progress
1 page
Lesson 4 Overview of Health Informatics Copy 1
No ratings yet
Lesson 4 Overview of Health Informatics Copy 1
24 pages
Datasheet - SKF - Global - SKF Rotary Shaft Seal - Engineering360
No ratings yet
Datasheet - SKF - Global - SKF Rotary Shaft Seal - Engineering360
2 pages
DBMS Edp
No ratings yet
DBMS Edp
59 pages
FRABA - Absolute - Encoder / PLC - 1 (CPU 314C-2 PN/DP) / Program Blocks
No ratings yet
FRABA - Absolute - Encoder / PLC - 1 (CPU 314C-2 PN/DP) / Program Blocks
3 pages
Astor Time Complete User Manual
No ratings yet
Astor Time Complete User Manual
18 pages
Pdf&rendition 1
No ratings yet
Pdf&rendition 1
17 pages
1
No ratings yet
1
4 pages
Introduction To Telegram Video Splitter Bot
No ratings yet
Introduction To Telegram Video Splitter Bot
10 pages
Creating Custom Record Sharing Logic Using Salesforce Flow - Automation Champion
No ratings yet
Creating Custom Record Sharing Logic Using Salesforce Flow - Automation Champion
27 pages
ToTheMoonAndBack OWC
No ratings yet
ToTheMoonAndBack OWC
8 pages
Md32xx Md36xx Compatibility Matrix
No ratings yet
Md32xx Md36xx Compatibility Matrix
41 pages
ST - ST62T00 PDF
No ratings yet
ST - ST62T00 PDF
3 pages
Cisco 500-325 Mock Exam PDF: Secure Your Career by CSA 500-325 Exam Dumps
No ratings yet
Cisco 500-325 Mock Exam PDF: Secure Your Career by CSA 500-325 Exam Dumps
2 pages
MEB073-FundsAtWork Umbrella Funds Personal Details Form
No ratings yet
MEB073-FundsAtWork Umbrella Funds Personal Details Form
2 pages
Pritam CV
No ratings yet
Pritam CV
3 pages