Marquee горизонтальный текстовый свиток с эффектом выцветания?
-
03-10-2019 - |
Вопрос
Я ищу решение для одной строки горизонтального текста в горизонтальном тексте с эффектом выцветания с помощью JavaScript (jQuery, если это возможно). Как карусель текстовой прокрутки. Все поиски Google дали мне прокрутку эффектов, но без эффекта выцветания.
Я знаю, что это можно сделать во флэш-памяти, но я избегаю его, если есть и другие решения.
Любая помощь будет очень ценится.
Решение
Один из способов сделать это, это создать шатер и плавающий полупрозрачный образ на краю:
Любой из тех, кого вы нашли, в порядке или используют этот встроен в jQuery: http://remysharp.com/demo/marquee.html.
Вот угасающий образ: http://www.collylogic.com/scripts/fade.png.
Вот Источник, где вы можете видеть, на самом деле см. Эффект выцветания На вышеуказанном изображении
Преимущества этого сделать так, чтобы вы не делаете дорогой обработку в JavaScript. У вас также есть более широкий сорт прокрутки, чтобы выбрать без необходимости беспокоиться о том, когда или где выцветать.
Недостатком является то, что полупрозрачные PNG нужно взломать для работы в IE6. Но поскольку это просто Candy Candy, я бы представила, что эти немногие пользователи IE6 не будут влиять на это многое.
Другие советы
<html>
<head>
<style>
#marquee{
position: absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function marqueePlay(){
$("#marquee").animate(
{
left: $(window).width() - $("#marquee").width(),
opacity: 0
}, 10000, function(){
$("#marquee").css("left", 0);
$("#marquee").css("opacity", 1);
marqueePlay();
}
);
}
marqueePlay();
});
</script>
</head>
<body>
<div id="marquee">Weee...Weee...Duh!</div>
</body>
</html>