GrAndSE's blog

Бажаєете прекрасного? Користуйтесь javascript. Відбиття

Неодноразово бували випадки, коли здавалося б чогось не вистачає на сторінці. Здавалося б і дизайнер попрацював добре: приємні кольори, якісно зроблена графіка. Однак чогось не вистачає. Якесь все "мертве".

А буває і навпаки: дизайн не дуже цікавий, здавалося б шаблонний, а викликає приємне враження.

Пошук чогось такого, щоб викликало захоплення, вирізняло проект зпоміж інших - завдання не легке. І іноді не треба бути дизайнером, для пошуку таких речей. Для веб іноді достатньо додати трошки JavaScript

Що у нас сьогодні

Дуже популярним в часи web 2.0 є додавання на сайт якоїсь графіки з накладеними ефектами. Добре, коли ви маєте можливість обробляти всю графіку і накладати на неї ефекти. Однак, що робити з тими елементами, які можуть бути додані користувачем? Наприклад, власні фотографії у галерею? Чи то зображення для статті, що додається адміністратором сайту?

Зазвичай, перетворення зображення може виконуватись на сервері, однак далеко не завжди це добре та легко. Сьогодні мені б хотілось поговорити про такий web 2.0 ефект як дзеркальне відбиття зображення. Бачили таке на логотипах? Гадаю, що неодноразово. А в веб-галереях? Рідше, однак знайти можна. Як гадаєте найкраще його зробити?

Можна писати сотні рядків коду на будь-якій серверній мові програмування, однак легше скористатись маленькою javascript-бібліотечкою - reflection.

Як користуватись

Після того, як Ви завантажили бібліотеку постає питання: як мені скористатись нею? В архіві присутні документація та тестова сторінка для прикладу. Однак для спрощення роботи дам декілька рекомендацій.

В більшості випадків достатньо підключивши бібліотеку додати до зображень яким необхідно додати ефект в тег img атрибут class="reflect". Таким чином буде додане стандартне дзеркальне відбиття для всіх зображень, що мають такий клас. Однак є ще два класи, які дозволяють маніпулювати параметрами відбиття: rheight та ropacity (висота "дзеркала" та ступінь непрозорості відбиття). Особливіcть лише в тому, що ці класи останніми двома символами мають містити значення від 1 до 100, що буде вказувати процентне відношення ефекту для обраного елементу від максимального. Наприклад, ropacity100 - непрозоре зображення, а ropacity50 - напівпрозоре. зрозуміло, що для висоти маскимумом є висота самого зображення, а для для ropacity - непрозоре зображення.

Також можливо робити пряму роботу з зображеннями з (що буває необхідним під час динамічної генерації чи додавання контенту). Для додавання ефекту скористайтесь функцією:

де image - id зображення, а options об'єкт виду: { height, opacity }. Наприклад:

Позбавитись від дзеркального відбиття можна за допомогою функції:

в якій параметр image є id зображення.