JS. Смещение фона в зависимости от смещения курсора мыши - JavaScript, Ajax

MrQuestion · 07.05.2016, 16:16

Здравствуйте. Вопрос касается вот этого сайта http://hellomonday.com/ и подобных ему.
Заметьте, если я перемещу мышь вправо, фон так же сместится вправо. Если влево, то влево.
Хочу научится делать так же. Из какого раздела JS эта функция родом? И функция ли это? И где найти материал, чтобы научиться делать подобные вещи?
Спасибо

pompiduskus · 08.05.2016, 00:21

У меня комп старый. Как только открыл сайт по ссылке, комп чуть не умер. =)
посмотреть пример так и не смог.

Но вот такой пример думаю пойдет ?

http://pompiduskus2.0fees.us/public/...-movement.html

Код:

<html>
<head>
    <meta charset="utf-8">
    <title>color-change-by-mouse-movement</title>
    
    <style type="text/css">
        
        #wrapper{}

        #color_element{
            width: 900px; height: 150px; margin: 150px auto 150px auto; 
            display: block; background-color: #000; text-align: center;
            line-height: 150px; color: #fff; text-shadow: 0 0 3px #000;
            font-size: 20px; 
        }

    </style> 


    <script type="text/javascript"> 

        // --------------------------------------------------------
        var color_element;
        var color_element_style;
        var color;

        var _X_ = 0;
        var _Y_ = 0;
        
        // --------------------------------------------------------
        window.addEventListener("load", function(){

            color_element = document.getElementById("color_element");
            color_element_style = color_element.style;

            document.onmousemove = function(event){
                changeColor( event );
            }


        });

        // --------------------------------------------------------
        function changeColor( evt ){

            _X_ = parseInt(evt.clientX / 3);
            _Y_ = parseInt(evt.clientY / 3);

            color = "rgb("+_X_+","+_Y_+",0)";

            color_element_style.backgroundColor = color;
            color_element_style.marginLeft      = _X_+"px";
            color_element_style.marginTop       = _Y_+"px";

            color_element.innerHTML             = 
                " margin-left:"+_X_+"px, marginTop:"+_Y_+"px | color: "+color;

        }

        // --------------------------------------------------------

    </script>

</head>

<body>

    <div id="wrapper">

        <div id="color_element"> </div>

    </div>

</body>
</html>

MrQuestion · 08.05.2016, 12:07

О, да! Пример то, что надо. Спасибо, Помпидускус))

pompiduskus · 08.05.2016, 13:16

Цитата:

Сообщение от MrQuestion

О, да! Пример то, что надо. Спасибо, Помпидускус))

На здоровье! Вам как фактурку выслать или налом ?

щЮЮтка

Naive · 08.05.2016, 15:33

в примере фон не просто смещается, он еще и в 3d крутится.
+ он попилен на несколько слоев, в итоге и получается такой красивый эффект.

07.05.2016, 16:16	#1
MrQuestion Пользователь Регистрация: 16.08.2015 Сообщений: 40	JS. Смещение фона в зависимости от смещения курсора мыши Здравствуйте. Вопрос касается вот этого сайта http://hellomonday.com/ и подобных ему. Заметьте, если я перемещу мышь вправо, фон так же сместится вправо. Если влево, то влево. Хочу научится делать так же. Из какого раздела JS эта функция родом? И функция ли это? И где найти материал, чтобы научиться делать подобные вещи? Спасибо

08.05.2016, 15:33	#5
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	в примере фон не просто смещается, он еще и в 3d крутится. + он попилен на несколько слоев, в итоге и получается такой красивый эффект. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
про мышь - отобразить величины смещения курсора мышки (Delphi 7)	дмитрий12123	Помощь студентам	6	18.09.2012 15:53
смещение курсора на 1px	xslamerx	Общие вопросы Delphi	3	06.06.2012 23:28
Обработчик события для смещения указателя мыши по окну программы...	vedro-compota	Мультимедиа в Delphi	8	15.06.2010 06:08
Происходит смещение фона на сайте при первом посещении браузером Firefox.	Burturg	HTML и CSS	1	06.07.2009 23:00
Смещение фона в таблице при внутреннем отступе (padding)	vitmos	HTML и CSS	1	30.05.2009 16:56

08.05.2016, 12:07	#3
MrQuestion Пользователь Регистрация: 16.08.2015 Сообщений: 40	О, да! Пример то, что надо. Спасибо, Помпидускус))