Using particle to build an animated hero unit for an upcoming product.
A Pen by Ahmad Awais on CodePen.
<div class="aa_sec"> | |
<div class="aa_txt"> | |
<span class="aa_inner"> | |
Person <span class="aa_of">of</span> Interest | |
</span> | |
</div> | |
</div> | |
<div id="aa_particles"></div> | |
<div class="aa_ahmadawais"> | |
Designed by <a href="http://AhmadAwais.com/about">Ahmad Awais</a> - UI/UX Designer & Front-end Developer | |
</div> | |
<script src="http://vincentgarreau.com/particles.js/particles.js"></script> |
Using particle to build an animated hero unit for an upcoming product.
A Pen by Ahmad Awais on CodePen.
Using particle to build an animated hero unit for an upcoming product.
Details: http://ahmadawais.com/using-particles-js-build-impressive-hero-unit/
A Pen by Ahmad Awais on CodePen.
particlesJS('aa_particles', { | |
particles: { | |
color: '#fff', | |
shape: 'circle', | |
opacity: 1, | |
size: 2.5, | |
size_random: true, | |
nb: 100, | |
line_linked: { | |
enable_auto: true, | |
distance: 250, | |
color: '#fff', | |
opacity: 0.5, | |
width: 1, | |
condensed_mode: { | |
enable: false, | |
rotateX: 600, | |
rotateY: 600 | |
} | |
}, | |
anim: { | |
enable: true, | |
speed: 2.5 | |
} | |
}, | |
interactivity: { | |
enable: true, | |
mouse: { | |
distance: 250 | |
}, | |
detect_on: 'canvas', | |
mode: 'grab', | |
line_linked: { | |
opacity: 0.5 | |
}, | |
events: { | |
onclick: { | |
push_particles: { | |
enable: true, | |
nb: 4 | |
} | |
} | |
} | |
}, | |
retina_detect: true | |
}); |
@import "compass/css3"; | |
$c1 : #674172; | |
$c2 : #ffffff; | |
*{ | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html, | |
body | |
{ | |
margin: 0; | |
background: $c1; | |
} | |
canvas | |
{ | |
display: block; | |
vertical-align: bottom; | |
} | |
#aa_particles | |
{ | |
z-index: 4; | |
height: 100%; | |
height: 100vh; | |
background: $c1; | |
} | |
@import url(http://fonts.googleapis.com/css?family=Roboto:100); | |
.aa_sec | |
{ | |
position: absolute; | |
z-index: 5; | |
top: 50%; | |
right: 0; | |
left: 0; | |
margin: 0 auto; | |
} | |
.aa_txt | |
{ | |
font: 100 10vh/1 Roboto; | |
text-align: center; | |
color: $c1; | |
} | |
.aa_inner | |
{ | |
padding: 0 2rem; | |
text-transform: uppercase; | |
background: $c2; | |
} | |
.aa_of | |
{ | |
padding: 1rem; | |
color: $c2; | |
background: darken($c1,5%); | |
} | |
@import url(http://fonts.googleapis.com/css?family=Roboto:100); | |
.aa_ahmadawais{ | |
display: table; | |
width: 100%; | |
vertical-align: bottom; | |
margin: 5rem 0 5rem ; | |
text-align: center; | |
background: $c1; | |
color: $c2; | |
font: 100 2vh/2 Roboto; | |
& a{ | |
color: darken($c2,20%); | |
text-decoration: none; | |
border-bottom: 1px solid darken($c2,20%); | |
} | |
} |