Canvas zu fullpage.js hinzufügen

Ich versuche, ein WebGL-Skript zu einer Site mit FullPage.js hinzufügen, aber es funktioniert nicht so gut (Ich bekomme nur einen schwarzen Bildschirm). Ich habe keine Ahnung, was das Problem ist, da sowohl das WebGL-Skript als auch Fullpage.js perfekt funktionieren. Ich konnte nicht das gesamte Skript zu einem jsFiddle hinzufügen, aber die Skripte können auf dieser Seite gesehen werden http://www.scandinavija.com/index.html (Ich entfernte alle nicht relevanten Skript).Canvas zu fullpage.js hinzufügen

Wenn ich die Seite in Chrome überprüfen bekomme ich folgende Fehlermeldung: „Uncaught Typeerror: kann nicht lesen Eigenschaft‚offset‘von null auf particles.js: 6“, dass das Problem sein kann?

Mein Instinkt, aber eher sagt mir, dass das Problem irgendwo hier sein sollte:

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%; 
}

Quelle

2017-01-29 Lavonen

Sie diesen Fehler erhalten, weil Sie versuchen, Auf eine Eigenschaft eines Objekts zugreifen, das auf null ausgewertet wird.

particles.js

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

ist dies, weil Ihr Element #canvas-container nicht existiert in dem DOM, wenn das Skript particles.js ausgeführt wird.

Sie haben soeben Ihren Code in einem Dokument geladen Rückruf wickeln müssen das Element zugänglich sein wird, um sicherzustellen:

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

Sie können auch einfach Ihren Script-Tag am Ende der HTML-Datei verschieben

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

Quelle

2017-01-29 13:56:12 Freez

Ich habe versucht, das Skript zu der HTML-Datei hinzuzufügen, wie Sie sagten, und den Code in einem Dokument geladen Rückruf, aber nichts geändert. Der Bildschirm ist immer noch komplett schwarz und das Skript läuft nicht ... – Lavonen

Ich habe es auch versucht, und es funktioniert. Sie müssen kein Skript irgendwo hinzufügen, das Skript ist bereits vorhanden, Sie müssen nur _particles.js_ bearbeiten. Fügen Sie einfach '$ (function() {' am Anfang der Datei und '});' am Ende hinzu :) – Freez

Sie müssen Ihre Funktion nicht umbrechen, sondern setzen Sie Ihr Skript-Tag am Ende der Datei anstelle von oben – gman

Canvas zu fullpage.js hinzufügen

Antwort

Verwandte Themen