This is a particle system animation we here at nclud created for our client, Ionic Security.
Forked from nclud team's Pen Ionic Security Particle System Animation.
test( "hello test", -> | |
ok Polymer instanceof Function | |
); | |
describe 'js, clone a function ',-> | |
it " clones the function with '{}' acting as it's new 'this' parameter, or nothing passed works too",-> | |
oldFunc=-> | |
this.num=1 | |
oldFunc.prototype.increNum=-> | |
this.num++ | |
func= new oldFunc() | |
func.increNum() | |
newFunc = oldFunc.bind(); |
This is a particle system animation we here at nclud created for our client, Ionic Security.
Forked from nclud team's Pen Ionic Security Particle System Animation.
<style id="jsbin-css"> | |
#DIV_1 { | |
color: rgb(109, 110, 112); | |
height: 165px; | |
left: 304px; | |
position: absolute; | |
text-align: center; | |
top: 247px; | |
width: 400px; | |
z-index: 99999; |
<style id="jsbin-css"> | |
#DIV_1, #DIV_3 { | |
color: rgb(51, 51, 51); | |
height: 1495px; | |
width: 568px; | |
perspective-origin: 284px 747.5px; | |
transform-origin: 284px 747.5px; | |
border: 0px none rgb(51, 51, 51); | |
font: normal normal normal normal 12px/15.6000003814697px Arial, 'Microsoft YaHei'; | |
outline: rgb(51, 51, 51) none 0px; |
/** | |
* Translucent borders | |
*/ | |
body { | |
background: url('http://csssecrets.io/images/stone-art.jpg'); | |
} | |
div { | |
border: 10px solid hsla(0,0%,100%,.5); |
<div class="container"> | |
<svg> | |
<g transform="translate(125, 75) scale(0.85)"> | |
<line x1="150" y1="600" x2="150" y2="25" stroke="#fff" /> | |
<line x1="150" y1="600" x2="1000" y2="600" stroke="#fff" /> | |
<line x1="250" y1="600" x2="250" y2="620" stroke="#fff" /> | |
<line x1="350" y1="600" x2="350" y2="620" stroke="#fff" /> | |
<line x1="450" y1="600" x2="450" y2="620" stroke="#fff" /> | |
<line x1="550" y1="600" x2="550" y2="620" stroke="#fff" /> |
<div class="hoverit"><h4> Hover it</h4></div> | |
<div class="check"> <h4>Check it</h4></div> | |
<div class="first"><h3><span class=h>H</span><span class="e">e</span><span class="y">y</span> <span class="m">m</span><span class="y">y</span> <span class="n">n</span><span class="a">a</span><span class="m">m</span><span class="e">e</span> <span class="i">i</span><span class="s">s</span> <span class="a">A</span><span class="n">n</span><span class="a">a</span></h3></div> | |
<div class="wraper"> | |
<div class="hor"></div> | |
<div class="ver"></div> | |
</div> |
<div class="solar-system"> | |
<div class="sun"> | |
<div class="label"> | |
<h2 class="label__title">Sun</h2> | |
</div> | |
<div class="system system--mercury"> | |
<div class="planet planet--mercury"></div> | |
<div class="label"> |
Dissolved in the blue.
A Pen by Gerard Ferrandez on CodePen.