Interesting Web

Saturday, January 22, 2011

Implement falling snow effect on your web site

Falling snow or falling leaves effect with custom snowflakes is relative simple to include on your site or blog. You can see three demo of falling effect here:

Demo of falling leaves

To make falling effect with custom snowflake shape you only need to implement this code inside your HTML page:

<script type="text/javascript">
var snowsrc = "[PathToImageFile]";
</script>
<script src="[PathToSnowfallJsFile]" type="text/javascript"></script>

You need to replace :

[PathToImageFile] - with URL path to image
[PathToSnowfallJsFile] - with URL path to javascript file

There are two ways to get [PathToImageFile] and [PathToSnowfallJsFile].

First way is to press Pay with a tweet button and get a download for a tweet

You can choose and fill the survey and instantly unlock download to zip archive with guide for falling effect with custom shapes. You can go to the survey by clicking here.

Guide is on ShareCash web site. To unlock and download files on SharCash visitors needs to fill the surveys. ShareCash web site pay for every filled survey average 60 cents to person who upload files on ShareCash. For those who want to try to earn money on ShareCash there is a link.

Check more guides for javascript effects on this blog.

What you will find in GuideFallingSnow.zip

When you get GuideFallingSnow.zip by one way or another in zip you will find:

GuideFallingSnow.pdf with links to images of snowflakes and javascript for snowfall
12 image file of snowflakes and one of leaf
snowfall javascript file
HTML file example of falling effect

In GuideFallingSnow.pdf you will get code which you need to inject inside you HTML page or blog:

Put this code in your HTML and falling snow effect with custom snowflakes will be on your web page. In GuideFallingSnow.pdf you will also find URL's to 10 snowflakes images and one leaf.

Monday, January 10, 2011

Great escape javascript effect

On this page you will find demonstration of moving man escaping from bear and link to instruction how to implement this functionality. This animated effect is accomplishment with animated gif and javascrtipt. Image is moving form left top side of the scree to right bottom side of screen.

To have moving effect on your blog or web site visit: How to add moving functionality on your web.

Polar bear moving on your site or blog

On this page is a demo of moving object on web with help of java script. Image of polar bear is animated and it go from left side of screen to right side of screen. It is relative easy to implement this moving effect on your site.

For visitors who want to implement moving functionality on their web page or blog post I recommend: Guide for implement moving image on your web or blog.

Thursday, January 6, 2011

Walking Santa Claus jscript effect

Here is a demo of moving image in HTML page. Picture of Santa Claus is animated and it go from left side of the screen to the right side. It is accomplished with javascript.

If you want to learn how to accomplish this moving effect take a look at a code:


<div id="animatedImage" style="position: relative;">
 <img src="[PathToImageFile]" alt="animatedImage" />
</div>
<script type="text/javascript" src="[PathToJsFile]"></script>

[PathToImageFile] with santa file
[PathToJsFile] with a jscript moving file

Find more javascript effect step by step guides on this blog.

Sunday, December 19, 2010

Animated falling leaves on your site

This is a demo of animated autumn falling leaves effect for web sites and blogs. It is accomplished with java script code and very easy to implement to web page.

You need to copy and paste this code in your HTML:

<script type="text/javascript">
var snowsrc = "[PathToImageFile]";
</script>
<script src="[PathToSnowfallJsFile]" type="text/javascript"></script>

But do not forget to replace [PathToSnowfallJsFile] with path to javascript file and [PathToImageFile] with path to image of leaf.

For those who want to choose make this effect on their web sites I suggest to download instructions how to choose leaf shape or snowflake shape.

There are more javascript effects tutorials on my blog.

Saturday, December 18, 2010

Falling snow flakes on web site demo

For those who want to choose shape of snow flakes I suggest to download instructions how to choose snowflake shape with more than 10 snowflake images like two snowflakes below.

Following above link you will find step by step instruction how to get custom images of snowflakes on your site. It is accomplished with code like this:

<script type="text/javascript">
var snowsrc = "[PathToImageFile]";
</script>
<script src="[PathToSnowfallJsFile]" type="text/javascript"></script>

Following this link will also find URL's for [PathToSnowfallJsFile] and [PathToImageFile]

For guide how to implement basic snowing effect on blogger follow the link.

Saturday, December 4, 2010

Snowing effect with custom snowflake shape

For those who want to choose shape of snow flakes I suggest to download instructions how to choose snowflake shape with more than 10 snowflake images like two snowflakes below.

Following above link you will find step by step instruction how to get custom images of snowflakes on your site. It is accomplished with code like this:

<script type="text/javascript">
var snowsrc = "[PathToImageFile]";
</script>
<script src="[PathToSnowfallJsFile]" type="text/javascript"></script>

Following this link will also find URL's for [PathToSnowfallJsFile] and [PathToImageFile].

For guide how to implement basic snowing effect on blogger (without custom shapes) follow the link.
You can find more interesting tutorials for javascript effects on my blog.

Tuesday, March 16, 2010

Web mind reader

Computer can read your mind. Don't believe? Try this computer magic trick. This page will attempt to read your mind, please follow the instructions carefully. You will probably be amazed (I was when I try this ming game for the first time), computer really know what symbol you imagine. If you think you know how it works please leave comment.

Imagine one two digit number (example: 42)

Substract digits from that number (example 42 - 4 - 2 = 36)

Find results in a table and remember symbol attached to result number

Concentrate on symbol. Click on square below and see result.

For visitors who are interested how this mind puzzle works there are two hints:

think what computer can do?

what you do?

Tuesday, March 2, 2010

Add digg button to every post

This article will step-by-step guide reader to place a real time Digg count button to every single blogger post. With Digg button you have a better chance your post will be digged and get you more web traffic. In this article reader can also find how to add Digg button on top or bottom of each post and how to align Digg button on left or right side of posts.

Example of Digg button:

How to add Digg button to every blogspot post

To add Digg button to every post on your blogger blog you should copy and paste this code in blogger template:

<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

You can add Digg button on the beginning of every post or on the bottom of every post. In HTML layout search for <data:post.body/> and paste the code just before if you want to have Digg button on the top of the post or after it for twitter button on the bottom of the post.

Here are step by step guide to add Digg button counter to blogger:

Go to Layout in your blogspot blog

Click on Layout --> Edit HTML

it is recommended to backup template on local hard disk before doing any change in edit template box

check on Expand Widget Template checkbox

find <data:post.body/>

for Digg button counter on the top of post add Digg button code (for code check code above) before <data:post.body/>
```
...

[DIGG BUTTON CODE]
<data:post.body/>
...
```

or you can want Digg button on the end of your posts, add Digg button code just after the <data:post.body/>
```
...
<data:post.body/>
[DIGG BUTTON CODE]
...
```

How to align Digg button left or right

To align your Digg button left use this code:

<div style='padding: 4px; float: left;'>
[DIGG BUTTON CODE]
</div>

Code needed to align your Digg button counter right:

<div style='padding: 4px; float: right;'>
[DIGG BUTTON CODE]
</div>

Sample code for Digg button on beginning of every post on right side:

<div style='padding: 4px; float: right;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

<data:post.body/>