Javascript effects tutorial

Few Javascript effects tutorial links can be found on this page. Learn how to hide HTML element on mouseover with javascript, various javascript image effects or how to change text with javascript on some event (like mouse click or mouse over).

So, here we have:


• javascript visual effects


• javascript image effects


• Other javascript effects

Find links to javascript effect code tips below!

Javascript visual effects

How to add a falling snow effect - learn how to add nice snowing effect on your web page or blog in few simple steps. Following this link more advanced users can also find how to make snow fall with a custom snow flakes.

How to show and hide HTML elements using Javascript - learn how to hide some HTML element (like textbox, div, table, table row) on click or mouse hover with javascript. There are over six samples to better explain how to do it.

Javascript image effects

Dynamically change image with javascript effect - tutorial how to dynamically change image when a mouse pointer is over image (onmouseover and onmouseout).

Or find out how to alternate image onclick with javascript.

Jquery image preview effect - learn how to show image preview when user hover mouse pointer over link.

Moving image on my web site effect - tree samples and guide which describe how to make animate effect to move image through web page.

jQuery image zoom effect - sample and step by step guide how to make zoom effect on your web page, so zoomed portion of image is showed when user put mouse over normal size image.

Other javascript effects

Changing text with javascript - change text with javacript on some event like click the link.

HTML5 scrolling text effect with javascript - how to make animated scrolling text within HTML5 like Marquee with jQuery. In HTML5 Marquee is obsolete.

Basic web effect with jQuery - in this article you can find demos and sample code for basic effect functions in jQuery. There are: hide and show effect, fadeIn and fadeOut (disappearing) effect, slide down and slide up effect and animate effect.

Web page optimization techniques

Web page optimization is a very important thing if you want to have visited web page. How to do it? There are different techniques but in this article we will concentrate on on-page SEO optimization.

To make successful web page optimization you need to:


• find best keywords with keyword research and pick one or two keyword phrases per page


• make a quality keyword placement

On site page optimization

Title tags

The most important HTML tag for Search Engine Optimization. It is very advisable to put your keywords inside title tags. Google search engine crawlers use these title tags as the main source for determining the page topic.

Text inside title tags will be showed in Google search engine result page too. On image below you can see how Google show title in result page for title: "Adding categories to blogspot (blogger) : Useful and interesting web sites". Words from search query are bolded.

Sample for title tag:
<title>Adding categories to blogspot (blogger) : Useful and interesting web sites</title>

Keyword on the beginning of the title have more weight than keywords on the end of the title. Blogspot users can find very good advice in article: Optimize blog - change title.

URL keyword optimization

Keywords in URL have important impact on your Google SERP (Search Engine Result Page) position. To prove this statement let's try type search term "Web page optimization" in Google. First five URL's in Google SERP are:

• www.websiteoptimization.com/services/analyze/
• www.websiteoptimization.com/
• www.google.com/websiteoptimizer
• en.wikipedia.org/wiki/Search_engine_optimization
• www.webpagetest.org/

Tips for good optimized URL:

• URL shouldn't be too long


• Keywords on the beginning of URL have stronger effect than keywords on the end of URL (for example www.websiteoptimization.com/ is better than www.web-source.net/webpage_optimizing.htm). For


• use hyphens as keyword separators in URLs. Blogger (Google's blog engine) use hyphens as separator for URL of particular posts.

Keyword position on web page

Keyword position also known as keyword prominence say :

The closer a word is to the front of the text area, the more relevant or important it is.

So put important keywords on the beginning of the page. Good practice is to use paragraphs in your web page. Use <p> and </p> tags to enclose text in paragraphs and put important keyword at start of paragraphs.

Keyword prominence rule is also valid for titles, URL's, headlines...

Keyword density

Keyword density is ratio between number of time keywords appear in page and total number of words on web page. Recommended keyword density is 2% to 8% by some authors, but it vary depending of source. Be careful too high density can trigger a spam penalty from Google. To find a keyword density for specific page check Page Analyzer.

Keyword proximity

Keyword proximity refers to how close the keywords that make up keyphrase are to each other.
To better explain there is an example:

• A. Web page optimization techniques
• B. Optimize your web page with best practice techniques

The A keyword phrase will make better Google result ranking for search query like "page optimization" as the relevant words appear next to one another and in the correct order. On the other side keyword phrase B will get better result for "Optimize web page".

Advice is to keep keywords together as a unit. When this is not possible, try to keep keywords not too far away from each other.

Optimization and body elements

Heading tag (<h1></h1>)- typically opinion is to be twice as important in weighting terms as regular body text (source Get to the Top on Google). However recent data from SEOMOZ study has shown that it has a very low correlation with rankings.

Image alt Attribute - it have significant impact on keyword web page optimization. So use keywords in alt attribute to describe images on your web page.

Bold and italic tags - it is good practice to use bold and italic tags on your keywords. By SEOMoz bold tag have a minor amount of SEO weight while italic tag have slightly more SEO weight.