Послушно следующий за мышью background сайта выглядит аппетитно и подходит на роль вкусного веб-десерта. Сотворим сегодня такой движущийся фон на css:
Техническое задание:
- Установить в качестве фонового изображения выбранную картинку — «fon.jpg».
- Фоновое изображение должно растягиваться на всю ширину экрана, позиционируясь при этом по центру.
- При движении курсора мыши фоновое изображение должно плавно двигаться вслед за мышью, на расстояние не превышающее 15% от ширины изображения при движении курсора по горизонтали, и 15% от высоты изображения при движении курсора по вертикали.
Ингредиенты: HTML, CSS, JavaScript, Jquery
Рецепт приготовления:
1. Для начала создадим html-файл, в тело которого добавим теги <section></section> и подключим файл со стилями «moving_background.css»:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<link href="moving_background.css" rel="stylesheet">
<title> Движущийся фон </title>
</head>
<body>
<section></section>
</body>
</html>
2. В файле со стилями зададим стили для body. Помимо нулевых отступов для body следует определить высоту 100% и спрятать все элементы, которые будут вылазить за пределы body c помощью свойства overflow: hidden.
body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
3. Следующим вкусным слоем css-файла являются стили для section. В качестве background для section установим выбранное изображение, у меня оно называется «fon.jpg», центрируем изображение с помощью свойства position: center и масштабируем его до ширины section при помощи свойства background-size: cover.
section{
background: url(fon5.jpg) no-repeat;
background-position: center;
background-size:cover;
}
Раз уж мы растягиваем изображение до размеров section, неплохо бы определить размеры этого section. Так как мы планируем спрятать от пользователя некоторую часть изображения и показывать ее только при движении курсора мыши, то предлагаю растянуть section до 115% ширины и 115% высоты браузера пользователя. Поэтому определим высоту и ширину section свойствами: height:115vh и width:115vw. Кроме этого предлагаю сразу добавить эффект анимированного движения заднего фона с помощью свойства transition: all 300ms ease:
section{
height:115vh;
width:115vW;
background: url(fon5.jpg) no-repeat;
background-position: center;
background-size:cover;
transition: all 300ms ease;
}
4. На этом этапе предлагаю сделать паузу и удостовериться, что фоновое изображение действительно занимает всю ширину браузера.
5. Если все в порядке, самое время открыть html — файл и подключить jquery:
<body>
<section></section>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</body>
Приступим к написанию основного скрипта, обеспечивающего движение фону.
1. При расчете расстояния, на которое планируется смещать фон, будем использовать значения ширины и высоты области просмотра браузера. Поэтому первым делом создадим функцию, которая будет вызываться при движении курсора мыши по section и получим значения ширины и высоты области просмотра браузера:
<script>
$('section').mousemove(function(e){
let winWidth = window.innerWidth;
let winHeight = window.innerHeight;
})
</script>
2. Затем вычислим расстояние, на которое будет смещаться фон по горизонтали и вертикали:
<script>
$('section').mousemove(function(e){
let winWidth = window.innerWidth;
let winHeight = window.innerHeight;
let moveOnX = e.pageX / (winWidth / 5 );
let moveOnY = e.pageY / (winHeight / 5);
})
</script>
3. И в заключение, к section применим css свойство transform, с параметром transform для передвижения фона:
<script>
$('section').mousemove(function(e){
let winWidth = window.innerWidth;
let winHeight = window.innerHeight;
let moveOnX = e.pageX / (winWidth / 5 );
let moveOnY = e.pageY / (winHeight / 5);
$(this).css('transform', 'translate(-' + moveOnX +'%, -' + moveOnY + '%)');
})
</script>
4. Работает! Лошадь в окружении снежных просторов на моем изображении движется по заданному мышью направлению. Надеюсь, Ваш background также успешно перемещается в след за мышью. На этом в написании скрипта можно поставить точку.