движение картинок

@subbota1984 · Регистрация: 19.11.2009

Студворк — интернет-сервис помощи студентам

как сделать чтобы картинка юзалась как здесь - http://kiracompani.ru/
если можно то по поподробней обясните...

@Hurtsok · 14.09.2010, 03:11

Все очень просто.
Вот тебе рабочий пример( можешь просто рисунок заменить на свой и увидишь эффект).

HTML5
1
2
3
<div id="back">
  <div class="im"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
*{
margin:0px;
padding:0px;
}
 #back .im{
 background:url(tire20.png) no-repeat ;
 height:110px;
 margin-top:0px;
}
#back .im:hover{
 background:url(tire20.png) no-repeat ;
 height:110px;
 margin-top:10px;
}

@ПростоЯ · 14.09.2010, 08:10

Сообщение от subbota1984

как сделать чтобы картинка юзалась как здесь - http://kiracompani.ru/
если можно то по поподробней обясните...

Можно сделать анимацию при помощи jQuery. Вот пример. Если подходит, то там есть исходники на скачку.

@Hurtsok · 14.09.2010, 08:50

зачем для такой банальной задачи подрубать целую библиотеку??

@ПростоЯ · 14.09.2010, 08:57

Сообщение от Hurtsok

зачем для такой банальной задачи подрубать целую библиотеку??

Это просто пример как можно еще реализовать то, что требуется. А если понять jQuery (что не совсем сложно), то можно сделать очень много красивых штучек на сайте.

@Crudelis · 14.09.2010, 14:30

Сообщение от Hurtsok

Все очень просто.

в вашем примере кнопки просто будут прыгать вниз при наведении на них, а человеку нужно чтоб они двигались вниз медленно как на примере, здесь без jqery не обойтись, либо джавы

@Hagrael · 14.09.2010, 14:40

Можно так:

HTML5
1
2
3
4
5
<div id="block">
    <div id="content">
        <img id="image">
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#block {
    height: 220px;
}
#image {
    height: 200px;
}
#content {
    position: relative;
    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s;
}
#content:hover {
    top: 20px;
}

Должно работать, но в Chrome насколько я знаю такие вещи работать не очень хорошо (с большииими глюками), так что протестите впервые на нём. А так да, на JS можно написать.

@Crudelis · 14.09.2010, 14:53

Css 3... его не все браузеры ещё поддерживают)

@Hurtsok · 14.09.2010, 16:11

Сообщение от Crudelis

в вашем примере кнопки просто будут прыгать вниз при наведении на них, а человеку нужно чтоб они двигались вниз медленно как на примере, здесь без jqery не обойтись, либо джавы

В примере там тупо css. и во вторых здесь не смысла java юзать может, js?

. Ведь это ой какие разные языки... И опять же повторюсь ради такого пустяка нет смысла подрубать библиотеку.

@Hagrael · 14.09.2010, 16:20

Hurtsok, конечно! Если что можно самому функцию написать)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@subbota1984 0 / 0 / 0 Регистрация: 19.11.2009 Сообщений: 53

	движение картинок 13.09.2010, 22:50. Показов 20694. Ответов 9 Метки нет (Все метки) как сделать чтобы картинка юзалась как здесь - http://kiracompani.ru/ если можно то по поподробней обясните... 0

@Hurtsok bigMatherHacker 112 / 81 / 12 Регистрация: 18.08.2010 Сообщений: 237
	14.09.2010, 08:50
	зачем для такой банальной задачи подрубать целую библиотеку?? 0

@Crudelis Шаровик затейник 696 / 445 / 78 Регистрация: 06.05.2010 Сообщений: 1,109
	14.09.2010, 14:53
	Css 3... его не все браузеры ещё поддерживают) 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	14.09.2010, 16:20
	Hurtsok, конечно! Если что можно самому функцию написать) 0