lekksha / 932021.pilipenko.aleksei.lab10

Лабораторная работа №10. Волшебник

Задача

Необходимо показать фокус.

Результат

Для отладки JavaScript настоятельно рекомендуется использовать браузер Google Chrome. Корректная работа всего пройденного материала в других браузерах не гарантируется.

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

Фокус 1. Конферанс

Начинается все с занавеса.

Как делаем занавес: берем картинку, добавляем ее на страницу, растягиваем по ширине и высоте на всю страницу. Дальше идут особенности:

1. Независимо от размера экрана, нижняя часть занавеса всегда должна быть внизу страницы.
2. Картинка не должна деформироваться при изменении соотношения сторон. При этом она не будет помещаться в окно то по горизонтали, и именно так и должно быть - остатки должны уходить за пределы окна.
3. Скролл не должен появляться.
4. Занавес всегда должен быть центрирован по горизонтали.

Для того, чтобы успешно выполнить все дополнительные условия, вам нужно хорошенько разобраться с атрибутом background (а именно с backgound-size и background-position). Если вы сейчас услышали про эти свойства в первый раз - смело идите дальше и возвращайтесь к этой части, когда закончите все остальное.

При наведении мышью на занавес он должен немножко (на 5%) приподниматься, причем делать он это должен плавно в течение 0.2 секунд. При отведении мыши - опускаться назад (все так же плавно, с той же скоростью).

При нажатии на занавес он должен полностью подниматься в течение одной секунды. Конец фокуса.

Фокус 2. Да будет свет

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

Когда нажимаете (не отпуская кнопку мыши) на лампу, у нее опускается выключатель. Когда отпускаете кнопку - выключатель возвращается назад. Все это он, естественно, делает плавно, в течение 0.1 секунды.

Внимание: это задание - сложное (и вообще дополнительное), пожалуйста, пропустите его и делайте только тогда, когда сделали абсолютно все остальное.

При нажатии на лампу (независимо от того, двигается ли выключатель) включается свет, и все становится видно (плавно включается, 0.2 секунды). Вот как это выглядит.

Особенности исполнения этого фокуса:

1. Свет - это просто треугольник. В это непросто поверить, но на то это и магия. Как делать треугольники, вы уже точно знаете.
2. Свет полупрозрачный (opacity: 0.5). Все, кроме верхушки лампы, находится за светом.

Если все это у вас не получится сделать - не делайте. Если свет будет квадратным (или даже вообще зальет весь фон), а объекты будут находиться перед ним - пусть хотя бы так. Но как разберетесь со всем остальным - возвращайтесь и доделывайте, а то потеряете немножко баллов.

При повторном нажатии на лампу свет выключается, все также плавно (в течение 0.2 секунд).

Фокус 3. Кролик и его друзья

Наконец, настоящий фокус. А что, до этого были ненастоящие???

При нажатии на кролика он уезжает вниз (0.5 секунд), в шляпу, после чего из шляпы выезжает голубь (0.5 секунд).

При нажатии на голубя все просходит наоборот - голубь уезжает, а кролик выезжает. И так до бесконечности. Магия!

Допустим, пусть кролик уезжает, а потом надо еще раз нажать куда-нибудь (допустим, на шляпу), чтобы выехал голубь. Или используйте setTimeout. В общем, вариантов на самом деле много, сделайте как-нибудь, чтобы кролик и голубь катались туда-сюда и заменяли друг друга.

Обратите внимание, что если свет у вас закрывает кролика (как и должно быть), то с нажатием на кролика у вас будут проблемы: вы всегда будете тыкать в свет. С этим вам придется разобраться, без этого настоящим волшебником не стать.