Картинки которые можно двигать мышкой
Вроде бы недавно писалось, но на базе древнего кода, так что работать толком не будет ни в новых IE 10-11, ни в новой линейке Firefox, а может, и в других браузерах, других под рукой нет.
Старый заслуженный код корёжить не хочется, сделаем движение картинки за курсором мыши по-современному и простому. Для скорости разработки реализуем только движение изображения за курсором, ведь при необходимости можно в функции getClickPosition определить более сложные правила для установки требуемых координат картинки ( picture.style.left и picture.style.top ), например, как-то зависящие от расстояния между рисунком и курсором мыши, как в том коде с круговым движением.
Задачу решим за 3 простых шага.
1. Поставим картинку, которая будет бегать за курсором поверх остального контента. Правда, она будет при этом занимать место в макете сайта. Зато стиль задаст заодно поведение картинки, чтобы она начинала двигаться через нужное время и не делала это слишком интенсивно:
2. Поставим в теге яваскрипта обработчик события, связанного с движением курсора мыши:
3. В этом же теге следом напишем функции, которые умеют вычислять настоящее положение курсора мыши, может, мои и не самые лучшие:
Это всё, вот пример в работе.
В листинге предполагается, что картинка находится в той же папке, что и код, под именем thing.gif , в выложенном файле это не так.
Если надо адаптировать подобный код к браузерам без CSS3 — Prefix 3 рулит, подключите его до скрипта. Код проверен в 4 основных браузерах, сработал одинаково.
JavaScript, создающий эффект перетаскивания изображений.
В этом уроке мы рассмотрим работу скрипта JavaScript для сайта, создающего эффект перетаскивания изображений или надписей (текста).
Как работает данный скрипт? Ниже Вы видите три изображения (картинки). Нажмите левой кнопкой мыши на любое из этих изображений и переместите в любое место на экране монитора.
Таким же образом можно перемещать и текст. Попробуйте "потаскать" надпись ниже:
Перетащи этот текст!
Как практически реализовать работу данного скрипта на сайте? Давайте разберемся.
1. Создаём файл таблицы стилей drag.css или если на Вашем сайте уже есть таблица стилей просто дописываем в нее код Листинга 1:
Листинг 1.
Подключаем таблицу стилей к web-странице. Для этого прописываем код Листинга 2 между тегами <head> и </head>:
Листинг 2.
<link rel=»stylesheet» href=»ПУТЬ К ФАЙЛУ/drag.css» type=»text/css» />
Если Вы добавили стиль оформления (код Листинга 1) в существующую таблицу стилей, то этот шаг пропустите.
2. Создаем сам скрипт drag.js написанный на языке JavaScript. Для этого создаем обычный текстовый документ с расширение .txt , переименовываем его в drag.js , и размещаем в этом файле код Листинга 3:
Листинг 3.
var dragobject= ,
drag:function(e)
>,
moveit:function(e)
>
>
dragobject.initialize()
Подключаем JavaScript к web-странице. Для этого прописываем код Листинга 4 между тегами <head> и </head>:
Листинг 4.
<script language=»JavaScript» type=»text/javascript» src=»http://www.luksweb.ru/%D0%9F%D0%A3%D0%A2%D0%AC%20%D0%9A%20%D0%A4%D0%90%D0%99%D0%9B%D0%A3/drag.js»></script>
3. В том месте web-страницы, где Вы хотите вывести изображения, вставляем код Листинга 5:
Листинг 5.
У меня эти графические файлы называются: www.png, my.png и reb.png. Обратите внимание, что графические файлы сделаны в формате .PNG. Конечно можно использовать любой графический формат, например: .JPG или .GIF , но в данном случае удобнее использовать формат .PNG, так как изображению можно задать прозрачный фон (Transparency).
Если есть необходимость применить эффект перетаскивания к текстовому блоку, используйте код Листинга 6. Стиль оформления текста корректируйте на свое усмотрение.
Листинг 6.
<p style=»font-family: Times New Roman; font-size:25px;» align=»center»><strong >Перетащи этот текст!</strong></p>
Рисуем круг, движущийся вслед за курсором мыши
Сегодня мы с помощью canvas JavaScript нарисуем круг, который будет двигаться вслед за курсором мыши.
Основной подход
Прежде чем мы перейдем к коду, поговорим о том, как мы создадим круг, следующий за курсором мыши. Но сначала нам нужно нарисовать эту окружность:
Надпись на картинке: Круг нарисован без соблюдения масштаба.
Положение круга будет меняться в зависимости от того, где именно находится курсор мыши. Это означает, что при каждом изменении положения курсора мыши нам нужно перерисовывать круг:
Этот пример не такой уж сложный, чтобы разобраться в нем. Но это не значит, что нет ничего интересного “ за кулисами ”. Далее при рассмотрении JavaScript мы коснемся некоторых важных аспектов приведенного кода, которые вы, возможно, не поняли.
С чего начать работу?
Первое, что нам нужно — это страница, готовая к работе с canvas JavaScript . Если у вас еще нет ее, то поместите следующий код в пустую HTML-страницу :
Есть canvas JavaScript , который имеет идентификатор id со значением « myCanvas ». Для экономии времен, я предоставил вам две строки кода, необходимых для доступа к элементу canvas и его контексту рендеринга. Если все это для вас ново, уделите несколько минут и прочитайте статью « С чего начать работу с элементом Canvas ».
Рисуем круг
Первое, что мы собираемся сделать, это нарисовать круг. Внутри тега <script> добавьте следующий код после строки с переменной context :
Приведенный выше скрипт определяет функцию update , которая содержит код для прорисовки круга. Обратите внимание, что мы не только определяем функцию update , но и вызываем ее. Если вы просмотрите свою страницу в браузере, то увидите следующее:
Наш круг имеет радиус 50 пикселей и расположен в точке ( 100, 100 ). На данный момент, мы собираемся сохранить позицию круга фиксированной. Это не надолго, до тех пор пока мы не получим позицию курсора мыши в canvas с помощью методов JavaScript !
Получение позиции курсора мыши
Дальше нас ждет волшебство. Мы собираемся добавить код, работающий с мышью. Он состоит из двух частей. Первая часть отслеживает перемещение курсора мыши на холсте и сохраняет эту позицию. Вторая часть кода гарантирует, что позиция мыши учитывает позицию элемента canvas . В следующих двух разделах мы разберемся с обеими частями кода.
Прослушивание события мыши
Давайте посмотрим на код для первой части. Добавьте следующий код чуть выше функции update :
Этот код выполняет довольно простые вещи. Мы отслеживаем событие MouseMove на холсте. И когда это событие наступает, мы вызываем обработчик события setMousePosition :
Функция setMousePosition присваивает текущее горизонтальное и вертикальное положение курсора мыши свойствам mouseX и mouseY . Она делает это, опираясь на свойства clientX и clientY , предоставляемые MouseEvent .
Получение точных координат курсора мыши
Позиция курсора мыши, сохраненная в свойствах mouseX и mouseY , по умолчанию содержит координаты, заданные относительно левого верхнего угла окна браузера. Значения координат курсора мыши, которые мы имеем сейчас, неточные, так как не учитывает положение элемента canvas JavaScript .
Чтобы исправить это, у нас есть функция GetPosition :
Добавьте эту функцию в нижнюю часть кода, ниже функции update .
Эта функция применяется для передачи интересующей нас позиции в элемент. Затем она возвращает объект, содержащий координаты х и у . Мы воспользуемся этой функцией, чтобы выяснить, где на странице находится элемент canvas JavaScript , а затем скорректируем значения mouseX и mouseY .
Чтобы использовать функцию GetPosition и исправить значения mouseX и mouseY , внесите следующие дополнения и изменения, которые я выделил:
Теперь переменная CanvasPos хранит позицию, которую возвращает функция GetPosition . В обработчике событий setMousePosition мы используем значения х и у , возвращенные из canvasPos для коррекции значения, сохраненного с помощью переменных mouseX и mouseY .
Перемещение круга
В предыдущем разделе мы получили код курсора мыши и переменные mouseX и mouseY , хранящие текущее положение курсора мыши на холсте. Остается только подключить эти значения к нашему коду прорисовки круга внутри функции update, чтобы получить положение круга, отражающее позицию курсора мыши для рисования на canvas JavaScript .
Для начала преобразуем функцию update в объект обратного вызова requestAnimationFrame . Благодаря этому функция синхронизируется со скоростью рисования браузера ( около 60 раз в секунду ). Добавьте следующую выделенную строку в нижней части функции update :
Теперь нам нужно обновить код прорисовки круга, чтобы использовать значения mouseX и mouseY вместо фиксированной позиции ( 100, 100 ), которую мы определили первоначально. Внесите в выделенную строку следующие изменения:
После этого сохраните HTML-документ и просмотрите его в браузере. Посмотрите, что происходит при перемещении мыши по canvas JavaScript . Теперь наш круг повсюду будет следовать за курсором мыши:
Круг двигается вслед за движением мыши, но более ранние позиции круга не стираются. Это создает эффект рисования пальцем — не совсем то, чего мы добивались. Для решения этой проблемы перед прорисовкой круга на новом месте необходимо очистить весь холст.
Чтобы сделать это, добавьте следующую выделенную строку кода в функцию update :
Строка, которую мы добавили, содержит вызов метода clearRect , который отвечает за очистку всех пикселей холста. Для его применения нужно передать размеры области, которую нужно очистить:
Это гарантирует, что круг прорисуется на canvas JavaScript без каких-либо следов ранее нарисованной графики. На данный момент при предварительном просмотре страницы в браузере наш пример должен работать безупречно.
Зачем использовать requestAnimationFrame?
Весь код, связанный с рисунком, находится внутри функции update , которая циклично выполняет функцию requestAnimationFrame . Никакой анимации здесь нет. Мы просто перемещаем курсор мыши и обновляем позицию круга только, когда курсор перемещается. Учитывая все это, почему не весь код прорисовки присутствует в обработчике события MouseMove ? Это выглядело бы примерно так:
Если вы смогли сделать это изменение ( и полностью избавились от функции update ), наш пример все равно будет продолжать работать. Наш пример может работать так же, как requestAnimationFrame .
Причина кроется в помогающем нам браузере, который не делает лишнюю работу и выполняет « правильные » вещи, так как наша конечная цель. Когда дело доходит до рисования на canvas JavaScript , мы хотим быть синхронными с браузером в тот момент, когда он готов к прорисовке пикселей.
Событие MouseMove не имеет представления о том, когда браузер готов отобразить что-то на экране, так что наш обработчик события будет стараться заставить браузер нарисовать что-то на экране. Единственный способ избежать этого — использовать функцию requestAnimationFrame .
Мы разделили код обновления координат курсора мыши и код рисования на экране. Это гарантирует, что когда браузер будет готов, мы нарисуем новый круг. Когда круг будет нарисован, позиция курсора в этот момент будет максимально точна.
Вывод
Все это начиналось, как простой эффект. Теперь у нас есть круг, который следует за курсором мыши.
Картинка, двигующаяся за мышкой
Здравствуйте!
Есть div размерами, например, 900x100px.
В Div’e находится картинка, размером 100x100px.
Мне нужно сделать, чтобы она двигалась вместе с мышкой, когда курсор находится в div’e.
Скажите пожалуйста, как это сделать, или в каком направлении думать?
Вот что знаю на данный момент:
— используем событие onmousemove
— определяем координаты мышки, точкой отсчета берем див(не экран, в этом загвоздка)
— картинке делаем position: absolute по всей видимости
— говорим картинке где ей сейчас находиться (в этом также вопрос, как это сделать).
Буду благодарен за любые дельные советы и примеры.
Во время работы у меня замирает картинка, мышкой не пошевелить, из колонок и корпуса раздаётся писк.
Сначало это было во время игр, терепь стало и во время просмотря фильмов и тд.- Во время работы у.
спасибо огромное, начало положено! вот только есть баг, картинка вылезает за пределы дива, и функция срабатывает при наведении на саму картинку (она отталкивается от курсора вправо-вниз).
И координаты всетаки считаются от экрана, например поставил див по центру страницы, и картинка уже не у курсора
Добавлено через 31 минуту
Мне нужно чтобы именно от родительского элемента отсчет положения курсора начинался.
С учетом этого кода, гуглю как определить положение элемента от края экрана, безрезультатно
Добавлено через 20 минут
Да, прошу принять во внимание, что с js знаком очень и очень слабо, поэтому не ругайте пожалуйста за нубство плз
Добавлено через 30 минут
Данный вопрос, вообщем-то закрыт, появилась другая проблема, которую описал здесь:Почему картинка движется медленнее курсора?
masterok
А между прочим — это никакая не гифка, а абсолютно статичная картинка. Достаточно вам поставить курсор мышки в какой то части картинки, которая вы считаете движется и движение прекратится.
И еще подобные статичные картинки, которые в глазах некоторых могут двигаться.
Художник Kaia Nao. Участник конкурса «Иллюзия года 2012». Абсолютно статичное изображение звезды, кажется вращающимся.
Иллюзия создана фотографом любителем Робертом Брюсом Мюрреем III. Надпись уверенно наплывает на наблюдателя.
Хотя некоторые люди вообще не видят тут никакого движения.
Пару лет назад у меня в комментариях подписчики пытались докопаться до механизмов того, что происходит на этих картинках:
Понятно, что эти иллюзии эксплуатируют:
1) саккады — скачкообразные движения глаз:
2) нейросеть, которая выявляет признаки движения
— статически — по специфичным теням и размытостям
— динамически — по смене картинки (а она меняется из-за саккад, — цветовая усталость и инерция сетчатки)
3) разные восприятия в центральной зоне (куда глаз прямо сейчас смотрит — там разрешающая способность высокая) и в периферической (где мозг вынужден экстраполировать, опираясь на слабые признаки, например, на motion blur)
Картинки сделаны так, что:
1) глазу не за что зацепиться, поэтому саккады более частые
2) геометрия подобрана так, чтобы направлять саккады по нужной траектории (например, по кругу)
3) контрастные цвета и более-менее регулярная сетка — инерция сетчатки заставит играть картинку, создавая там блюр
Если остановить глаза и охватить взглядом всю картинку — то движение мгновенно исчезает. То есть, мы нейтрализовали и саккады, и экстраполяцию на достаточно высоком уровне.
Если только остановить глаза, — движение на периферии брезжит. То есть, примитивный слой нейросети, отвечающий за обнаружение движения, — подаёт сигналы, а дальний, отвечающий за осмысление, не получает опровержений.
Если принудительно двигать глазами гораздо быстрее, чем рефлекторные саккады, — движение рассыпается и тоже только брезжит. Это из-за того, что, во-первых, исчезает усталость сетчатки, а во-вторых, что вся картинка успевает побывать в центральном поле зрения, и у дальнего слоя нейросети появляется гораздо больше опровержений.
Если расфокусировать глаза — размылить взгляд, — то движение исчезает. Потому что размыливание оказывается сильнее, чем фиктивный motion blur на границах контрастных участков картинки. Нет блюра — нет признака движения. Нет признака движения — нет привлечения внимания — нет саккад, кстати.
Также, если картинку уменьшить до размеров, которые полностью попадут в центральное поле зрения, — движение тоже исчезнет.
Картинки которые можно двигать мышкой
Rainbow Wallpaper реагирует с движением мыши с различными пресетами и цветовыми эффектами, созданными / отредактированными HotCakeX
Не возражайте против логотипа, это низкое разрешение из-за ограничения по размеру, но обои сами по себе очень высокого качества. соответствует любому разрешению экрана.
Страница в ЯндексДиска. (4.703 MB)
Описание обоев, влияние на производительность,
детали для загрузки
« Обои Rainbow Mouse movement responsive | HotCakeX — действительно великолепные живые обои из Steam Wallpaper Engine Workshop для рабочего стола вашего компьютера, это может быть лучшая альтернатива вашим изображениям на рабочем столе Windows, которые вам абсолютно надоели, поэтому не стесняйтесь искать на нашем сайте, как не у нас вы сможете найти обои, которые вам подходят.
Заметка:
Обои Rainbow Mouse movement responsive | HotCakeX никоим образом не повлияют на производительность вашего компьютера или портативной компьютерной системы. Потому, что они будут появляться только тогда, когда вы находитесь на своем рабочем столе, и движок обоев автоматически остановится при переходе в ваш браузер или что-нибудь еще.
Отблагодари меня, поделись ссылкой с друзьями в социальных сетях: