Приветствую вас дорогие друзья! В этом уроке я покажу как легко и просто сделать летающий на странице объект!
В качестве объекта может выступать абсолютно любой html тег на странице, например, это может быть какой-то блок, текст, картинка, видео ролик и так далее.
Как и во всех уроках по javascript, в конце статьи можно посмотреть работающий DEMO пример, а также скачать все файлы (картинки, скрипты и прочее).
В этом примере я буду использовать картинку – летающую машину.
У нашего объекта будут следующие параметры:
- Размах по высоте
- Размах по правому краю
- Размах от низа
- Размах по левому краю
- Скорость перемещения объекта
- Частота изменения положения на странице (интервал)
Теперь давайте разберемся что это за параметры!
С 1 по 4 – это значения css свойства – «Margin», проще говоря – это максимальное значение (длина) в пикселях, на которое объект будет отклоняться от исходного положения.
Пятый параметр – это скорость (плавность) перемещения объекта из этого места на странице в другое место.
Чем выше это значение, тем медленнее (более плавно) будет перемещаться объект.
Шестой параметр отвечает за то, как часто объекту будет присваиваться новое положение.
Например, если это значение равно 2000, значит, объекту будет присваиваться новое положение каждые 2 секунды (то есть он отлетает и останавливается – стоит 2 секунды и улетает снова).
HTML код:
<a href="/" target="_blank"><img id="fly_object" src="fly_object.jpg"></a>
CSS код:
#fly_object{
width: 320px;
height: 243px;
margin: 0 auto;
display: block;
border: 0;
}
Jquery код:
$(document).ready(function(){
function fly_object() {
var top = Math.round(Math.random() * (400 - 1) + 1);
var right = Math.round(Math.random() * (650 - 1) + 1);
var bottom = Math.round(Math.random() * (700 - 1) + 1);
var left = Math.round(Math.random() * (500 - 1) + 1);
$('#fly_object').animate({'margin': + top + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px'},1000);
}
setInterval(fly_object, 100);
});
Все эти параметры (6 параметров), для удобства, можно вынести в отдельные переменные – я не стал этого делать для большей наглядности.
Как видите, четыре первых параметра задаются случайным образом, то есть объект будет метаться по странице совершенно непредсказуемым образом.
В следующем уроке я покажу, как сделать простенькую игру на ловкость, где вам нужно будет убегать от какого-нибудь летающего зверька.
На этом у меня всё, теперь можете взглянуть на демонстрационный вариант и скачать все исходные файлы урока!
До следующих публикаций, удачи!
Demo пример
Скачать исходники
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.