Добавить canvas to fullpage.js

Я пытаюсь добавить WebGL-скрипт на сайт с помощью FullPage.js, но он не работает так хорошо (я просто получаю черный экран). Я не знаю, в чем проблема, так как WebGL-скрипт и Fullpage.js работают безупречно. Мне не удалось добавить весь скрипт в jsFiddle, но скрипты можно увидеть на этом сайте http://www.scandinavija.com/index.html (я удалил весь несущественный скрипт).Добавить canvas to fullpage.js

Когда я проверить сайт в Chrome, я получаю следующее сообщение об ошибке: «неперехваченным TypeError: Не удается прочитать свойство„offsetWidth“в нуль на particles.js: 6» Может быть, что проблема?

Мой инстинкт, однако, скорее говорит мне, что эта проблема должна быть где-то здесь:

HTML:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> 
    <link rel="stylesheet" type="text/css" href="css/examples.css"> 

    <script src="https://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="js/scrolloverflow.js"></script> 
    <script type="text/javascript" src="js/jquery.fullPage.js"></script> 

    <!-- Particles (three.js) --> 
    <script type="text/javascript" src="js/detector.js"></script> 
    <script type="text/javascript" src="js/stats.min.js"></script> 
    <script type="text/javascript" src="js/three.min.js"></script> 
    <script type="text/javascript" src="js/particles.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#fullpage').fullpage({ 
       verticalCentered: true, 
       anchors: ['firstSection', 'secondSection', '3rdSection',  
       '4thSection', '5thSection'], 
      }); 
     }); 
    </script> 
</head> 
<body> 

<!-- My canvas (three.js) below --> 

<div id="canvas-container"></div> 

    <div id="fullpage"> 
     <div class="section" id="section1"></div> 
     <div class="section" id="section2"></div> 
     <div class="section" id="section3"></div> 
     <div class="section" id="section4"></div> 
     <div class="section" id="section5"></div> 
    </div> 
</body> 
</html>

CSS:

@CHARSET "ISO-8859-1"; 
/* Reset CSS 
* --------------------------------------- */ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { 
    padding: 0; 
    margin: 0; 
    background-color: #000; 
} 
a{ 
    text-decoration:none; 
} 
table { 
    border-spacing: 0; 
} 
fieldset,img { 
    border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
    font-weight: normal; 
    font-style: normal; 
} 
strong{ 
    font-weight: bold; 
} 
ol,ul { 
    list-style: none; 
    margin:0; 
    padding:0; 
} 
caption,th { 
    text-align: left; 
} 
h1,h2,h3,h4,h5,h6 { 
    font-weight: normal; 
    font-size: 100%; 
    margin:0; 
    padding:0; 
    color:#444; 
} 
q:before,q:after { 
    content:''; 
} 
abbr,acronym { border: 0; 
} 

/* START OF MY SCRIPT BELOW*/ 

#canvas-container { 
    z-index: 1000; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

источник

2017-01-29 Lavonen

Вы получаете эту ошибку, потому что вы пытаетесь получить доступ к объекту объекта, который оценивается как null.

particles.js

var container = document.getElementById('canvas-container'); 
//          ^^^^^^^^^^^^^^^^ 
//          not found 
var w = container.offsetWidth; 
//  ^^^^^^^^^ 
//  eq. null

Это потому, что ваш элемент #canvas-container не существует в DOM, когда сценарий particles.js выполняется.

Вы просто должны обернуть свой код внутри документа загружен обратного вызова, чтобы обеспечить элемент будет доступен:

$(function() { 
    // particles.js code 
});

Вы также можете просто переместить сценарий тег в конце вашего HTML файла:

... 
    <script type="text/javascript" src="js/particles.js"></script> 
</body>

источник

2017-01-29 13:56:12 Freez

Я попытался добавить скрипт в HTML-файл, как вы сказали, и завернул код внутри обработанного документа обратного вызова, но ничего не изменилось. Экран по-прежнему полностью черный, и скрипт не запускается ... – Lavonen

Я тоже пробовал, и он работает. Вам не нужно добавлять скрипт где-то, скрипт уже существует, вам просто нужно отредактировать _particles.js_. Просто добавьте '$ (function() {' в верхней части файла и '});' в конце :) – Freez

Вам не нужно обертывать вашу функцию, просто поместите свой тег скрипта в конец файла вместо верхнего – gman

ответ

Смежные вопросы