В этой же статье я покажу схожий скрипт, но работать он будет немного по другому принципу. Его суть заключается во вращения объекта вокруг центральной оси, при этом вращение осуществляется так же с помощью курсора. Немного поразмыслив, я решил, что это можно наложить на обычный компас. Нашел подходящую картинку, немного поработал в Photoshop и все получилось. Результат можно посмотреть в примере ниже, а так же скачать исходники.
Ели вам понравилась данная идея, то дальше рассмотрим, как это интегрировать на свой ресурс.
Как обычно, сначала нужно добавить HTML код нашего компаса и будущей анимации.
<div id="compas"> <img src="arrow_c.png" class="arrow_c" > </div>
как ведите, код проще простого. Имеем родительский блок с ID compas, внутрь него просто добавлено изображение arrow_c.png, с помощью тега img и присваиваем класс arrow_c. В нашем случаи картинка - это стрелка, которая будет вращаться и лежит она в той же папке что и файл где добавляется код. Если отправите ее в какую-нибудь папку, то укажите правильно путь. Например, если добавите в папку images, то путь будет прописан так:
<img src="images/arrow_c.png" class="arrow_c" >
Далее черед стилей. Добавьте их в свой файл стилей, который имеет расширение *.css. Их тоже не много:
#compas{
width: 300px;
height:300px;
background: url(comp.png);
}
.arrow_c{position:absolute;}
- #compas - Родительский блок, задаем ему размеры опираясь на размеры нашей картинки самого компаса. В нашем случаи это 300 на 300 пикселей. Так же указан путь к этой самой фоновой картинке. У нас картинка лежит в той же папке где файл со стилями. Если вы ее поместите в какую-нибудь папку, то правильно укажите путь к ней.
- .arrow_c - Класс изображения. Тут всего один параметр - абсолютное позиционирование.
Теперь осталось добавить сам скрипт анимации, который и будет вращать нашу стрелку компаса, но перед этим нужно подключить библиотеку jQuery. Если такая же версия подключена ранее, то пропустите этот шаг.
Скрипт был найден на просторах интернета и является старым. Работает с версией библиотеки не выше второй.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Ну и сам скрипт, код которого добавляйте после библиотеки.
<script>
$(document).ready(function(){
$.fn.rotateImg = function(options) {
var defaults = {deg : 0};
var settings = $.extend( {}, defaults, options );
return this.each(function() {
var img = $(this);
var imgpos = img.position();
var x0, y0;
$(window).load(function() {
x0 = imgpos.left + img.width() / 2;
y0 = imgpos.top + img.height() / 2
});
var x, y, x1, y1, r;
$("html").mousemove(function(e) {
x1 = e.pageX;
y1 = e.pageY;
x = x1 - x0;
y = y1 - y0;
r = 180 + settings.deg - 180 / Math.PI * Math.atan2(y, x);
img.css("transform", "rotate(-" + r + "deg)");
img.css("-moz-transform", "rotate(-" + r + "deg)");
img.css("-webkit-transform", "rotate(-" + r + "deg)");
img.css("-o-transform", "rotate(-" + r + "deg)")})})}
function rand(a) {
return 50 + Math.floor(Math.random() * (a-200))}
var w = $(window).width(), h = $(window).height();
$.each(Array(1),function(indx, element){
$('.arrow_c').appendTo('#compas')
});
$('.arrow_c').rotateImg({deg : 0});
});
</script>
Особых настроек тут нет, в самом конце указаны класс и айди изображения и основного блока. Если решите поменять их название, не забудьте это сделать и в скрипте.
Все, больше ничего делать не нужно. Если все сделано правильно - результат не заставит себя ждать. Воплощение идеи в виде компаса, это чисто мое видение. Вы можете адаптировать материал под себя, конкретную задачу и полностью изменить подачу. Надеюсь материал этой статьи будет полезным для вас.
На этом все, спасибо за внимание. 🙂
