Текст у курсора

картинка смотрим праздник

Категории в разделе Эффекты :

Информация о материале: Категория: Эффекты для курсора; Просмотров: 59

№ - 3 Эффект « Текст у курсора »

Скрипт для html страницы с плавно перемещающимся за курсором текстом.

Эффект для оформления курсора на странице сайта с информационным текстом .

Текст следует за курсором и во время остановки стрелочки выстраивает символы в ровный ряд.
Плавно двигающиеся слова привлекают внимание и подталкивают пользователя как бы поиграть с прикольно двигающимся текстом , тем самым задерживая посетителя на страничке и передавая ему краткую информацию.
В стилях возможно изменить вид текста, цвет , размер и прозрачность - opacity: 0.3;.
Фон - background-image: linear-gradient - градиент заменить на анимационный background: url(...) repeat ;

Текст двигается у курсора.

Скопировать код

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )?
        true: false;
var the_text = new Array();
var text = text.split('');
var xx = 0;
var yy = -999;
var txt = '';

for(i=1;i<=text.length;i++){
txt+=(ns4)? '<layer name="text' + i + '" top="-50" left="0" width="' + gap +
    '" height="1">' : '<span id="text' + i +
    '" style="position:absolute; top:-50; left:0px; height:1px; width:' +
    gap + '; visibility:visible;">';
txt+='<span class="textkursor" >' + text[i-1] + '</span>';
txt+=(ns4)? '</layer>' : '</span>';
}
document.write(txt);

function move_letter(letter,left,top){
if(ns4)letter.moveTo(left,top);
else{
letter.style.left=left + 'px';
letter.style.top=top + 'px';
}
}

function flying_text(evt){
xx=15+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
yy=10+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function what_left(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function what_top(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function window_width(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

window.onload=function(){
for(n=1;n<=text.length;n++) the_text[n]= (ns4)?document.layers['text' + n]:
    (ie4)?document.all['text'+n]:document.getElementById('text'+n);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=flying_text;
setInterval('move_string()', 25);//скорость перемещения символов
}
</script>

~ Меняем текст - var text = 'Текст который Вы хотите написать... effects1.ru';
~ Расстояние между символами - var gap = 16;
~ Скорость перемещения символов - setInterval('move_string()', 25);
~ Текст без оформления - убрать класс - txt+='<span class="textkursor" >

Создайте текстовый документ .txt --> Копируем код в форме и вставляем в файл .txt --> Переименуйте файл в .HTML ---> Откройте с помощью браузера и увидите результат.

Что скажете?

Картинки и ссылки
Для сохранения картинки на компьютер наведите курсор на рисунок , сделайте клик правой кнопкой мышки и в выпавшем окне выберите пункт : Сохранить изображение как...

Для получения ссылка на картинку , наведите курсор на рисунок , сделайте клик правой кнопкой мышки и в выпавшем окне выберите пункт: Копировать адрес изображения

Для просмотра оригинала картинки , наведите курсор на рисунок , сделайте клик правой кнопкой мышки и в выпавшем окне выберите пункт: Открыть изображение в новой вкладке или Открыть исходное изображение в новой вкладке.

Интересно:

HTML и BB код на картинку

Оставить комментарий

Генератор для просмотра нескольких картинок вместе

Красиво написанные названия праздников на прозрачном фоне.

Клипарт png, картинки gif, паттерны, фоны, текстуры .

Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь

Текст у курсора

Скрипт для html страницы с плавно перемещающимся за курсором текстом.

Эффект для оформления курсора на странице сайта с информационным текстом .

Обновление :

Для победителя | Новый год | Удачи |

Категории с примерами :

Облака, тучи(паттерн) | Мрамор(паттерн) | С Рождением внучки | С Рождением Племянника | С Рождением племянницы | Бенедикт | Бенедикт - текст | Арина |

Красиво написанные названия праздников на прозрачном фоне.

Клипарт png, картинки gif, паттерны, фоны, текстуры .

10 Популярных материалов

Информация о разделах

Файлы готовятся к загрузке:

Последние добавленные :

картинки png , jpg , gif:

Скромница | Попугайчик (мульт) | Ёжики (мульт) Будущая мама, Беременная (мульт) | Художник (мульт) | Брачующиеся Свадьба (мульт) | Палатка | Трава | | |

Праздники:

Дата - год -цифры | Шаблон Эскиз открытки | День проектировщика | День гражданской авиации | День пьяного ёжика | Новый год Лошади | День художника | | | | |

День Рождения , Юбилей :

39 лет - ДР | 40 лет - ДР | | |

Богдана - текст | Божена | Божена - текст | Бьянка | Бьянка - текст | | | | |

Разное:

Выходной | Давай помиримся | Весы | Скорпион |
Движение фрагмента | Рамка-border | Эффект курсора |

Инфа:

Ваш комментарий:

Текст у курсора

Скрипт для html страницы с плавно перемещающимся за курсором текстом.

Эффект для оформления курсора на странице сайта с информационным текстом .

Обновление :

Для победителя | Новый год | Удачи |

Категории с примерами :

Облака, тучи(паттерн) | Мрамор(паттерн) | С Рождением внучки | С Рождением Племянника | С Рождением племянницы | Бенедикт | Бенедикт - текст | Арина |

Красиво написанные названия праздников на прозрачном фоне.

Клипарт png, картинки gif, паттерны, фоны, текстуры .

10 Популярных материалов

Информация о разделах

Файлы готовятся к загрузке:

Последние добавленные :

картинки png , jpg , gif:

Скромница | Попугайчик (мульт) | Ёжики (мульт) Будущая мама, Беременная (мульт) | Художник (мульт) | Брачующиеся Свадьба (мульт) | Палатка | Трава | | |

Праздники:

Дата - год -цифры | Шаблон Эскиз открытки | День проектировщика | День гражданской авиации | День пьяного ёжика | Новый год Лошади | День художника | | | | |

День Рождения , Юбилей :

39 лет - ДР | 40 лет - ДР | | | Богдана - текст | Божена | Божена - текст | Бьянка | Бьянка - текст | | | | |

Разное:

Выходной | Давай помиримся | Весы | Скорпион | Движение фрагмента | Рамка-border | Эффект курсора |

Инфа:

Ваш комментарий:

39 лет - ДР | 40 лет - ДР | | |

Богдана - текст | Божена | Божена - текст | Бьянка | Бьянка - текст | | | | |

Выходной | Давай помиримся | Весы | Скорпион |
Движение фрагмента | Рамка-border | Эффект курсора |