Главная » Файлы » Прочие скрипты » jQuery
Анимация текста при наведении курсора мышки на jQuery
23.06.14, 11:28:54

Скачать файл

Скачать файл



Интересная сборка эффектов аминирования текста при наведении курсора мышки

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/jquery.moatext-min.js"></script>  
  <script type="text/javascript"><!--
  $(function(){
  $(".moamix1").moatext({effects:["lens","wave"]});
  $(".moamix1w").moatext({effects:["lens","wave"],parser:jQuery.fn.moatext.parser_byword});
  $(".moamix2").moatext({effects:["lens","wave","opacity"]});
  $(".moafunc").moatext({hover:[
  function(target){jQuery(target).css({
  color: "#FF0000",
  fontWeight: "bold"
  });},
  function(target){jQuery(target).css({
  color: "#000000",
  fontWeight: "normal"
  });}
  ]});
  $(".omikuji").css({opacity:"0.0"})
  .eq(Math.floor(Math.random()*3))
  .css({opacity:"1.0"})
  .moatext({
  effects:["opacity"],
  oneway:true,
  values:{opacity:{base:"0.0"}}
  });
  $(".moaoptions").moatext({
  effects: ["lens","wave","opacity"],
  values:{
  "opacity": {
  "base": "1.0",
  "enter": "0.1",
  "leave": "1.0"
  },
  "wave": {
  "enter": ["-50px","20px"]
  }
  },
  duration:2000,
  easing:"swing"
  });
  $(".smiley").moatext({
  effects:["lens","wave"],
  action_type: "hover"
  });
  });
  // -->  
  </script>


Далее текст, который необходимо анимировать, прописываем следующим образом:

1) Для эффекта Lens:
Код
<div class="moatext_lens">
Здесь ваш текст
</div>


2) Для эффекта Wawe:
Код
<div class="moatext_wave">
Здесь ваш текст
</div>


3) Для эффекта Opacity:
Код
<div class="moatext_opacity">
Здесь ваш текст
</div>


4) Для эффекта Lens and Wave:
Код
<script type="text/javascript" language="JavaScript"><!--
  $(function(){
  $(".moamix1").moatext({effects:["lens","wave"]});
  });
-->
</script>

<div class="moamix1">
Здесь ваш текст
</div>


5) Для эффекта Lens and Wave(animate by word):
Код
<script type="text/javascript" language="JavaScript"><!--
  $(function(){
  $(".moamix1w").moatext({effects:["lens","wave"],parser:jQuery.fn.moatext.parser_byword});
  });
-->
</script>

<div class="moamix1w">
Здесь ваш текст
</div>


6) Для эффекта Lens, Wave and Opacity:
Код
<script type="text/javascript" language="JavaScript"><!--
  $(function(){
  $(".moamix2").moatext({effects:["lens","wave","opacity"]});
  });
-->
</script>

<div class="moamix2">
Здесь ваш текст
</div>


7) Для эффекта Original functions:
Код
<script type="text/javascript" language="JavaScript"><!--
  $(function(){
  $(".moafunc").moatext({hover:[
  function(){$(this).css({
  color: "#FF0000",
  fontWeight: "bold"
  });},
  function(){$(this).css({
  color: "#000000",
  fontWeight: "normal"
  });}
  ]});
  });
-->
</script>

<div class="moafunc">
Здесь ваш текст
</div>


8) Для эффекта Greeting:
Код
<script type="text/javascript" language="JavaScript"><!--
  $(function(){
  $(".moaoptions").moatext({
  effects: ["lens","wave","opacity"],
  values:{
  "opacity": {
  "base": "1.0",
  "enter": "0.1",
  "leave": "1.0"
  },
  "wave": {
  "enter": ["-50px","20px"]
  }
  },
  duration:2000,
  easing:"swing"
  });
  });
-->
</script>

<div class="moaoptions">Здесь ваш текст</div>


9) Для эффекта Japanese smiley:
Код
<script type="text/javascript" language="JavaScript"><!--
  $(function(){
  $(".smiley").moatext({
  effects:["lens","wave"],
  action_type: "hover"
  });
-->
</script>

<div class="smiley">Здесь ваш текст</div>


Осталось лишь залить скрипт из прикреплённого архива в папку js

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: при, курсора, Анимация, на, JQuery, мышки, наведении, текста
Просмотров: 485 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: