Marquee горизонтальный текстовый свиток с эффектом выцветания?

StackOverflow https://stackoverflow.com/questions/2782154

  •  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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top