particle banner

This commit is contained in:
czmj 2017-09-22 13:08:30 +01:00
parent fdcfba332f
commit f5c48f74b2
5 changed files with 1664 additions and 1528 deletions

View File

@ -1,11 +1,9 @@
<!-- Banner --> <!-- Banner -->
<section id="banner"> <div class="particle">
<div class="inner"> <section id="banner">
<h2>Spectral</h2> <div class="inner content">
<p>Another fine responsive<br /> site template freebie<br /> crafted by <a href="http://html5up.net">HTML5 UP</a>.</p> <h1>Autonomic</h1>
<ul class="actions"> <h2>Think outside the boss</h2>
<li><a href="#" class="button special">Activate</a></li> </div>
</ul> </section>
</div> </div>
<a href="#one" class="more scrolly">Learn More</a>
</section>

View File

@ -39,6 +39,7 @@
<script src="{{ "/assets/js/jquery.scrolly.min.js" | absolute_url }}"></script> <script src="{{ "/assets/js/jquery.scrolly.min.js" | absolute_url }}"></script>
<script src="{{ "/assets/js/skel.min.js" | absolute_url }}"></script> <script src="{{ "/assets/js/skel.min.js" | absolute_url }}"></script>
<script src="{{ "/assets/js/util.js" | absolute_url }}"></script> <script src="{{ "/assets/js/util.js" | absolute_url }}"></script>
<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!--[if lte IE 8]><script src="{{ "/assets/js/ie/respond.min.js" | absolute_url }}"></script><![endif]--> <!--[if lte IE 8]><script src="{{ "/assets/js/ie/respond.min.js" | absolute_url }}"></script><![endif]-->
<script src="{{ "/assets/js/main.js" | absolute_url }}"></script> <script src="{{ "/assets/js/main.js" | absolute_url }}"></script>

View File

@ -95,6 +95,118 @@
} }
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS('banner', {
"particles": {
"number": {
"value": 250,
"density": {
"enable": false,
"value_area": 1122.388442605866
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4.6,
"random": true,
"anim": {
"enable": false,
"speed": 6,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 133.99274002972194,
"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": false
});
}); });
})(jQuery); })(jQuery);

View File

@ -31,7 +31,7 @@
// Palette. // Palette.
$palette: ( $palette: (
bg: #2e3842, bg: #232B3B,
fg: #fff, fg: #fff,
fg-bold: #fff, fg-bold: #fff,
fg-light: rgba(255,255,255,0.5), fg-light: rgba(255,255,255,0.5),
@ -108,7 +108,7 @@
accent7: ( accent7: (
bg: #ffffff, bg: #ffffff,
fg-bold: #2E3842, fg-bold: _palette(bg),
fg: #4E4852, fg: #4E4852,
fg-light: #8E8892, fg-light: #8E8892,
border: #dfdfdf, border: #dfdfdf,

File diff suppressed because it is too large Load Diff