не знаю как назвать body background для js

136

21 августа 2019, 07:40

Eсть задача сделать интерактивный фон для сайта, чтобы он чуть двигался от движения мыши. Что-то вроде этого. Я знаю, что есть тема именно с этим сайтом, от туда я JS код и взяла.

Изначально я сделала так:

$(".bg").interactive_bg();

html, 
body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
} 
 
body { 
  overflow: auto; 
} 
 
.bg { 
  min-height: 100%; 
}

<div class="bg" data-ibg-bg="img/mp.jpg"></div>

Все работало, но проблема была в том, что все что я писала дальше уходило за фон.

Я решила сделать фон прям в боди через CSS:

body {
  background: url(img/mp.jpg) no-repeat center center fixed;
  background-size: cover;
}

Теперь ничего не работает, перепробовала кучу вариантов как можно обратиться к этому background, но пока что все безуспешно.

Можно ли вообще делать так как я хочу, если можно, то как, и как обратиться к background?

Answer 1

Оказалось: плагин jQuery Interactive BG работает только, если он как фон и контента на нем нет. Через body тоже нельзя было сделать. Очень хороший человек помог решить проблему с помощью parallax.js

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- <link rel="stylesheet" type="text/css" href="style.css">  --> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<!--        <script type="text/javascript" src="http://www.onextrapixel.com/examples/interactive-background/js/jquery.interactive_bg.js"></script>--> 
<!--        <script src="js/parallax.js"></script>--> 
        `<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> 
 
        <style type="text/css"> 
            html, body { 
                height: 100%; 
                margin: 0; 
                padding: 0;  
                overflow: hidden; } 
        body {   overflow: auto; 
                 text-align: center; 
            } 
        .bg {    width: 105%; 
            height: 105%; 
                 background:url(img/mp.jpg) center center no-repeat;  
            background-size: cover; 
/* 
            position: absolute; 
            top: 5px; 
            left: 5px; 
*/ 
             
             
            } 
 
        .content-wrapper{ 
                position: absolute; 
                top: 0; 
                left: 0; 
                right: 0; 
                margin: auto; 
                min-height: 100vh; 
                width: 100vw; 
                z-index: 2; 
              } 
 
        .bg-wrapper { 
            position: fixed; 
            top: -30px; 
            left: -30px; 
            z-index: 1; 
            width: 100vw; 
            height: 100vh; 
             
                        } 
        </style> 
 
        
    </head> 
<body> 
  
 
<div class="bg-wrapper" id="scene" > 
     
     <div class="bg" data-depth="0.2"></div> 
      
     
   
 
    
   </div> 
     
 
<div class="content-wrapper"> 
    <h1>TEXT TEXT TEXT </h1> 
    <div class="info"> 
    <a href="#">Контакты</a> 
        <a href="#">Контакты</a> 
        <a href="#">Контакты</a> 
        <a href="#">Контакты</a> 
    </div> 
 
</div> 
     
     
<!--  box-shadow: -10px 0 20px 5px rgba(0,0,0,0.3); для футера--> 
 
 <script type="text/javascript"> 
         
//     var parallax = new Parallax($("#parallax")); 
      var scene = document.getElementById('scene'); 
      var parallaxInstance = new Parallax(scene); 
    </script> 
</body> 
</html>

Спасибо всем за ответы:)

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как разместить два блока на одной строке? [закрыт]

Подскажите, как правильно разместить два блока, которые обведены красной рамкой? (без использования фреймворков)

140

HTML

Как получить массив данных из java servlet в коде javascript на странице?

Разбираю окно поиска с автозаполнением и столкнулся с вопросом, как передать данные из сервлета в страницу html использующую javascriptкод самого...

130

jQuery

Поиск динамически созданного элемента jQuery

Есть функция в которой при загрузке скрипта перебираюся все

128

jQuery

Некорректно работает responsive в slick-slider в chrome и opera

Задала брейкпойт 768px чтобы показывалось 2 слайдера, но это срабатывает при разрешении экрана 687px в ChromeВ браузераx Microsoft Edge и Firefox все нормально...

112