марта 29 2018
+1

Как реализовать интересный логотип сайта на основе fontawesome и animate.css

yuran    29 марта 2018, 03:29    в избранное в избранном    7 комментариев
Вопросы, проблемы и их решения   
Народ, есть сайт на altocms, правда там его автор много чего передел и заточил под себя. Мне понравилась реализация вращающего сердца из иконки fontawesome и я попытался реализовать на своем сайте. Ни хрена не получается. С автором общался в онлайне насчет этого.... ну или я слишком тупой или он не желает просто так помогать казалось бы в трех строчках кода. Вот его ответ на мои вопросы:
Я сделал так: 
1. Подключил библиотеку: 
<link type="text/css" rel="stylesheet" href="/путь к файлу/animate.min.css" /> 
2. Прописал код: 
<a class="site-header-title" href="http://liverp.loc/">Живи <i class="fas fa-heartbeat"></i> RolePlay</a> 
3. В скрипте прописал каждые 5 секунд вращать: 
jQuery(document).ready(function() { 
setInterval(function() { 
$('.site-header-title i').animateCss('flip', function() { 
// Do somthing after animation 
}); 
}, 5000); 
}); 
Иконка сердца из библиотеки: 
https://fontawesome.com/


Ну я у себя на сайте прописал все и подключал js этот его и отдельным файлом и в шаблоне пробовал — нифига не работает. Выводится сердечко черного цвета и нихрена не вращается...
Кто знает как конкретно реализовать такой логотип или кому интересна эта тема в принципе — прошу комментировать и если есть возможность помочь реализовать это дело.
Да, вот еще ссылка на то что нужно помимо того, что я озвучил https://github.com/daneden/animate.css

Спасибо.
Теги:

Похожие статьи

  • Логотип тема Experience
    Как и где вобще заменить стандартную запись и лого в теме Experince? И главное отредактировать title сайта, так что бы оно не выводилось на главной вместо логотипа
  • Использование иконочного шрифта Font Awesome в дизайнерских программах
    Это короткая заметка о том как использовать Font Awesome в фотошопе, люстре, кореле и т.д. например если вы используете эти иконки в дизайне. Что такое Font Awesome и зачем он нужен можно почитать здесь.
  • Итоги конкурса на логотип.
    Итак, победителем стала Alyona с логотипом: Были представлены варианты в различных разрешениях, компоновках, цветовых гаммах, а также прислан вектор. Вот некоторые из них:
  • Конкурс на логотип Alto CMS
    Юзер LeX натолкнул на неплохую мысль: а почему бы не объявить конкурс на логотип Alto CMS? Условия конкурса: 1) Срок подачи заявки на конкурс — до 28 апреля 2013 2) На конкурс принимаются изображения в формате PNG...

7 комментариев

0
Как?
0
Как? Мне кажется что Sersar мне что то не договорил.... Хотя бы то, что нужно подключить сам шрифт font-awesome.min.css и наверняка что то еще... Светлые головы отзовитесь, буду благодарен за любую помощь.
+1
animateCss где у вас описан?
Внимательно прочитать надо секцию Usage на https://github.com/daneden/animate.css

где у вас вот такой код?
"$.fn.extend({animateCss:function(animationName,callback){var animationEnd=(function(el){var animations={animation:'anima
tionend',OAnimation:'oAnimationEnd',MozAnimation:'mozAnimationEnd',WebkitAnimation:'webkitAnimationEnd',};for(var t in animations){if(el.style
[t]!==undefined){return animations[t];}}})(document.createElement('div'));this.addClass('animated '+animationName).one(animationEnd,function()
{$(this).removeClass('animated '+animationName);if(typeof callback==='function')callback();});return this;}});jQuery(document).ready(function(
){setInterval(function(){$('.site-header-title i').animateCss('flip',function(){});},5000);});"
0
Было только вот это в подключаемом js файле...
jQuery(document).ready(function(
){setInterval(function(){$('.site-header-title i').animateCss('flip',function(){});},5000);});"

Дописал сверху остальное и все заработало. Спасибо огромное за наводку.
+1 

cat index.html


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link type="text/css" rel="stylesheet" href="animate.css-master/animate.css"/>
<link type="text/css" rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body">

<div>
    <a  class="site-header-title"href="http://liverp.loc/">Живи <i class="fa fa-heartbeat"></i> RolePlay</a> 
</div>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="jacomo.js"></script>

</body>
</html>




cat jacomo.js 


$.fn.extend({animateCss:function(animationName,callback){var animationEnd=(function(el){var animations={animation:'animationend',OAnimation:'oAnimationEnd',MozAnimation:'mozAnimationEnd',WebkitAnimation:'webkitAnimationEnd',};for(var t in animations){if(el.style[t]!==undefined){return animations[t];}}})(document.createElement('div'));this.addClass('animated '+animationName).one(animationEnd,function(){$(this).removeClass('animated '+animationName);if(typeof callback==='function')callback();});return this;}});jQuery(document).ready(function(){setInterval(function(){$('.site-header-title i').animateCss('flip',function(){});},5000);});
Отредактирован:
0
С файлами тоже все получилось, спасибо огромное!
0
А сам скрипт запускается? Функция setInterval в принципе срабатывает?
Проверь первым делом это, повесь туда alert или вывод чего-нибудь в консоль.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.