javascript cursor trail effect - Web Development and Web Design Codes

Latest

Wednesday, May 31, 2017

javascript cursor trail effect

JavaScript Cursor Trail

javascript cursor trail
javascript cursor trail

Hi Guys Today We will learn how to create Cursor Trail using JavaScript.
Files and Directory Structure:
Create 2 files Named:
1.index.html
2.script.js
and 5 Images.
javascript cursor trail
javascript cursor trail

Now Copy the Below Codes for Certain Files.
index.html
?
1
2
3
4
5
6
7
<html>
<head>
<title>Cursor Trail using JavaScript  MegaTech24.Blogspot.Com</title>
<script type="text/javascript" SRC="cursor-trail.js"></script>
</head>
<h1>Cursor Trail Uisng JavaScript</h1>
</html>

script.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
if(document.all){
 var ie4up = 1;
}else{
 var ie4up = 0;
}
 
if(document.getElementById && !document.all){
 var ns6up = 1;
}else{
 var ns6up = 0;
}
 
for(var f=1; f<6; f++){
    var fa = f*26;
    var fb = f*22;
    document.write("<img id=im"+f+" src='image"+f+".png' style='position:absolute; left: "+fa+"px; top: "+fb+"px;' >");
}
 
var moving=1;
var onmove = false,imgw=89,imgh=87;
var winW , winH ;
var nht = winH;
var toppos = 0;
 
if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}
function getScrollXY() {
  var scrOfX = 10, scrOfY = 10;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY =window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement &&
      ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
   scrOfY = document.documentElement.scrollTop;
   scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}
 
var timer;
 
function ranrot()
{
 
var a = getScrollXY()
 
if(timer)
{
 clearTimeout(timer);
}
toppos = a[1];
winH = nht+a[1];
timer = setTimeout('ranrot()',1000);
}
   
ranrot();
function mover(x,y,moving)
{ 
 if(moving < 6){
  var ele = document.getElementById("im"+moving);
           if(x<(winW) && y<(winH))
           {
             
       var afa = (moving-1)*22;
      var afb = (moving-1)*26;
            var l=x+afa;
  var t=y+afb;
   
            if(l>(winW-109) && t<(winH-109))
            {
            ele.style.left = winW-(imgw+21);
  ele.style.top = y+afb;
 
  }else if(l<(winW-109) && t>(winH-109))
           {
            ele.style.left =x+afa ;
  ele.style.top = winH-(imgh+4);
            }else if(l>(winW-109) && t>(winH-109))
  {
            ele.style.left =winW-(imgw+21);
  ele.style.top = winH-(imgh+4);
 
            }else
            {
  ele.style.left = x+afa;
  ele.style.top = y+afb;
            }
  moving = moving+1;
  setTimeout('mover('+x+','+y+','+moving+')',60);
          }
          
 
 }
}
 
var timer = setTimeout('mover(200,200,1)',60);
 
function mouseMoveHandler (evt) {
var b = getScrollXY()
 
var x1 = document.all ? event.clientX : document.layers ? evt.x : evt.clientX;
var y1 = document.all ? event.clientY : document.layers ? evt.y : evt.clientY;
var x=x1+b[0];
var y=y1+b[1];
setTimeout('mover('+x+','+y+',1)',100);
}
 
 
function iecompattest()
{
 if(document.compatMode && document.compatMode!="BackCompat")
 {
  return document.documentElement;
 }else{
  return document.body;
 }
  
}
 
if (document.layers)
  document.captureEvents(Event.MOUSEMOVE);
 
if (document.layers || document.all)
  document.onmousemove = mouseMoveHandler;
 
if (document.addEventListener)
  document.addEventListener('mousemove', mouseMoveHandler, true);
function iecompattest()
{
 if(document.compatMode && document.compatMode!="BackCompat")
 {
  return document.documentElement;
 }else{
  return document.body;
 }
  
}
if (ns6up) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
else if (ie4up) {
 winW = iecompattest().clientWidth;
 winH = iecompattest().clientHeight;
 
}
nht = winH;

You have Successfully Created Cursor Trail Using JavaScript.Now Run the Index.html file to get Result.
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article javascript image change on hover Older Article JavaScript mouse over popup image
By v�o l�c
Labels:

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)