iPhone screen saver using Particle.js

index.html

<div class="frame">
  <div class="center">
		<div class="top">
      <div class="speaker"></div>
      <div class="camera"></div>
    </div>
    <div class="screen">
      <div class="screenOverlay"><div id="particles"></div></div>
    </div>
    <div class="bottom">
      <div class="btn"></div>
    </div>
    <div class="note"><h4>Click on the screen of the phone</h4></div>
  </div>
</div>

iphone-screen-saver-using-particle-js.markdown

iPhone screen saver using Particle.js

Here is a revision on the iPhone mock-up using particle.js inside the screen. Just experimenting and learning more about particle.js

A Pen by Paul on CodePen.

License.

script.js

// https://github.com/VincentGarreau/particles.js
window.onload = function() {
  var config = {
  "particles": {
    "number": {
      "value": 60,
      "density": {
        "enable": true,
        "value_area": 200
      }
    },
    "color": {
      "value": ["#00b3e3", "#ff4338", "#3cd52e"]
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#C51162"
      }
    },
    "opacity": {
      "value": 0.7,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 2,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 8,
      "random": false
    },
    "line_linked": {
      "enable": false,
      "distance": 50,
      "color": "#fff",
      "opacity": 1,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "in",
      "attract": {
        "enable": true,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "push": {
        "particles_nb": 3
      }
    }
  },
  "retina_detect": true
};

particlesJS('particles', config);


};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>

style.scss

body {
  background-color: #000;
}

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: linear-gradient(to right bottom, #9C27B0, #42A5F5);
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.top {
  width: 8rem;
  height: 2rem;
  display: block;
  background-color: #eee;
  border-radius: 15px 15px 0 0;
  
  .speaker {
    position: absolute;
    width: 32px;
    top: 20px;
    left: 46px;
    border: 2px solid #ccc;
    border-radius: 50px;
  }
  
  .camera {
    position: absolute;
    width: 6px;
    height: 6px;
    top: 17px;
    left: 88px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: #ccc;
  }
}
.screen {
  width: 8rem;
  height: 10rem;
  display: block;
  background-color: #FAFAFA;
}

.screenOverlay {
  width: 7.5rem;
  height: 9.5rem;
  position: relative;
  display: block;
  left: 4px;
  top: 4px;
  background-color: #263238;
  box-shadow: inset 0 0 8px 2px rgba(0,0,0, 0.4);
  
  #particles {
    height: 100%;
    // width: 100%;
  }
}

.bottom {
  width: 8rem;
  height: 2rem;
  display: block;
  background-color: #eee;
  border-radius: 0 0 15px 15px;
}
.btn {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 2px;
  left: 52px;
  position: absolute;
  background-color: #E3F2FD;
  border: 2px solid #000;
  border-radius: 50%;
}

.note {
  position: absolute;
  text-align: center;
}