Parallax Background

Create a parallax effect when the mouse moves

Animated and interactive pages attract more and more attention from users. For this, we can use complex animations, or others simpler as parallaxes. There are two types of parallaxes: those that are activated when the page is scrolled, and others that are animated when the mouse is moved. Today we will see how to create a parallax effect when moving the mouse in javascript vanilla.

Setting up in HTML

The HTML structure will be relatively simple. We will use a main div , containing several spans , corresponding to animated balls when moving the mouse around a main title. Here is the HTML:

 class="parallax-wrap">  value="-15">  value="5">  value="30">  value="-5">  value="15"> Parallax effect  

Setting up the CSS

Concerning the CSS, nothing new, we will use only basic features of the language.
It is important to set overflow to hidden in the body, otherwise the animated balls will create a scroll of the page.
The span must be in position: absolute; , and have a border-radius of 100%, in order to create circular blocks.
Then we set each span one by one, by defining a color, a z-index , and its position. Here is the CSS (you can see the SCSS code in the codepen at the end) :

body  margin: 0; height: 100vh; background-color: #bd1060; overflow: hidden; > *  margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; > .parallax-wrap  position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; > .parallax-wrap h2  position: relative; font-size: 100px; color: white; z-index: 2; text-align: center; > .parallax-wrap span  position: absolute; height: 20px; width: 20px; border-radius: 100%; > .parallax-wrap span:nth-child(1)  top: 70%; left: 70%; background: blue; z-index: 3; > .parallax-wrap span:nth-child(2)  top: 60%; left: 80%; background: yellow; z-index: 3; > .parallax-wrap span:nth-child(3)  top: 40%; left: 60%; background: green; z-index: 3; > .parallax-wrap span:nth-child(4)  top: 70%; left: 40%; background: red; z-index: 3; > .parallax-wrap span:nth-child(5)  top: 40%; left: 30%; background: purple; z-index: 3; > 

Setting up the JS

First of all we have to detect when the user moves his mouse, with line 1. Then we trigger a parallax function, which selects all the spans contained in our main container. Then we animate them as it should be. The Javascript code:

document.addEventListener("mousemove", parallax); function parallax(event)  this.querySelectorAll(".parallax-wrap span").forEach((shift) =>  const position = shift.getAttribute("value"); const x = (window.innerWidth - event.pageX * position) / 90; const y = (window.innerHeight - event.pageY * position) / 90; shift.style.transform = `translateX($x>px) translateY($y>px)`; >); > 

Final result

Here is the final result. You can of course modify the elements, to replace them, for example, by images. You can also modify the value in the HTML span , so that the parallax effect is amplified. I hope you learned something about parallaxes, feel free to ask me any questions you may have. 👍 You want to support me ? OR

Источник

Как привязать параллакс эффект к движению мыши?

Параллакс эффект на вашем сайте или лендинге — хороший способ удержать внимание посетителей. Мы уже писали подробный туториал о том как сделать параллакс скроллинг, также повторили красивый параллакс эффект из девяти слоев с сайта firewatch. Настало время создать эффект параллакса привязанный к движению курсора мыши.

Исходное изображение

Сделаем мы это с помощью небольшого jQuery плагина jParallax. Слои на этом примере двигаются с разной скоростью, в зависимости от направления движения курсора. При этом движение осуществляется как влево-вправо по оси X, так и вверх-вниз по оси Y.

Движение слоёв при изменении позиции мыши

Автор давно не обновлял плагин, по этому он работает только с версиями jQuery не старше 1.8.3 . Подключим ее с помощью Google Hosted Libraries. Добавляем в свой HTML:

Далее нам потребуется подключить сам плагин. Скачаем 2 файла: jquery.event.frame.js и jquery.parallax.min.js, тоже подключим их к нашему проекту.

Подготовим графику и разобьём ее на слои. В нашем примере изображение состоит из четырех частей:

Слои изображения с параллакс эффектом

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

Основному блоку необходимо назначить свойство overflow со значением hidden, чтобы дополнительные слои не выходили за пределы контейнера.

Простой способ создать параллакс эффект js с библиотекой simpleParallax

Самый простой способ использования параллакса — сделать слои разного размера с помощью CSS. Большие слои будут перемещаться быстрее (и, следовательно, казаться ближе), А если слой больше окна просмотра, его края будут не видны. Всем слоям необходимо задать абсолютное позиционирование и каждому по отдельности назначить фоновую картинку.

 CSS .parallax__layer < position: absolute; >.parallax__layer:nth-of-type(1) < background-image: url('img/bg1.svg'); width: 700px; height: 310px; >.parallax__layer:nth-of-type(2) < background-image: url('img/bg2.svg'); width: 510px; height: 260px; >.parallax__layer:nth-of-type(3) < background-image: url('img/bg3.svg'); width: 510px; height: 260px; >

Основная работа сделана. Чтобы все заработало нужно сделать инициализацию. Добавляем скрипт в документ:

Jparallax также имеет дополнительные опции, которые позволяют контролировать поведение слоя. К примеру опция mouseport позволяет поменять элемент DOM для трекинга мыши. По умолчанию она имеет значение jQuery(document) и параллакс срабатывает от движения мыши по любой области внутри окна браузера. Если опции mouseport поставить значением наш контейнер, то параллакс сработает только когда курсор проходит над контейнером.

С помощью опции decay можно задать скорость с которой слои будут «догонять» положение мыши. Значение может быть в диапазоне от 0 до 1. Ноль означает мгновенное перемещение, а единица бесконечно долгое. Значение по умолчанию 0.66. Зададим параметр decay 0:

Перед тем как сделать свой неповторимый параллакс эффект познакомьтесь с нашей статьей про 10 потрясающих примеров параллакс скроллинга.

Источник

Параллакс эффект при движении мыши

Данный скрипт не требует никакие библиотеки и занимает всего 6 строчек.

Пример:

HTML:

CSS:

JS:

Если на странице присутствует несколько секций с таким параллаксом, то JS будет таким:

И для каждой нужно будет задать отдельный класс или стиль с фоновой картинкой.

По аналогии с этим примером, можно двигать несколько наложенных друг на друга фонов (при условии частичной их прозрачности), задавая им разное смещение, например:

• Опубликовано: 29.11.2019 / Обновлено: 06.05.2021
• Рубрики: Фоны и паттерны — простые решения
• Метки: JavaScript
• 29224 просмотра

Смотрите также:

Анимация графического фона на CSS

Простой пример движения графического фона блока средствами CSS

Бегущие волнистые линии

Анимированные волнистые линии с использованием SVG и CSS

Белый шум на JS

Небольшой JavaScript, создающий белый шум в канвасе

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

Комментарии:

Гениально! Попробовал разные решения, ваше — лучшее!
Скажите, а можно как-то доработать код, что бы ещё и на мобильниках/планшетах работало, где вместо мыши по сенсору пальцем водишь и оно так же двигается?)
Заранее спасибо!

Примерное решение тут: Смена слайдов мышкой или пальцем, а именно принцип нажатия и движения по сенсору
Но по моему это лишнее, т.к. задача тут немного другая.

window.addEventListener('mousemove', function(e) 
bg.addEventListener('mousemove', function(e) 
bg[i].addEventListener('mousemove', function(e) 
Евгений: Если вы не можете написать данный код на react, значит вы не знаете react, возможно слабые знание и в js, очень слабые ибо переписать этот код на react от силы пару минут. Ловите ref и вешаете событие, по сути все, остальное проблема верстки. Автору спасибо, простой и классный код, прям от души.
Спасибо огромное. 
Встроил данное решение в вордпресс. Работает! 
Появился вопрос: а возможно ли на адаптиве заменить данный параллакс картинкой? 
Использую эффект в шапке страницы. На адаптиве выглядит . никак не выглядит :о) Подумал, вдруг есть простое решение заменить данный скрипт просто изображением? 
Заранее спасибо.
isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|BlackBerry|iPad|IEMobile|Opera Mini)/); if (!isMobile) < // тут код >
 
Отличный параллакс. Спасибо. А подскажите, как сделать чтобы данный скрипт применялся только к одной секции?? В моем случае section
 
Оно и должно применяться к одной секции так то. 
Задайте для ее фона (mouse-parallax-bg) класс, который потом используется в скрипте, и стили все переписать под это.
 
Всё отлично, всё работает, только не знаю как подключить несколько изображений к этому эффекту. Может подскажете?)
 
Если честно, не знаю и проверить не могу. 
А IE разве еще пользуются? 
Я наверное, лет 10 назад уже забыл как он выглядит 🙂
 
Источник
 
Create a mouse-controlled parallax background effect
 
Add an interactive background element to your website to create a perception of extra depth.
 
 
Sites with parallax scrolling continue to be popular for a reason: they create a pleasant and engaging browsing experience for the user. We've already looked at the best stunning parallax scrolling websites to inspire you, but what do you do if you want to make one of your own?
 
Luckily, French creative developer Renaud Rohlinger is here to show you the ropes for how to create a parallax scrolling background that you can control with your mouse. Check out the amazing results on his site, and then learn from Rohlinger himself below on how you can replicate the effect in your next project.
 
You could also try one of these website builders, and while you're considering your site performance, check your web hosting service is working for you. Got a media heavy site? Back up with reliable cloud storage.
 
01. Define the HTML document framework
 
The first step is to define the framework of the HTML document. This consists of the HTML container that describes the document as having sections for head and body. While the head section links the external JavaScript and CSS files, the body section is used to define the page content elements in step 2.
 
     *** STEP 2 HERE 
 
02. Identify the HTML content
 
The body content consists of display text and a div container using the data-parallax attribute. It is this container element that will be used for the parallax background, with each of its child elements to be styled with the required background images. In this example, the container has three image layers to be created from the child div elements.
 
03. Create a CSS parallax container
 
Create a new file called styles.css. The first step in this file sets the default content colour to be white, and the settings for the parallax background container. Fixed positioning is applied to the parallax container to allow it remain in the same position as content scrolls over it. A default colour is applied as the page colour, while a negative z-index allows the container to appear under the page content.
 
04. Set up CSS parallax layers
 
Each of the image layers is set to use absolute positioning with a size to match the browser window. The parallax image in this example will be be based on a specific sized pattern that is set to repeat. You may choose to only repeat the image vertically using repeat-y, or horizontally using repeat-x.
 
05. Use CSS background layers
 
While each of the image layers share the position and size settings defined in step 4, each layer uses a unique image. The nth-child selector is used to reference each individual element within the parallax container. The background-image attribute is used to draw two lines which creates a grid effect when tiled. Lower layers use darker colours to help provide a perception of depth.
 
[data-parallax] > *:nth-child(1) < background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px); >[data-parallax] > *:nth-child(2) < background-image: linear-gradient(to right, #777 1px, transparent 1px), linear-gradient(to bottom, #777 1px, transparent 1px); >[data-parallax] > *:nth-child(3)
 
06. Perform JavaScript layer initiation
 
Create a new file called code.js. This step finds the parallax container and initiates each of its image layers with the data-index attribute that will be used in step 7. This must be performed from a function attached to the browser window’s load event, so that the code is only executed when the page’s body content is ready.
 
window.addEventListener("load", function() < var container = document. querySelector("[data-parallax]"); var childNodes = container.children; for(var n=0; n**** STEP 7 HERE >);
 
07. Calculate JavaScript mouse movement
 
The effect relies on moving the images associated with each parallax layer in response to mouse movement. The parallax container identified in step 6 has a mousemove event listener attached, which triggers a function to reposition background images of the parallax layers whenever there is mouse movement. Each layer has a motion calculation based on the index number applied in step 6.
 
container.addEventListener("mousemove", function(e) < var elms = this.children; for(var c=0; c>);
 
This article was originally published in creative web design magazine Web Designer. Buy issue 290 now.
 
Related articles:
 
 Thank you for reading 5 articles this month* Join now for unlimited access 
 
 Enjoy your first month for just £1 / $1 / €1 
 
*Read 5 free articles per month without a subscription
 
Источник
 
Читайте также:  Run apk on java