Плавне заміна одного зображення іншим з використанням спрайту css
Використання відтворення зображення дуже легко виконати за допомогою CSS. Задаємо елементу фонове зображення, а потім в його псевдо елементі: hover змінюємо background-image. Найкращим способом буде суміщення обох зображень в одне і використання зсуву в background-position. Така техніка називається спрайтом CSS. А якщо нам потрібно плавно замінювати одне зображення на інше без різких зрушень?
Рішення завдання полягає у використанні додаткового елемента поверх оригіналу з нульовим значенням властивості opacity і значенням властивості background-position, встановленим в потрібне значення. Потім в псевдо елементі: hover плавно змінюємо прозорість. Є три методи зробити вказане дію. Покажемо на прикладі маленької стрілочки.
Спосіб перший (розумний прогрес)
Помістимо елемент span в оригінальний елемент. Даний елемент span буде відображати активований стан. Так, зайва розмітка - погано, але нам потрібен додатковий елемент, а псевдо елемент не підтримує переходи в більшості браузерів.
Стрілка використовує заміщення зображень CSS і розташування фону в позицію за замовчуванням.
Тут використовується відносне позиціонування для елемента span. який буде позиціонуватися абсолютно з тим же самим розміром. Положення фону буде зрушуватися на місце для зміни зображень. Його прозорість встановлюється в нуль і будуть використовуватися трансформації CSS3 для розміщення його на місце.
Потім при активації елемента змінюється прозорість:
Спосіб другий (на піку технологій)
Єдина причина, по якій ми використовуємо елемент span - на момент написання уроку тільки Firefox 4 підтримував трансформації для псевдо елементів. Логічно припустити, що в майбутньому WebKit і інші браузери також будуть їх підтримувати. Ми можемо змінити розмітку наступним чином:
А код CSS практично такий же, тільки ми використовуємо: after замість span:
Спосіб третій (підтримуємо напрацювання)
Код CSS майже такий же, як і для вище зазначених методів, але істотно спрощений, так як ми не використовуємо псевдо класи і трансформації.
jQuery буде управляти загасанням. Спочатку ми приховуємо елемент span. потім приєднуємо функції для обробки подій mouseenter і mouseleave через функцію hover для реалізації загасання.
Всі три способи використані на сторінці демонстрації.
5 останніх уроків рубрики "CSS"
Невеликий ефект з інтерактивною анімацією букв.
Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.
Експеримент: анімовані SVG літери на базі бібліотеки anime.js.
Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Експериментальний скрипт розкривається навігації.
в хромі варіант з jQuery не оре.
Він то оре то не оре сам пробував, якщо відразу навести на jQuery то оре а якщо погратися з 1 і 2 прикладом і навести курсором на jQuery то не працюватиме
Добре, мені сподобалося!
У кульгавого 1 спосіб працює норм, 2 не плавно, 3 спосіб то працює, то ні. В інших браузерах норм, IE як завжди.
У кульгавого 3 спосіб перестає працювати якщо на стрілку швидко навести і прибрати, курсор миші, кілька разів поспіль.
art_reklama_com
У кульгавого все 3 способи працюють нормально
Денис Ніканоров
нижній працює плавно, але коли я просто по "смикав" курсором по всьому листу, перестав працювати взагалі потім. Віднесу я це на смітник :) Нехай той майстер доробить кнопку "jQuery" і щоб після натискання працювала так-же як в перший раз!
в Chrome працює, на Internet Explorer 9 покаже другу і третю кнопку, на Firefox проблема вказана згори. На мою Firefox-ом більшість користуються ще, так що я почекаю поправку, а сам щас зайнятий своїм сайтом.
gigantvirus
не працює IE6.
IE6 вже забути треба :)) та й взагалі IE НЕ браузер, а "перевертень" сайтів))
народ. а навіщо взагалі використовувати span? помоему можна обійтися так: .strelka
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!