HTML 5 Shattering Text Effect

So today we're gonna do this amazing HTML 5 Shattering Text Effect with JavaScript and this script doesn't contains jquery or mootolls only JavaScript. Let's get started with basic HTML markup:

<canvas id="canvas"></canvas>

After adding above html we will add some css to make it better:

body {
margin: 0;
padding: 0;
overflow: hidden;
}
#canvas {
background: black;
}

Now finally it's time for us to add some JavaScript:

window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
keyword = "BWidgets.com",
imageData,
density = 3,
mouse = {},
hovered = false,
colors = ["0,120,232", "8,200,255", "30,140,255"],
minDist = 20,
bounceFactor = 0.7;
var W = window.innerWidth,
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
document.addEventListener("mousemove", function(e) {
mouse.x = e.pageX;
mouse.y = e.pageY;
}, false);
// Particle Object
var Particle = function() {
this.w = Math.random() * 10.5;
this.h = Math.random() * 10.5;
this.x = -W;
this.y = -H;
this.free = false;
this.vy = -5 + parseInt(Math.random() * 10) / 2;
this.vx = -4 + parseInt(Math.random() * 8);
// Color
this.a = Math.random();
this.color = colors[parseInt(Math.random()*colors.length)];
this.setPosition = function(x, y) {
this.x = x;
this.y = y;
};
this.draw = function() {
ctx.fillStyle = "rgba("+this.color+","+this.a+")";
ctx.fillRect(this.x, this.y,  this.w,  this.h);
}
};
var particles = [];
// Draw the text
function drawText() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "#000000";
ctx.font = "100px 'Arial', sans-serif";
ctx.textAlign = "center";
ctx.fillText(keyword, W/2, H/2);
}
// Clear the canvas
function clear() {
ctx.clearRect(0, 0, W, H);
}
// Get pixel positions
function positionParticles() {
// Get the data
imageData = ctx.getImageData(0, 0, W, W);
data = imageData.data;
// Iterate each row and column
for (var i = 0; i < imageData.height; i += density) {
for (var j = 0; j < imageData.width; j += density) {
// Get the color of the pixel
var color = data[((j * ( imageData.width * 4)) + (i * 4)) - 1];
// If the color is black, draw pixels
if (color == 255) {
particles.push(new Particle());
particles[particles.length - 1].setPosition(i, j);
}
}
}
}
drawText();
positionParticles();

// Update
function update() {
clear();
for(i = 0; i < particles.length; i++) {
var p = particles[i];
if(mouse.x > p.x && mouse.x < p.x + p.w && mouse.y > p.y && mouse.y < p.y + p.h)
hovered = true;
if(hovered == true) {
var dist = Math.sqrt((p.x - mouse.x)*(p.x - mouse.x) + (p.y - mouse.y)*(p.y - mouse.y));
if(dist <= minDist)
p.free = true;
if(p.free == true) {
p.y += p.vy;
p.vy += 0.15;
p.x += p.vx;
// Collision Detection
if(p.y + p.h > H) {
p.y = H - p.h;
p.vy *= -bounceFactor;
// Friction applied when on the floor
if(p.vx > 0)
p.vx -= 0.1;
else
p.vx += 0.1;
}
if(p.x + p.w > W) {
p.x = W - p.w;
p.vx *= -bounceFactor;
}
if(p.x < 0) {
p.x = 0;
p.vx *= -0.5;
}
}
}
ctx.globalCompositeOperation = "lighter";
p.draw();
}
}

(function animloop(){
requestAnimFrame(animloop);
update();
})();

That's It......

jQuery Nudging In Blogger

This simple jQuery effect will make your simple links to dancing links and it's too easy to add this effect on your blogger with only a little bit jquery script.

Installing :

• Go To Blogger > Template > Edit HTML

• Just above </head> post following jquery :

<script src='http://widcraft.googlecode.com/svn/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

And save the template.

Now whenever you want to add this dancing effect to any of your links/images (either in widgets/posts), add this code (class="nudge") to the HTML "a" tag, like this:

<a href="http://www.wwefansnation.com" class="nudge">Link-Text</a>

and to use images instead of text, use this code:

<a href="http://www.wwefansnation.com" class="nudge"><img src="YourImage"/></a> 

Multicolored CSS3 Tooltips

This is going to be my first post about tooltip and i thought that i should share some cool and easy tooltips for your projects and blogs and finally i found these tooltips. It's CSS3 ( A bit of jquery for IE6 ) So here we go :

First Add JavaScript ( For IE6 ) :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {
      $('.tooltip').mouseover(function(){
            $(this).children('span').show();
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });
</script>

Now Add CSS3 :

<style>
.tooltip
{
  position: relative;
  background: #eaeaea;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}
.tooltip span
{
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;                  
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
  border: 0; /* IE6 fix */
}
.tooltip:hover span
{
  visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;      
  border-bottom: 0;
}
.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}
/* Yellow */
.yellow-tooltip span
{
  border-color: #e1ca82;
  background-color: #ffeaa6;                  
}
.yellow-tooltip span:after
{
  border-top-color: #ffeaa6;
}
.yellow-tooltip span:before
{
  border-top-color: #e1ca82;
}
/* Navy */
.navy-tooltip span
{
  color: #fff;
  text-shadow: 0 1px 0 #000;
  border-color: #161a1f;
  background-color: #1e2227;
}
.navy-tooltip span:after
{
  border-top-color: #1e2227;
}
.navy-tooltip span:before
{
  border-top-color: #161a1f;
}
/* Blue */
.blue-tooltip span
{
  border-color: #59add4;
  background-color: #61bde7;
}
.blue-tooltip span:after
{
  border-top-color: #61bde7;
}
.blue-tooltip span:before
{
  border-top-color: #59add4;
}
/* Pink */
.pink-tooltip span
{
  border-color: #ce4378;
  background-color: #ea4c88;
}
.pink-tooltip span:after
{
  border-top-color: #ea4c88;
}
.pink-tooltip span:before
{
  border-top-color: #ce4378;
}
</style>

 Finally HTML Markup :

<a href="#" class="tooltip">Text To Display<span><b>Tooltip Title</b><br>Tooltip Text</span></a>

Now read this carefully there are 5colors of this tooltip and you can change colors by changing class tag below are some examples :

<a href="#" class="tooltip">Gray<span><b>Optional title</b><br>This is a gray CSS3 tooltip.</span></a>

<a href="#" class="tooltip yellow-tooltip">Yellow<span><b>Optional title</b><br>This is a yellow CSS3 tooltip.</span></a>

<a href="#" class="tooltip navy-tooltip">Navy<span><b>Optional title</b><br>This is a navy CSS3 tooltip.</span></a>

<a href="#" class="tooltip blue-tooltip">Blue<span><b>Optional title</b><br>This is a blue CSS3 tooltip.</span></a>

<a href="#" class="tooltip pink-tooltip">Pink<span><b>Optional title</b><br>This is a pink CSS3 tooltip.</span></a>

7 Cool CSS3 Text Effects

Ok so in this article i'll teach you 7 cool CSS Text Effects.....you can use'em all on your blogger/wordpress and all blogs.....so first of all the method of adding CSS/HTML on blog is same for all effects so first start with it.

How To Add :
CSS : Go To Blogger > Template > Edit HTML > Paste CSS Script Just Above ]]></b:skin>

HTML : You can add HTML on Posts/Pages/Template/ HTML/Javascript Widget.

Effect 1  Fade Block :

Demo : Place mouse on me i will fade!

HTML :

<div id="fade">Place mouse on  me i will fade!</div>

CSS :

#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade{opacity: 1;-moz-transition: opacity 1s linear;}
#fade{opacity: 1;-o-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}

Effect 2  Pulsate Block :

Demo : Place mouse on me i will pulsate!

HTML :

<div id="pulsate">Place mouse on  me i will pulsate!</div>

CSS :

#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}
 @-webkit-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }

#pulsate:hover {-moz-animation-name: pulsate;-moz-animation-duration: 20s;-moz-animation-timing-function: ease-in-out;}
@-moz-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }

#pulsate:hover {-o-animation-name: pulsate;-o-animation-duration: 20s;-o-animation-timing-function: ease-in-out;}
@-o-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }

Effect 3 Nudge :

Demo : Place mouse on me my text will shift!

HTML :

<div id="nudge">Place mouse on  me my text will shift!</div>

CSS :

#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge{-moz-transition-property:color,background-color,padding-left;-moz-transition-duration:500ms,500ms,500ms}
#nudge{-o-transition-property:color,background-color,padding-left;-o-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}

Effect 4 Expand Block :

Demo : Place mouse on me my border will expand

HTML :

<div id="expand">Place mouse on  me my border will expand</div>

CSS :

#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-moz-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-o-transition: all 500ms linear; border:10px solid black}
#expand:hover{border:30px solid #800}

Effect 5 Bounce Block :

Demo : Place mouse on me i will bounce!

HTML :

<div id="bounce">Place mouse on  me i will bounce!</div>

CSS :

#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
 @-webkit-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }

#bounce:hover {-moz-animation-name:bounce;-moz-animation-duration:1s;-moz-animation-iteration-count:2;-moz-animation-direction:alternate}
 @-moz-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }

#bounce:hover {-o-animation-name:bounce;-o-animation-duration:1s;-o-animation-iteration-count:2;-o-animation-direction:alternate}
 @-o-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }

Effect 6 Spin Block :

Demo : Place mouse on me i will spin

HTML :

<div id="spin">Place mouse on  me i will spin</div>

CSS :

#spin{-webkit-transition: -webkit-transform 3s ease-in;}
#spin:hover{-webkit-transform:rotate(360deg)}

#spin{-moz-transition: -moz-transform 3s ease-in;}
#spin:hover{-moz-transform:rotate(360deg)}

#spin{-o-transition: -o-transform 3s ease-in;}
#spin:hover{-o-transform:rotate(360deg)}

Effect 7 Accordion :

Demo : This Is First Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Demo : This is second tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Demo : This is third tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML :

<div id="accordion" class="accordion">
<a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
</div>

CSS :

.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
.accordion a:hover{background-color:#999}
.accordion div{background-color:#ccc;color:#222;}
.accordion div p{padding:20px}

#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-moz-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-o-transition:height 600ms ease}
#accordion div:target{height:110px}

That's all for this time.....Comment for any help or report.....Thanks