Уроки по PHP
JavaScript
Уроки по HTML
Дизайнерам
СЕОшникам
РазноеТребования к сайтам в последнее время очень сильно выросли, сейчас люди хотят видеть не просто удобный и красивый сайт, но и живой, чтобы в нем постоянно что-то двигалось и выпадало. Как правило, стоимость сайтов с красивой и продуманной анимацией на порядок выше, чем стоимость статичного сайта. Для этих целей в библиотеки jQuery есть метод animate. С его помощью мы можем плавно менять css-свойства объектов, тем самым создавая анимацию.
Сейчас мы сделаем простой пример, который будет перемещать и скрывать наш логотип. Выглядеть это будет примерно так:
Исходный код с комментариями:
<html>
<head>
<title>jQuery анимация - метод animate | Дизайн студия OX2</title>
<script type="text/javascript" src="http://ox2.ru/lib/jquery-1.11.0.min.js"></script>
<style type="text/css">
#img {
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<img src="http://ox2.ru/images/fronted/logo-ox2.gif" alt="Компания OX2" id="img" />
<script type="text/javascript">
/**
* Функция двигаеь картинку с id равным img
*/
function animation() {
$('#img').animate({
left: '800px', //Двигаем картинку влево на 800 пикселей
top: '500px', //Двигаем картинку вниз на 500 пикселей
opacity: '0', //Скрываем картинку
}, 1200); //Длительность анимации 1.2 сек.
}
</script>
<button onclick="animation()">GO</button>
</body>
</html>
Как видно из текущего примера картинка один раз улетела, и второй раз кнопка не сработала. Чтобы мы могли многократно перемещать наш логотип, нам нужно при каждом нажатии на кнопку Go, возвращать начальные значения css. Для этого воспользуемся методом css.
Для начала демка:
Исходный код:
<html>
<head>
<title>jQuery анимация - метод animate | Дизайн студия OX2</title>
<script type="text/javascript" src="http://ox2.ru/lib/jquery-1.11.0.min.js"></script>
<style type="text/css">
#img {
position: absolute;
top: 30px;
left: 0px;
opacity: 1px;
}
</style>
</head>
<body>
<button onclick="animation()">GO</button>
<img src="http://ox2.ru/images/fronted/logo-ox2.gif" alt="" id="img" />
<script type="text/javascript">
/**
* Функция двигаеь картинку с id равным img
*/
function animation() {
/**
* При вызове функции устанавливаем
* начальные значения элемента с id - img
*/
$('#img').css({
top: '30px',
left: '0px',
opacity: '1'
});
$('#img').stop() //Останавливаем анимацию если она запущена
.animate({
left: '800px', //Двигаем картинку влево на 800 пикселей
top: '500px', //Двигаем картинку вниз на 500 пикселей
opacity: '0', //Скрываем картинку
}, 1200); //Длительность анимации 1.2 сек.
}
</script>
</body>
</html>
Комментарии (Написать комментарий)
Комментарий:
как писать противоположенную сторону слову TOP и LEFT пробовал RIGHT не получается
Заполните все поля
Написать комментарий