Выделить горизонтальную текстовую прокрутку с эффектом затухания? - PullRequest
Новая
       23

Выделить горизонтальную текстовую прокрутку с эффектом затухания?

2 голосов
/ 06 мая 2010

Я ищу решение для горизонтальной прокрутки текста Marquee в одну строку с эффектом затухания с использованием javascript (если возможно, jquery). Как карусельный текстовый свиток. Все поиски в Google дали мне эффект прокрутки, но без эффекта затухания.

Я знаю, что это можно сделать мгновенно, но я избегаю этого, если есть другие решения.

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

3 голосов
/ 06 мая 2010 
<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>
1 голос
/ 06 мая 2010

Один из способов сделать это - создать выделение и переместить полупрозрачное изображение по краю:

Любой из найденных вами подходит, или используйте этот встроенный в jQuery: http://remysharp.com/demo/marquee.html

Вот выцветшее изображение: http://www.collylogic.com/scripts/fade.png

Вот источник, где вы можете увидеть, фактически, УВИДЕТЬ эффект затухания на изображении выше

Преимущества такого подхода состоят в том, что вы не выполняете дорогостоящей обработки в javascript. У вас также есть более широкий выбор прокрутки, не беспокоясь о том, когда и где исчезать.

Недостатком является то, что полупрозрачным png-файлам нужен взлом для работы в IE6. Но так как это просто приятный глаз, я бы предположил, что на этих немногих пользователей IE6 это сильно не повлияет.

...