За последние 24 часа нас посетил 13021 программист и 1287 роботов. Сейчас ищут 724 программиста ...

Горизонтальная лента событий

Тема в разделе "HTML и CSS", создана пользователем artoodetoo, 20 май 2015.

  1. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Это простейшие вещи, состоящие из изменения параметра, сдобренного свойством transaction. Это именно транзакции, переходы.
    А есть CSS-animation, с покадровой разметкой, именно покадровой. Совершенно другой синтаксис и принцип действия. И там уже, по крайней мере года 3 назад, без JS нельзя было красиво что-то запилить. JS нужен был как минимум для смены классов, чтобы переключать анимации.

    Добавлено спустя 1 минуту 15 секунд:
    Вот, наведи мышку на логотип справа сверху. Это именно анимация: http://it-nation.ru/

    Добавлено спустя 3 минуты 49 секунд:
    А так да, сама анимация описана только в CSS: http://it-nation.ru/templates/it-nation_1.0.2/css/logo.css
     
  2. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
    Не понял что ты хотел сказать, если честно ) Вот аж в 2006г люди делали нечто выглядящее как JS-слайдер: http://www.cssplay.co.uk/menu/gallery_click.html

    Возвращаясь к моим баранам, суть задачи: навелся/кликнул —получил следующий уровень меню (который был, но прятался).

    Кто-то может заслуженного пивка попить, но боится славы, видимо.
     
  3. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    То, что css-transaction и css-animation это разные вещи. Я говорил про второе, ты приводил в пример первое. Вот и все.
     
  4. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
    Жаль, что желающих не нашлось.
    Мне бы вообще найти годного товарища на перспективу, потому как сам я верстать не люблю и позиционируюсь как server-side developer. С версталой мы бы могли взаимовыгодно сотрудничать.
     
  5. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
    Вот результат самоудовлетворения: http://jsfiddle.net/artoodetoo/0tsgojtn/

    [​IMG]

    Техника появления под-меню при клике на чистом CSS подсмотрена здесь: http://stackoverflow.com/a/25991472/272885

    Суть метода в том, что картинка это button, а у кнопки есть состояние button:focus. То есть получаем фиксированное состояние.
    Ну а .submenu:hover присутствует для того, чтобы под-меню не спряталось в момент финального клика. А то сначала теряется focus у кнопки и под-меню прячется, не давая кликнуть по ссылке :) Очень забавный эффект!
     
  6. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    А шкала не должна появляться разве для месяцев?
     
  7. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
    Изначально предполагалось. То что видишь это какбы приближение к желаемому результату. Я уже писал, что верстка нагоняет на меня тоску. Хочется делегировать это специалистам.

    Предполагаю, что разметка может остаться именно такой:
    Код (PHP):
    1. <ul class="timeline">
    2.  
    3.   <li> 
    4.     <button><img alt="" src="http://lorempixel.com/output/animals-q-c-100-100-1.jpg"></button>
    5.     <ul class="submenu">
    6.         <li>[url="#"]Jan[/url]</li>  
    7.         <li>[url="#"]Feb[/url]</li>
    8.         <li>[url="#"]Mar[/url]</li>
    9.         <li><span>Apr</span></li>  
    10.         <li>[url="#"]May[/url]</li>
    11.         <li>[url="#"]Jun[/url]</li>
    12.         <li><span>Jul</span></li>
    13.         <li>[url="#"]Aug[/url]</li>
    14.         <li>[url="#"]Sep[/url]</li>
    15.         <li>[url="#"]Oct[/url]</li>
    16.         <li>[url="#"]Nov[/url]</li>
    17.         <li>[url="#"]Dec[/url]</li>
    18.     </ul>
    19.     <em>2000</em>
    20.   </li>
    за счет стилей при выделении года должна проявляться новая детализация временно́й шкалы — месяцы года.

    Профи опять обосрались?
     
  8. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Тебе бы на форум верстальщиков с этим делом, вот что я скажу. Тут как-то все в основном серверсайдеры же, не только ты.
     
  9. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
  10. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Предыдущее было лучше. Текст на боку - это не очень круто. А еще сбрасывается при скролле.