Анимация на контейнере div

0

Я использую титтинг. Каждый твит представляет собой контейнер div (с идентификаторами: id = "tweet1", "tweet2" и т.д.), В котором есть несколько других элементов div в нем (эти divs определяют статус твита, дату, время, теги и т.д.). Все эти твиты содержатся в самом удаленном div, например, с id = "twitter-feed".

Структура такая же,

<div id="twitter-feed">....
    <div id="tweet1">....
        <div><div> //For image
        <div><div> // For status
    <div id="tweet2">....
        <div><div> //For image
        <div><div> // For status    
</div>

Я хочу оживить эти твиты слева направо, один за другим.

CSS имеет,

#twitter-feed {
position:fixed;bottom:0;left:0;width:100%;font-size:50px;Background-color:#CD5C5C;
}

#twitter-feed div {
position:relative;color:yellow;animation:mymove 50s infinite linear;-webkit-animation:mymove 50s infinite linear;   
}

@keyframes mymove
{
from {left:0px;} 
to {left:100%;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:100%;}
}

У меня также есть рабочий код javascript, который получает твиты и заполняет элементы div.

Но этот код дает результат как,

Tweet1....Animating from left to right...then New Line
Tweet2....Animating from left to right...then New Line

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

Я использую код из приведенной ниже ссылки. Javascript загружает твиты, и я изменил код CSS для # twitter-feed. Код, который извлекает твиты. Если вы посмотрите на скрипт Java, вы увидите, что твиты заполняются как div.

Пожалуйста помоги.

Спасибо, Peeyush

Теги:
containers
tweets

1 ответ

1

В основном вам нужно стилизовать его так, чтобы они вошли в линию. Вот что я думаю, что вы имеете в виду: http://jsfiddle.net/B6KbV/

Если это так, вам нужно css wise:

#twitter-feed {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    font-size:50px;
    Background-color:#CD5C5C;
    white-space: nowrap;
}
#twitter-feed div {
    display: inline;
    position:relative;
    color:yellow;
    animation:mymove 50s infinite linear;
    -webkit-animation:mymove 50s infinite linear;
}
@keyframes mymove {
    from {
        left:0px;
    }
    to {
        left:100%;
    }
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
 {
    from {
        left:0px;
    }
    to {
        left:100%;
    }
}

Вам нужно display: inline чтобы сохранить его на одной строке и в white-space: nowrap; для остановки перевода текста на следующую строку

Поделиться
  • 0
    Эй, спасибо за быстрый ответ. Я хочу почти то же самое. Но у меня не работает свойство display: inline. Я использую код из ссылки ниже. Javascript загружает твиты, и я изменил код CSS для # twitter-feed. Код, который извлекает твиты. Если вы посмотрите на скрипт Java, вы увидите, что твиты заполняются как div.
  • 0
    Извините, я не понимаю, извините за глупость. Что вы подразумеваете под дисплеем: встроенный не работает?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню