how to make text chase the mouse?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
i was trying to make the letters follow the mouse but i don know where to paste the code at? i mean i have the actual code which would do the work, it's just i've no idea where to load it.
also how can i chance the background to something of my own, like a pic etc..?
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi Jaz,

You can paste backgrounds of your own, on 6 styles:

Tastelessly
BareNecessities
Burlap
CleanSlate
NoFrills
SqueakyClean.

Your code to follow the mouse:

You would drag an HTML widget to the highest part of your page and paste the code into this.

I would strongly recommend tryng this on a test site first. Sometimes code like this can break your page.

Goodluck and please get back to us here if you need any further info.
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
k i did that but nothin's happenin?...all i see is the code on the web but no letters flying after the mouse?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi Jaz,

Can you paste your code here for us to look at and maybe we can see what the problem is.

The other option is to give us the reference URL of the code.

Tip: To paste the code, wrap it in the following to markers.

<!-- {your code here} -->
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
http://www.kirupa.com/developer/mx/mo...
this is the web i got it off from, maybe im missing some step?..like all i did was copy n paste and nothing happend, do i need to do anything besides that?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi Jaz,

This has to be created as a Flash MX movie.
You can't simply paste it into an HTML widget. Sorry about that.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
There are other mouse trails codes published around. If you want me to I'll have a look for some.
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
yeh Peter that would be very helpful! :)
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hello jaz,

I have selected three references for you. I'm sure it will keep you amused and enthralled for some-time :)

http://www.htmlbasix.com/mousetrails....
http://www.dynamicdrive.com/dynamicin...
http://javascript.internet.com/time-d...

If you need any help at all please get back to us here. We will be pleased to help.

Great tip: If you wish to paste any code on here please use this encoder. Self explanatory I think.

http://forsite.synthasite.com/encoder...

Any questions on any application always helps if you can either paste the code or give us the reference to the code.

Great luck !!!
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
sorz for keep on bothering ya man...just one more ques like i pasted the code but it keeps on saying Error?....

/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi jaz,

There's some code missing here.

hang on a minute and i'll find the original.
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
man thx 4 helping sooo much!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
The reference I gave below is wrong: http://krooclub.com/test-i
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
OK jaz,

It works.

have a look here:

http://krooclub.com/i-test

Here's the code:

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Dynamic Drive! Scripts & More!";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Nice job. Thanks Peter.
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
once again thx so much for ur time peter........but sadly idk y it's just not workin on my web......or im just dumb? lol
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Not dumb I'm sure.

How about creating a new page and just calling it eg test

Copy and paste everything displayed in the angle brackets into an HTML Widget.

You need to drag the widget from the properties sidebar onto your page. Then paste the code into this.

Let me know how you go. We can do this I'm sure
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
i did tht..but it kept sayin 'opps! an error has occured with ur pasted java script please check your code'??
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Ignore it jaz. :)

Often happens. That's another reason to always run it on a trial page first. It will probably work but with these error messages that pop up you also want to be sure that it doesn't create a problem.

I got that message as well. I re-pasted it and then saved and published
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
jaz,

Can you tell me your URL and the page name you're installing it in?

I can have a look at your code from here.
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
that link just goes to the Yola Login page
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi jaz,

Have you published your site ?.
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
http://sitebuilder.yola.com/sites/S3/...
try this...n yeh i think i hv
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
OK Jaz,

I think I can see the problem. You have added it a couple of times. It's an easy fix. :)

can you simply delete one of the HTML widgets that you added the code to.

Tell me when you have and if it then works.

We'll get this working I'm sure. :)
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
i did dat still no luck...but i think im ready to give up on this...spent too much time :(
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Your choice jaz.

Sometimes leaving it for a day or two then coming back to it works.

Did you try it on a test page first to see if you could get it working?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Jaz,

By the way what is your websites address? You gave me the sitebuilder. When you hit the update button it should tell you clearly.
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
it's jazzyh.com...most likly i'll change it
yeh man sadly my project is due Wed i hope i get this down by then....thx again 4 SO much of ur time
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
You are welcome and I'm here to help. Pleasure Jaz.

great luck with the project and it looks good!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Jaz

I tried out this code and was able to get it to work. I'm wondering how you're putting in the code? Are you pasting the code into an HTML widget and placing this high up on your page? Also, if you would like this to exist on all your pages, you'll have to put the code on each page.

One further thought, what browser are you using? I wonder if this may contribute to your code not working? Yola works best with Firefox. You can download it for free here: http://en-us.www.mozilla.com/en-US/fi...
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
yo is it possible one of u guys can put it in 4 me somehow?.......it's just sad how much time i put into this lol....
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
hy man i sent it.....c if its all ya need?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Thank you. Can you logout of the builder. It can cause probs if two logins coincide.

I'll post here to let you know. Youcan still see it on the published site.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi jaz,

I have it working on a trial page on your site which i created. The text is black on a black background. Not easily seen. What colour would you like the text?
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
Red plz :)
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
OK. Blood it is! :)
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
How does that look to you jaz?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Do you want it on all pages as well? (While I'm here?)
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
yes i do....n man thx 4 helpin me sooo much
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
OK. I'll add it to all. Give me 5 then I'll log out.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
Lookin Good, i like it.
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
U AWESOME!!....looks great
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
You're welcome. It does look great with your site design. Awesome site actually.

Congratulations on your work jaz!

PS: I've deleted your email so your site is secure as I can't even remeber your address already :)
Photo of jaz

jaz

  • 18 Posts
  • 0 Reply Likes
lol thx