Главная » Файлы » Прочие скрипты » jQuery
Ссылки и объекты проявляются по мере приближения курсора через плагин onProximity Fade на jQuery
23.06.14, 09:34:28

Скачать файл



Замечательный плагин, который позволяет ссылкам или же любым другим объектам плавно проявляться и затухать по мере приближения курсора

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

Установка:

После /head на нужных страницах вставляйте:
Код
<script src="/js/jquery.onProximityFade-1.0.0.js" type="text/javascript"></script>
  <script language="Javascript" type="text/javascript">
  opf = {  
farOpacity : 0.05,  
farDistanceMax : 100,  
closeOpacity : 1,  
closeDistanceMin : 0,  
className : "fadeBox"
  };  
  </script>
  <style>
  .col {  
float: left;  
width: 400px;  
padding: 100px;  
line-height: 30px;  
background-color: inherit;  
  }  

  #boxes {  
width: 400px;  
  }  
  #boxes li {  
border: solid 1px #cfcfcf;  
float: left;  
display: block;  
padding: 5px;  
margin: 0 30px 30px 0;
height: 80px;  
width: 80px;  
background-color: #efefef;  
  }  
  </style>


Следующий код в то место, где будет контент, к которому будет применяться данный эффект:

1) Для ссылок:
Код
<div class="col">
  Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br>
  Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br>
  Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br>
  Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br>
  Здесь любой ваш видимый текстt <a href="Ссылка" class="fadeBox">Название ссылки</a> <a href="Ссылка" class="fadeBox">Название ссылки</a><br>
  </div>
  <br clear="all">


2) Для любого другого контента (К примеру, квадратные области):
Код
<div class="col">
  <ul id="boxes">
  <li class="fadeBox">Текст в квадрате</li>
  <li class="fadeBox">Текст в квадрате</li>
  <li class="fadeBox">Текст в квадрате</li>
  <li class="fadeBox">Текст в квадрате</li>
  <li class="fadeBox">Текст в квадрате</li>
  </ul>
  </div>


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

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: объекты, ссылки, Через, курсора, ПО, плагин, мере, onProximity, проявляются, приближения
Просмотров: 348 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: