Элементы становятся видны по мере приближения курсора через плагин onProximity Fade на jQuery
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
2#: Следующий код вставляйте в самый низ вашего CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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; } |
3#: Этот код в то место, где будет контент, к которому будет применяться данный эффект: 1) Для ссылок:
|
1 2 3 4 5 6 7 8 |
<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"> |
|
1 2 3 4 5 6 7 8 9 |
<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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
