Вместо transform
вы можете использовать margin-left
:
*{
margin: 0;
height: 0;
box-sizing: border-box;
}
body{
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
padding: 30px;
}
header{
height: 95vh;
background-image: linear-gradient(to right bottom,rgba(126,213,111,0.8), rgba(40,180,131,0.8)),url(../img/hero.jpg);
background-size: cover;
background-position: top;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}
.text-box{
position: absolute;
top: 30%;
left: 50%;
transform: translate(-40%,-50%);
}
.logo-box{
position: absolute;
top: 40px;
left: 40px;
}
.logo{
height: 35px;
}
.heading-primary{
color: #fff;
text-transform: uppercase;
}
.heading-primary-main{
letter-spacing: 35px;
font-weight: 400;
font-size: 60px;
animation-name: moveInLeft;
animation-duration: 4s;
animation-iteration-count: 3;
/*animation-delay: 3s;*/
}
.heading-primary-sub{
display: block;
letter-spacing: 17.5px;
font-weight: 700;
font-size: 20px;
}
@-webkit-keyframes moveInLeft{
0% {
opacity: 0;
margin-left: -100%;
}
100%{
opacity: 1;
margin-left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<header class='header'>
<div class='logo-box'>
<img src='img/logo-white.png' alt='logo' class='logo'>
</div>
<div class='text-box'>
<h1 class="heading-primary">
<span class='heading-primary-main'>Outdoors</span>
<span class='heading-primary-sub'>is where life happens</span>
</h1>
</div>
</header>
</body>
</html>
У Вас в основном есть две проблемы здесь:
Вы хотите, чтобы браузер смог получить асинхронные события от сервера веб-приложения, не опрашивая в жестком цикле.
Вы хотите, чтобы веб-приложение смогло получить асинхронные события от базы данных, не опрашивая в жестком цикле.
Для проблемы № 1
См. эти ссылки Википедии для типа методов, я думаю, что Вы ищете:
Править: 19 марта 2009 - Просто столкнулся с ReverseHTTP, который мог бы быть представляющим интерес для проблемы № 1.
Для проблемы № 2
Решение будет конкретным, для которой базы данных Вы используете и вероятно драйвер базы данных Ваше использование сервера также. Например, с PostgreSQL Вы использовали бы, СЛУШАЮТ и УВЕДОМЛЯЮТ. (И рискуя тем, чтобы быть вниз проголосовавшимся, Вы, вероятно, использовали бы триггеры базы данных для вызова команды NOTIFY на изменения в данных таблицы.)
Другой возможный способ сделать это - то, если база данных имеет интерфейс для создания хранимых процедур или триггеров, которые связываются с динамической библиотекой (т.е. DLL или .so файл). Затем Вы могли написать код сигнализации сервера в C или что бы то ни было.
На той же теме некоторые базы данных позволяют Вам писать хранимые процедуры на языках, таких как Java, Ruby, Python и другие. Вы смогли использовать один из них (вместо чего-то, что компилирует в машинный код, который DLL как C делает) для сигнального механизма.
Надежда, которая дает Вам достаточно идей начать.
Я полагаю, что должен быть некоторый путь, в конце концов, веб-приложение как Gmail, кажется, обновляет мой ящик входящих сообщений почти сразу после того, как новое электронное письмо было послано мне. Конечно, мой клиент постоянно не проверяет на обновления все время. Я думаю способ, которым они делают это с Ajax, но как Ajax может вести себя как удаленный вызов функции, который я не знаю. Мне было бы любопытно знать, как Gmail делает это, но что я больше всего хотел бы знать, то, как сделать это в общем случае с базой данных.
Посмотрите с wireshark когда-то... существует некоторый трафик Google, продолжающийся там вполне регулярно, это появляется.
В зависимости от Вашего DB триггеры могли бы помочь. Приложение, которое я записал, полагается на триггеры, но я использую механизм опроса, чтобы на самом деле 'знать', что что-то изменилось. Если Вы не можете передать изменение из DB, некоторый механизм опроса необходим, сказал бы я.
Просто мои два цента.
Ну, лучшим способом является триггер базы данных. Зависит от способности Вашего DBMS, который Вы не указали, для поддержки их.
Ре Ваше редактирование: путем приложения как Gmail делают это, на самом деле, с опросом Ajax. Установите расширение Firefox Данных Трамбовки для наблюдения его в действии. Прием там должен сохранить Ваш запрос опроса ослепляюще быстро в "никаких новостях" случаем.
К сожалению, нет никакого способа продвинуть данные к веб-браузеру - можно только когда-либо отправлять данные как ответ на запрос - это - просто способ, которым работает HTTP.
Ajax - то, что Вы хотите использовать хотя: вызов веб-сервиса однажды секунда не является чрезмерным, если Вы разрабатываете веб-сервис, чтобы гарантировать, что он получает небольшой объем данных, передает небольшое количество обратно и может работать очень быстро для генерации того ответа.