2016-10-08 7 views
2

私のプロフィールページで行ったが、アニメーションはGitHubホスティングでは実行したくない。ここにリンクrmb-dev.github.ioがあります。他のコンテンツとCSSアニメーションはJavaScriptを除いてうまく機能します。理由を見つけることができません。GitHubホスティングで作業中(particles.js)アニメーションバックグラウンドが表示されない

particlesJS("particles-js", { 
 
    "particles": { 
 
    "number": { 
 
     "value": 100, 
 
     "density": { 
 
     "enable": true, 
 
     "value_area":1000 
 
     } 
 
    }, 
 
    "color": { 
 
     "value": ["#0892d0", "#f6f930"] 
 
    }, 
 

 
    "shape": { 
 
     "type": "circle", 
 
     "stroke": { 
 
     "width": 0, 
 
     "color": "#fff" 
 
     }, 
 
     "polygon": { 
 
     "nb_sides": 5 
 
     }, 
 
     "image": { 
 
     "src": "img/github.svg", 
 
     "width": 100, 
 
     "height": 100 
 
     } 
 
    }, 
 
    "opacity": { 
 
     "value": 0.6, 
 
     "random": false, 
 
     "anim": { 
 
     "enable": false, 
 
     "speed": 1, 
 
     "opacity_min": 0.1, 
 
     "sync": false 
 
     } 
 
    }, 
 
    "size": { 
 
     "value": 2, 
 
     "random": true, 
 
     "anim": { 
 
     "enable": false, 
 
     "speed": 40, 
 
     "size_min": 0.1, 
 
     "sync": false 
 
     } 
 
    }, 
 
    "line_linked": { 
 
     "enable": true, 
 
     "distance": 120, 
 
     "color": "#ffffff", 
 
     "opacity": 0.4, 
 
     "width": 1 
 
    }, 
 
    }, 
 
    "interactivity": { 
 
    "detect_on": "canvas", 
 
    "events": { 
 
     "onhover": { 
 
     "enable": true, 
 
     "mode": "grab" 
 
     }, 
 
     "onclick": { 
 
     "enable": false 
 
     }, 
 
     "resize": true 
 
    }, 
 
    "modes": { 
 
     "grab": { 
 
     "distance": 140, 
 
     "line_linked": { 
 
      "opacity": 1 
 
     } 
 
     }, 
 
     "bubble": { 
 
     "distance": 400, 
 
     "size": 40, 
 
     "duration": 2, 
 
     "opacity": 8, 
 
     "speed": 3 
 
     }, 
 
     "repulse": { 
 
     "distance": 200, 
 
     "duration": 0.4 
 
     }, 
 
     "push": { 
 
     "particles_nb": 4 
 
     }, 
 
     "remove": { 
 
     "particles_nb": 2 
 
     } 
 
    } 
 
    }, 
 
    "retina_detect": true 
 
});
#particles-js { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #282828; 
 
    z-index: 1; 
 
}
<!DOCTYPE html> 
 
<html > 
 
    <head> 
 
    <meta charset="UTF-8" name="RMB" content="/85"> 
 
    <title>RMB</title> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    </head> 
 

 
    <body> 
 
    <div id="particles-js"></div> 
 

 

 
     <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> 
 
     <script src='http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script> 
 
     <script src="js/index.js"></script> 
 
     <script src="js/particles.js"></script> 
 

 
    </body> 
 
</html>

任意のアイデア?

答えて

0

コンソールには、混在しているアクティブなコンテンツがブロックされているというメッセージが表示されます。httpを介してparticles.min.jsが取得されていますが、ページはhttpsです。

ほとんどのCDNはhttpsアクセスを許可しているので、私はそれを修正しました。

関連する問題