Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
 Аватар для TVPNERO
9 / 8 / 12
Регистрация: 29.03.2016
Сообщений: 1,154

Как сделать анимацию ?

22.10.2016, 20:18. Показов 878. Ответов 3
Метки css (Все метки)

Студворк — интернет-сервис помощи студентам
Нужно чтоб Второй блок(id block_two) выезжал справа налево закрывая собой Первый блок(id block_one ),при наведении мышки на Первый блок.

Интересует либо вариант кода на JS или CSS,без jQuery.

HTML5
1
2
3
4
5
6
<html>
<head>
 
<title>Транзишн</title>
 
<meta charset="utf-8">
CSS
1
2
3
4
5
6
<style>
#block_one{display: inline-block;width: 300px;height: 300px;background: yellow}
 
#block_two{display: inline-block;width: 300px;height: 300px;background: green}
 
</style>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
</head> 
<body>
 
 
<div id="block_one">Первый блок</div>
 
 
 
<div id="block_two">Второй блок</div>
 
 
    
</body>
</html>
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
22.10.2016, 20:18
Ответы с готовыми решениями:

Как с CountUp.js сделать анимацию?
Ссылка на скрипт: https://github.com/inorganik/CountUp.js Помогите разобраться новичку - как смонтировать скрипт в страницу?

Как сделать анимацию на сайте?
Здравствуйте друзья. Флеш вообще не знаю. Сейчас столкнулся с тем, что нужно сделать на сайте фотографии которые будут сменяться например...

Как сделать плавную анимацию height?
Привет. Создал страницу с верхним меню навигации. При прокрутке контента меню фиксируется и продолжает двигаться с экраном. Проблема...

3
Фрилансер
Эксперт PythonЭксперт JSЭксперт PHP
 Аватар для Azdeman
1871 / 1362 / 604
Регистрация: 12.01.2011
Сообщений: 5,470
22.10.2016, 21:13
Есть jQuery метод
JavaScript
1
animate({});
0
 Аватар для TVPNERO
9 / 8 / 12
Регистрация: 29.03.2016
Сообщений: 1,154
22.10.2016, 22:46  [ТС]
Azdeman, Интересует либо вариант кода на JS или CSS,без jQuery.
0
Фрилансер
Эксперт PythonЭксперт JSЭксперт PHP
 Аватар для Azdeman
1871 / 1362 / 604
Регистрация: 12.01.2011
Сообщений: 5,470
22.10.2016, 23:02
Цитата Сообщение от TVPNERO Посмотреть сообщение
Интересует либо вариант кода на JS или CSS,без jQuery.
https://learn.javascript.ru/animation
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
22.10.2016, 23:02
Помогаю со студенческими работами здесь

Сделать анимацию по примеру
имеется такой пример: http://livedemo00.template-help.com/wt_43436/#!/page_splash хотелось бы сделать такую же анимацию по движению влево...

Как зациклить мою анимацию ?
Как зациклить мою анимацию ? &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...

Как воспроизвести gif анимацию с первого кадра при перезагрузке страницы или перезагрузить изображение?
Есть некое изображение img.gif с анимацией логотипа длительностью 4 секунды. Оно подгружается на страницу в качестве прелоада, в виде...

Как сделать анимацию на js
Есть у меня изображение я хочу чтобы оно перемещалось каждые 20 миллисекунд я незнаю как это сделать помогите!!!

При нажатии на кнопку сделать анимацию загрузки
Есть кнопка &lt;button type=&quot;submit&quot; class=&quot;btn btn-lg btn-custom big&quot; onClick=&quot;yaCounter.reachGoal(''); return true; ga('send',...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru