Як зробити крутяться кнопки соцмереж
Привіт усім читачам блогу SEOjedi! Нещодавно прикрутив собі на блог нові, стильні кнопки соцмереж і трохи “оживив” їх. В цей же день почали надходити питання, на скільки це складно, зробити кнопки соціальних мереж, що крутятся і, як я це зробив. Вирішив відповісти всім відразу – це абсолютно не складно навіть для початківців, робиться швидко і не гальмує сайт. Ну і заодно, корисна стаття вийшла.
А тепер всі по порядку. Так, як блог у мене навчальний, то постараюся максимально детально розписати, що і за що відповідає в коді. Приклад кнопок ви можете побачити у верхній частині блогу. Робиться це за допомогою CSS. Спочатку наведу приклад коду, а потім розпишу що до чого в ньому. Відразу попереджаю, що в прикладі присутні мої посилання на соцмережі і картинки, вам треба буде змінити на свої!
Крутяться кнопки соціальних мереж
#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8 s ease-in-out; -webkit-transition: all 0.8 s ease-in-out; -o-transition: all 0.8 s ease-in-out; -ms-transition: all 0.8 s ease-in-out; transition: all 0.8 s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
Рекомендую до прочитання: Основи HTML (частина 4)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8 s ease-in-out; -webkit-transition: all 0.8 s ease-in-out; -o-transition: all 0.8 s ease-in-out; -ms-transition: all 0.8 s ease-in-out; transition: all 0.8 s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } |
Основні пояснення по коду розташованому між тегами :
- Псевдоклас :hover – визначає стиль елементу при наведенні на нього курсору миші, але при цьому елемент ще не активований, простіше кажучи кнопка миші не натиснута. Ну і там визначаємо, що буде відбуватися з нашої кнопки при наведенні на неї курсора. В нашому випадку через властивість background додаємо напівпрозорість transparent;opacity. Властивість opacity задає значення прозорості і варіюється від 0 до 1, де нуль це повна прозорість елемента, а одиниця, навпаки, непрозорість.
- Властивість moz-transition – спеціальна властивість для створення ефекту анімованого переходу при зміні css-властивостей елемента.
- Властивість webkit-transition – затримка перед виконанням анімаційного переходу.
Рекомендую до прочитання: Twidium – сервіс для массфолловинга
Ну і далі по ходу руху все для обертання іконок, 0.8 s – час обертання, які можна змінювати. Rotate(360deg) – на скільки градусів повертатися, можна змінювати. Це в принципі і все, що змушує крутитися кнопки соціальних мереж. Тобто стиль у нас готовий, залишилася справа за малим-знайти самі кнопки і правильно їх прописати.
Велика кількість безкоштовних іконок соціальних мереж можна знайти і безкоштовно завантажити тут. Прописуються за допомогою HTML-коду, я детально описував цей процес у цій статті. Тому тут просто наведу приклад:
Код кнопки посилання Twitter
1 2 3 |
|
Як ви розумієте, вам треба буде змінювати URL-и соціальної мережі і шляхи до картинки. У коді можна перейменувати тайтли на свої. Якщо хочете прибрати якусь соціалку, то просто видаліть непотрібні рядки. Якщо треба додати іншу соціалку, просто допишіть рядки.
З приводу установки всього цього добра. Можу запропонувати два способи:
Рекомендую до прочитання: Оптимізація сайту під соціальні мережі.
Ну ось? як то так! Як говориться, підіб’ємо бабки. Приклад коду є, де і як шукати іконки ви вже знаєте, залишається тільки вписати акаунти ваших соціалок. Якщо щось не буде виходити, пишіть в коментарях або запитуйте через форму зворотного зв’язку в Контактах. Удачі!