A Pen by Jason Hodges.

index.html

<div class="container">
  <div class="flash"></div>
  <div class="solid"></div>
  <div>
    <ul id="images">
      <li><img class="img1" src="" /></li>
      <li><img class="img1" src="" /></li></ul>
</div>
</div>

jQuery-Lightning-Effect.markdown

jQuery Lightning Effect

A Pen by Jason Hodges on CodePen.

License.

script.js

//functions for the image
var i1 = 400;
var i2 = 20;
this.imgSomething = function(){
  $(".img1").fadeTo("easeInElastic", 1)
            .delay(40)
  .effect("shake", {times:6, direction:"down"}, 8)
            .fadeOut("fast");
};
this.imgRandom = function(){
  var imgFunc = function(){
    imgSomething();
    var rand = Math.round(Math.random() * (i1 - i2)) * 10;
    setTimeout(imgFunc, rand);
  }
  imgFunc();
}
//functions for the solid div
var s1 = 2500;
var s2 = 20;
this.solidSomething = function(){
  $(".solid").fadeToggle("fast", "easeInOutElastic");
}
this.solidRandom = function(){
  var solidFunc = function(){
    solidSomething();
    var rand = Math.round(Math.random() * (s1 / s2)) + 40;
    setTimeout(solidFunc, rand);
  }
  solidFunc();
}
//functions for the flash
var f1 = 450;
var f2 = 20;
this.flashSomething = function(){
  $(".flash").fadeTo("fast", 1)
            .delay(20)
            .fadeOut("fast");
}
this.flashRandom = function(){
  var flashFunc = function(){
    flashSomething();
    var rand = Math.round(Math.random() * (f1 - f2)) * 4;
    setTimeout(flashFunc, rand);
  }
  flashFunc();
}
//borrowed from http://codepen.io/jmldias/pen/HmndK
this.imageLoad = function(){
  
  var pause = 3000;  
	var length = $("#images li").length; 
	var temp = -1;		

	this.getRan = function(){
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
	this.show = function(){
		var ran = getRan();
		while (ran == temp){
			ran = getRan();
		}; 
		temp = ran;
		$("#images li").hide();	
		$("#images li:nth-child(" + ran + ")").fadeIn(1200);		
	};
	show(); setInterval(show,pause);
};


//call all the functions
$(function() {
  imgRandom();
  solidRandom();
  flashRandom();
  imageLoad();

});

style.scss

@import "compass";
@import "compass";
@import "compass/reset";
@import url(http://fonts.googleapis.com/css?family=Lato);

//Em Calculator
@function emCalc($target, $context:16) {
	@return $target / $context * 1em;
}

//Clearfix
%clearfix{
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

%pseudo {
	content:'';
	display:block;
	position:absolute;
}

//Colors
$primary-color: #04fbf3;
$bg-color: #ccc;
$grey: #ADADAD;
$dark: #2B2B2B;
$light: #D1D1D1;
$green: #539403;
$purple: #440394;
$red: #940303;
////////////////////
//Spacing
$radius: emCalc(2);
$padding: emCalc(4) emCalc(8);
$margin: emCalc(2);
$letterspace: emCalc(4);

$font: 'lato', sans-serif;



body{
  margin:0;
  padding:0;
  height: 100%;
  background: black;
}

.container {
	text-align: center;
  margin: 50px auto;
  width: 600px;
  height: 400px;
  
  .flash{
  width: 600px;
  height: 200px;
/*  background-color: black;*/
  position: absolute;
  z-index: 2; /* FF3.6+ */ /* Chrome,Safari4+ */
  background: 
  -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0)), color-stop(0.5, rgba(0,0,0,0.5)), to(rgba(0,0,0,1)));
background: 
-webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: 
-moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: 
-o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: 
linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

  }
}
.solid{
  width: 600px;
  height: 400px;
  position: absolute;
  z-index: 4; 
  background: black;
 /*visibility: hidden;*/
  }
.img1 {

    width: 600px;
    z-index: 1;
  }
#images li{
  list-style:none;
  display:none;
}