Масштаб фона при перемещении курсора мыши к центру - PullRequest
Новая
       56

Масштаб фона при перемещении курсора мыши к центру

1 голос
/ 31 октября 2019

Я пытаюсь заставить мое фоновое изображение медленно увеличивать изображение, когда курсор мыши приближается к центру области просмотра и наоборот. Я был на Google и на форумах, но все, что я могу найти, это примеры масштабирования прокрутки или изменения положения при перемещении мыши. Это самый близкий пример, который я могу найти , но вместо изменения положения фона я хочу изменить масштаб фонового изображения. Кто-нибудь знает, как это сделать или, по крайней мере, есть идеи?

Это не то изображение, которое я использую, но для целей этого поста я просто использовал случайное изображение из Unsplash. Вот так выглядит мой код для моего фона.

Следует отметить, что я довольно новичок в кодировании, поэтому я прошу прощения, если это простая задача, и я просто что-то упускаю. 

.bg {
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: rgba(255,255,255,0.5);
		background-blend-mode: lighten;
	}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body background="https://images.unsplash.com/photo-1520531158340-44015069e78e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="bg" style="height: 100vh">
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
...