Двигающийся фон на сайте в зависимости от положения мыши

Иногда может понадобиться сделать фон сайта, который будет немного двигаться в зависимости от положения курсора мыши. Для этого нужно использовать CSS и JavaScript. Ниже вы видите полностью рабочий скрипт и верстку страницы чтобы у вас получился фон сайта, который будет двигаться создавая эффект параллакса.

<HTML>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
<style type="text/css">
html {
height: 100%;
overflow:  hidden; 
}
body {
	padding: 0;
	margin: 0;
	background: url(images/iceland.jpg) -100px -100px no-repeat; /* Путь к изображению и размер смещения в пикселях */
	transition: background-position .5s ease-out;
	background-size: 110%; /* Делаем фон на 10% больше основного окна, чтобы не было пустоты с боков */
   }

main {
    width: 100%;
    min-height: 50%;
    display: block;
    margin: auto;
    background: rgba(0,0,0,0.3);
    padding: 0px;
    color: white;
    top: 25%;
    position: absolute;
    text-align: center;
   }
   
   main .textin {
	position: relative;
	margin: auto 0;
	text-align: center;
	top: 20vh;
	font-size: 50pt;
   }
</style>
</head>

<body>
 
<script type="text/javascript">
(function(){
  var body = document.body,
      startX = -100,
      startY = -100,
      w = document.documentElement.offsetWidth,
      h = document.documentElement.offsetHeight;

body.addEventListener('mousemove', function(evt){
    var posX = Math.round(evt.clientX / w * startX)
    var posY = Math.round(evt.clientY / h * startY)
    body.style.backgroundPosition = posX + 'px ' + posY + 'px'
  })
})()
</script>
 
  <main>
  <div class="textin">ЭТО КРУТАЯ НАДПИСЬ НА ДВИГАЮЩЕМСЯ ФОНЕ</div>
  </main>
 </body>
</HTML>

Скорее всего это далеко не самый оптимальный и не лучший вариант реализации двигающегося фона, но пока ничего лучше я не придумал. Если придумаю вариант по-лучше, то обязательно здесь улучшу скрипт и верстку.

Сейчас ипользуется только чистый JavaScript и CSS, без дополнительных библиотек. Как вы видите в комментариях все доступно объяснено. Изображение можете взять любое, но чем у него будет выше разрешение, тем красивей фон будет смотреться, а путь к нему указывается через body {background}. Пользуйтесь, может кому-то пригодится такой вариант реализации движений фона с картинкой или изображением.

Демонстрация скрипта двигающегося фона на сайте в зависимости от положения мыши

Найти и скачать html-файл, javascript, и css-стили можно по ссылке.

Будем дорабатывать возможности двигающихся фонов и обновлять имеющийся материал.

Частный вебмастер

Двигающийся фон на сайте в зависимости от положения мыши

Демонстрация скрипта двигающегося фона на сайте в зависимости от положения мыши

Добавить комментарий

Похожие материалы

Популярные посты в блоге