Эффекты изображения веб-страницы - JavaScript? как еще?

Question

Я прошу выбрать мозги всех ваших веб-гуру.

У меня есть идея, которую я пытаюсь реализовать.

Я хочу отобразить на экране полдюжины картинок, скажем, в форме круга, и когда я наводю курсор мыши на одну с помощью мыши, она становится серой и белой в полноцветный, возможно, даже становится немного больше или генерирует эффект падающей тени, который остается, когда мышь находится над ним.

Хотя я не слишком потрепанный на VB6 и SQL Server, мой опыт веб-разработки охватывает далеко не только использование блокнота для создания необработанного HTML-кода для отображения избранных папок, ссылок на веб-сайты и документы и т. Д. В Active Desktop.

Итак, ребята, на какие сайты по ресурсам программирования я должен смотреть, например, на w3schools.com и, в частности, должен ли я использовать JavaScript или какой-то другой метод ... также было бы неплохо посмотреть на вызовы конкретных методов.

Мне не нужно «здесь ... попробуйте этот код», а затем 10 экранов кода для вырезания и вставки, я после советов, таких как «для позиционирования, посмотрите на www.thiswebpage.com и посмотрите в «XYZ» и «для эффекта затухания посмотрите метод ABC на JavaScript» или что-либо еще.

Заранее спасибо, гуру.

РЕДАКТИРОВАТЬ: 14/07/2009 - Просто подумал, что это может быть уместно. Я буду размещать страницы на веб-сайте Служб Google.

Кроме того, эффект исчезновения черно-белого изображения был не единственным, который я рассматривал, это была только одна возможность. Можно рассмотреть и другие приятные, тонкие эффекты.

Answer 1

То, что вы хотите реализовать, не должно быть таким уж сложным. Однако, если вы не знаете JS, то школы W3C - хорошее место для начала.

Вы также должны проверить Mootools . Это отличная структура для всех ваших потребностей JS. У них также есть несколько замечательных демоверсий, которые вы можете попробовать .

Answer 2

Для общих эффектов и отправной точки для этого типа пользовательского опыта: JQuery

Оттуда - исследуйте плагины jQuery, которые делают подобные вещи. Хорошие условия поиска могут быть карусели.

Answer 3

Raphaël - это очень хорошая библиотека Javascript, которая может делать все, что вы захотите. Например, у них есть демонстрации с тенями на изображениях и с поворотом изображения .

Answer 4

1. Изучите JS, вы можете узнать синтаксис из http://www.w3schools.com/JS/default.asp
2. Расширьте это знание статьями известных авторов, таких как Крокфорд .
3. Соль все это с изучением одной из ведущих структур (мне нравится Mootools ).
4. При выполнении шагов 1-3 кодируйте, кодируйте и делайте больше кодирования.

Answer 5

Вероятно, вы могли бы получить довольно похожий эффект, используя некоторую библиотеку JS, которая может красиво анимировать свойства CSS. Например, Scriptaculous и jQuery, вероятно, могут соответствовать задаче и должны быть просты в освоении.

Основная идея заключается в том, что у вас есть изображение в div. Прозрачность изображения может быть установлена ​​на 0,5, так что цвет фона div через него затеняется. Таким образом, вы можете получить эффект, похожий на черно-белое изображение, с правильным выбором фона.

Если вы хотите получить точный черно-белый эффект или что-то подобное, вам придется создавать черно-белые версии ваших изображений или использовать элемент холста HTML5 для ручного применения цветовых преобразований к изображениям. Это не будет работать в старых браузерах и Internet Explorer.

Answer 6

Для работы такого типа мне нравится использовать Scriptaculous . Он имеет ряд анимационных команд, которые просты в использовании. Вы можете запускать несколько эффектов параллельно на DIV, так что вы можете легко выполнять MOVE и SCALE эффект для одного и того же объекта, и он обрабатывает синхронизацию.

Вы можете делать все это с обычным старым JavaScript.

Вот пример ДВИЖЕНИЯ:

new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' });

Answer 7

Вам понадобится некоторая форма Javascript, и если бы я делал это, я бы посмотрел на библиотеку Script.aculo.us . (Немедленный эффект может быть достигнут с помощью CSS, но для постепенного затухания вам понадобится Javascript.)