ЭНЦИКЛОПЕДИЯ СОВРЕМЕННОГО САЙТОСТРОЕНИЯ

Лучшее Анимация ячейки таблицы

Тема в разделе "Код JavaScript", создана пользователем Мефистофель, 10 июн 2016.

  1. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    Всем привет, господа хорошие.
    Созрел вопрос по анимированию одельных ячеек таблицы. Всего их 4. Моя задача - заставить их появиться через заданный интервал времени после загрузки страницы. Вот код странички с одним основным элементом - таблицей 2х2. белые ячейки нужно заставить плавно появиться через 1-2 секунды после загрузки страницы. Та ячейка, что слева внизу, должна появиться снизу (меняя прозрачность с 90% до 5%). Такой же эффект (одновременно) и ячейка, расположенная справа вверху. На первой секунде на экране будет только синий (#203A66) цвет, экран будет разбит на 4 визуальных блока, разделенных границами ячеек. после анимации логотипа (он будет делать оборот в 360 градусов сразу с первой доли секунды загрузки страницы) в центре, начнут появляться ячейки 2 и 3 (описано выше). Как это реализовать, какие способы лучше использовать? Стоит ли делать позиционирование отдельных блоков на странице или можно работать с ячейками? Прочитано много материала, так что в голове каша. Нужно полностью готовое решение, не просто ссылка на учебник по Jqwery или css. Вот, собственно, код:

    HTML:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
     
  2. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    1. Добавляем в код любой js фрейморк с эфектами анимации, как вариант - jquery. В head вставляем скрипт подключения этой библиотеки:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    2. Добавляем кодировку, а то тестовый пример некорректно отображается в браузере:
    3. Ищем справочник по эффектам Jquery.

    4. Добавляем крипт с инициализацией эффекта для определенного id элемента. Например, используя этот мануал - http://jqbook.net.ru/jquery/Effects
     
    Последнее редактирование: 11 июн 2016
  3. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Вот готовый, работающий пример. В котором анимация проявления ячейки #box1
    Перед этим в стилях устанавливаем атрибут скрытия этого элемента:
    #box1 {
    display: none;
    }

    Скрипт инициализации запуска анимации:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    Рабочий пример:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
     
  4. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Варьируя параметр show изменяем время выполнения анимации. В этом примере проявление ячейки занимает 4 сек:
    <script>
    $("#box1").show(4000);
    </script>

    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
     
  5. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Ну а дальше все зависит от фантазии и метода анимации....
     
  6. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Надо верстать на дивах, а не в таблице, что бы можно было сделать анимацию блока снизу вверх. Ячейку перемещать вряд ли получится.

    Предварительно надо будет в стилях для этого блока сместить его вниз и скрыть, к примеру. А потом, анимацией выводить в нужное место.