jQuery вращающаяся текстовая анимация (воссоздание эффектов css3)

122
12

Кто-нибудь знает, есть ли плагин jquery, который делает что-то похожее на этот эффект? http://tympanus.net/Tutorials/CSS3RotatingWords/index5.html

Мне нравится эффект, но мне нужно, чтобы он был совместим с IE7 или, по крайней мере, просто отображал текст для этих вращающихся слов в IE9/8/7

спросил(а) 2020-03-12T01:40:15+03:00 1 год, 1 месяц назад
1
Решение
96

Добавьте это на страницу (возможно, в отдельный файл js), после jQuery

(function($){
$.fn.rotate = function(params){
return this.each(function(index, el){
var defaults = {
text : [],
interval : 2000
};

var options = $.extend({}, defaults, params);
var i = 0;

if(options.text.length){
setInterval(function(){
i = i < options.text.length -1 ? ++i : 0;
$(el).fadeOut(function(){
$(this).text(options.text[i]).fadeIn();
});
}, options.interval);
}
});
};
})(jQuery);

Чтобы использовать его, просто сделайте

$(selector).rotate({ 
text: ['text1', 'text2'] // an array of strings
interval: 2000 // Optional. number in milliseconds, I've put default as two seconds
});

Взгляните на скрипку: http://jsfiddle.net/U9ZTa/1/

вы можете изменить его в соответствии с вашими потребностями. Эффект затухания должен работать на всех браузерах IE6+.

И вы можете добавить эту анимацию css в современные браузеры, если хотите...

ответил(а) 2020-03-12T01:54:59.075151+03:00 1 год, 1 месяц назад
44

Это может помочь - простой текстовый ротатор jQuery: http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

Возможно, вам придется настроить это, чтобы иметь тот же эффект на ссылку, которую вы предоставили.

ответил(а) 2020-03-12T01:40:15+03:00 1 год, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема