Скрипт reflection.js позволяет добавлять эффект зеркального отражения к изображениям на странице. Результат выглядит следующим образом:
Подключаем скрипт reflection.js в разделе head HTML-страницы
<script src="/reflection.js" type="text/javascript"></script>
а для изображений добавляем класс reflect
<img src="/image.jpg" class="reflect" alt="" />
По умолчанию размер зеркального отражения равен половине высоты изображения, а уровень прозрачности равен 50%. Чтобы изменить эти параметры, нужно добавить классы rheight и ropacity со значениями высоты и прозрачности:
<img src="/image.jpg" class="reflect rheight40 ropacity60" alt="" />
Зеркальным отражением можно управлять из скрипта:
добавить или изменить существующее отражение; height и opacity могут принимать значения от 0 до 1
Reflection.add(document.getElementById("imageID"), { height: 3/4, opacity: 2/3 });
удалить существующее зеркальное отражение
Reflection.remove(document.getElementById("imageID"));
изменить значения по умолчанию для высоты и прозрачности отражения; по умолчанию оба равны 0.5
Reflection.defaultHeight = height;
Reflection.defaultOpacity = opacity;
