EstherJS: вращение элементов на странице / Песочница / Хабр

EstherJS — скрипт, предназначенный для поворота, вращения элементов на странице в диапазоне от 0 до 360 градусов. В отличие от других популярных скриптов он способен вращать любые элементы на странице (слова, изображения, блоки и др.).

Скрипт является абсолютно кроссбраузерным, легок в использовании.

Поддержка браузерами:
Chrome, Safari, Opera, Firefox, IE7+

Предзагрузчик для сайта

Использование JavaScript версии скрипта

<!DOCTYPE html>
<html>
<head>
	<title>Идет загрузка</title>
	<meta charset='utf-8'>
	<script src='http://mdes.pro/js/esther.js'></script>
	<style>
		body {background-color:#000}
		div {
                 width:128px; height:128px; 
                 background:url('http://mdes.pro/img/load.png') no-repeat;
                 position: fixed; top: 33%; left:40%
               }
	</style>
</head>
<body>
	<div>
		
	</div>
	
	<script>

	var firstDiv = document.getElementsByTagName('div')[0];
	
	var j=0;
	setInterval(function(){
		j = j+0.9;
		deg(j, firstDiv);
	}, 10);
	
	
	</script>
<body>
</html>

Использование jQuery плагина

<!DOCTYPE html>
<html>
<head>
	<title>Идет загрузка</title>
	<meta charset='utf-8'>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src='http://mdes.pro/js/jquery.esther.js'></script>
	<style>
		body {background-color:#000}
		div {
		  width:128px; height:128px;
		  background:url('http://mdes.pro/img/load.png') no-repeat;
		  position: fixed; top: 33%; left:40%
		}
	</style>
</head>
<body>
	<div>
		
	</div>
	
	<script>
	
	var j=0;
	setInterval(function(){
		j = j+0.9;
		$('div').deg(j);
	}, 10);
	
	
	</script>
<body>
</html>

Пример для изображений

Использование JavaScript версии скрипта

<!DOCTYPE html>
<html>
<head>
	<title>Фото</title>
	<meta charset='utf-8'>
	<script src='http://mdes.pro/js/esther.js'></script>
	<style>
		body {background-color:#cbcbcb}
		img {width:300px; height:169px; border:3px solid #fff;
		-moz-box-shadow: 1px 1px 10px #000000;
		-webkit-box-shadow: 1px 1px 10px #000000;
		box-shadow: 1px 1px 10px #000000;
		position: fixed; top: 33%; left:40%}
	</style>
</head>
<body>
	<img id='one' src='http://mdes.pro/img/one.jpg' alt='image' />
	<img id='two' src='http://mdes.pro/img/two.jpg' alt='image' />
	<img src='http://mdes.pro/img/three.jpg' alt='image' />
	
	<script>

		var one = document.getElementById('one');
		var two = document.getElementById('two');
		deg(30, one);
		deg(230, two);
	
	</script>
<body>
</html>

Использование jQuery плагина

<!DOCTYPE html>
<html>
<head>
	<title>Фото</title>
	<meta charset='utf-8'>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src='http://mdes.pro/js/jquery.esther.js'></script>
	<style>
		body {background-color:#cbcbcb}
		img {width:300px; height:169px; border:3px solid #fff;
		-moz-box-shadow: 1px 1px 10px #000000;
		-webkit-box-shadow: 1px 1px 10px #000000;
		box-shadow: 1px 1px 10px #000000;
		position: fixed; top: 33%; left:40%}
	</style>
</head>
<body>
	<img id='one' src='http://mdes.pro/img/one.jpg' alt='image' />
	<img id='two' src='http://mdes.pro/img/two.jpg' alt='image' />
	<img src='http://mdes.pro/img/three.jpg' alt='image' />
	
	<script>
		$('#one').deg(30);
		$('#two').deg(230);
	</script>
<body>
</html>

Инструкция к использованию jQuery плагина

 // [1] - выбираем элемент на странице
$('#element').deg(30); // добавляем ему метод .deg($val)
// $val - это числовое значение от 0 до 360 (возможны числа > 360)
// если будет передан текстовый параметр, то $val = 0

Инструкция к использованиюJavaScript версии скрипта

var element = document.getElementById('#element'); // находим DOM элемент
deg(30, element); // передаем в функцию два параметра ($val, DOM элемент)