Flashlight – без использования flash

Опубликовал Администратор 20.08.2010 в рубрике css | 0 комментариев

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Иногда я нахожу необычные примеры для написания уроков. Вот один из таких – это использование обычного формата изображения *.jpg в качестве луча фонарика. Чтобы придать нужный эффект, нам понадобится jQuery. Но сначала необходимо создать обычный html-документ: index.html. Не стану объяснять как это сделать … думаю, вы и сами знаете.

Начну как обычно с того, что должно быть в шапке нашей страницы. Вставим сразу наши скрипты, а также небольшой css-код.

<!-- Обещанный jQuery -->
<script type="text/javascript" src="jquery.js"></script>

<script>
$(document).ready(function(){
$().mousemove(function(e){
var backx = e.pageX - 250;
var backy = e.pageY - 250;
var backpos = backx+'px '+backy+'px';
$("body").css('background-position',backpos);
});
});
</script>

<!-- И немного css для того, чтобы определить цвет фона, выставить наш *.jpg фонарик и установить стиль основного текста -->
<style type="text/css">
body { margin:0; background:#1c1c1c url(img/flashlight.jpg) 50% 50% no-repeat; color:#1c1c1c; text-align:center; }
#wrap { width:100%; height:100%;}
#text { width:600px; margin:50px auto 0; text-align:left; }
#text p { margin:20px 0 0 20px; padding-left:10px; border-left:3px solid #1c1c1c; font:bold 18pt Georgia; }
</style>

<div id="wrap">
<div id="text">
<p>Ваш текст находится здесь</p>
</div>
</div>

На этом мой небольшой урок окончен. Я сомневаюсь, что кому то понадобится такой эффект на сайте. Но возможно ресурсы страшилок будут в восторге от таких эффектов. Представьте, вы сидите перед компьютером одни дома в кромешной темноте и читаете Стивена Кинга, подсвечивая при этом фонариком текст. Напоминает как дети под одеялом книжки читают.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!