Создаем движущийся фон на css

Послушно следующий за мышью 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 также успешно перемещается в след за мышью. На этом в написании скрипта можно поставить точку.

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