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

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

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

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

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

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

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <link type="text/css" rel="stylesheet" href="css/style.css" />
    <style type="text/css">
    table, td, th
    {
    border:3px solid #203A66;
    }
    th
    {
    background-color:#203A66;
    color:white;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>ќтступы</title>
    </head>
    <body style="height: 100% background:#203A66">
    <table bordercolor="#203A66" style='position: absolute; top: 0px; left:0px; width:100%; height:100%' border=0px; >
    <tr height=50% ;><td id='box1' style="background:#203A66" width=50%></td><td id='right_top' width=50%></td></tr>
    <tr height=50%><td id='left_bottom' width=50%></td><td id='box2' width=50% style="background:#203A66"></td></tr>
    </table>
    </body>
    </html>
     
    #1
  2. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    1. Добавляем в код любой js фрейморк с эфектами анимации, как вариант - jquery. В head вставляем скрипт подключения этой библиотеки:
    Код:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    2. Добавляем кодировку, а то тестовый пример некорректно отображается в браузере:
    3. Ищем справочник по эффектам Jquery.

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

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

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

    Скрипт инициализации запуска анимации:
    Код:
    <script>
    $("#box1").show("slow");
    </script>
    Рабочий пример:
    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <link type="text/css" rel="stylesheet" href="css/style.css" />
    <style type="text/css">
    table, td, th
    {
    border:3px solid #203A66;
    }
    th
    {
    background-color:#203A66;
    color:white;
    }
    
    #box1 {
    display: none;
    }
    
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>ќтступы</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body style="height: 100% background:#203A66">
    <table bordercolor="#203A66" style='position: absolute; top: 0px; left:0px; width:100%; height:100%' border=0px; >
    <tr height=50% ;><td id='box1' style="background:#203A66" width=50%></td><td id='right_top' width=50%></td></tr>
    <tr height=50%><td id='left_bottom' width=50%></td><td id='box2' width=50% style="background:#203A66"></td></tr>
    </table>
    
    <script>
    $("#box1").show("slow");
    </script>
        
    </body>
    </html>
    
     
    #3
  4. Jonny

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

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

    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <link type="text/css" rel="stylesheet" href="css/style.css" />
    <style type="text/css">
    table, td, th
    {
    border:3px solid #203A66;
    }
    th
    {
    background-color:#203A66;
    color:white;
    }
    
    #box1 {
    display: none;
    
    }
    
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>ќтступы</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body style="height: 100% background:#203A66">
    <table bordercolor="#203A66" style='position: absolute; top: 0px; left:0px; width:100%; height:100%' border=0px; >
    <tr height=50% ;><td id='box1' style="background:#203A66" width=50%></td><td id='right_top' width=50%></td></tr>
    <tr height=50%><td id='left_bottom' width=50%></td><td id='box2' width=50% style="background:#203A66"></td></tr>
    </table>
    
    <script>
    $("#box1").show(4000);
    </script>
           
    </body>
    </html>
     
    #4
  5. Jonny

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

    Сообщения:
    748
    Рейтинг:
    143
    Ну а дальше все зависит от фантазии и метода анимации....
     
    #5
  6. Jonny

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

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

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