[Nexus]

https://jsfiddle.net/6rqhav3u/5/

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="scene">
	<div class="toggler">
		<img alt="Lamp" class="lamp"/>
	</div>
	<div class="main-objects">
		<div class="lamp-light">
			<div class="witch-box">
				<img alt="Witch" class="witch"/>
			</div>
			<div class="hat-box">
				<img alt="Hat" class="hat"/>
				<img alt="Bird" class="bird"/>
			</div>
		</div>
	</div>
</div>
<style>
body{
	background:#000;
}

.scene{
	position:relative;
	text-align:center;
	color:#FFF;
}

.hat-box{
	position:relative;
}

.hat{
	position:relative;
	z-index:2;
}

.bird{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	transition:top ease 1s;
}

.bird.fly-out{
	top:-60px;
}

.lamp-light{
	display:flex;
	align-items:center;
	max-width:400px;
	margin:200px auto 0;
}

.lamp-light>*{
	flex-basis:50%;
	opacity:0.5;
}

.lamp-light:before{
	content:'';
	position:absolute;
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:solid 295px transparent;
	border-bottom:solid 350px #FF9;
	border-top:none;
}
.witch{
	position:relative;
	z-index:2;
}




/* stubs */
.lamp{
	position:relative;
	z-index:2;
	background:#00F;
	height:60px;
	width:60px;
	display:inline-block;
}

.witch{
	background:#F90;
	display:inline-block;
	width:90px;
	height:150px;
}

.hat{
	width:90px;
	height:90px;
	display:inline-block;
	background:#0F0;
}

.bird{
	display:inline-block;
	background:#F00;
	width:40px;
	height:40px;
}
</style>
<script>
(function($scene){
	$scene.find('.toggler .lamp').click(function(){
		$scene.find('.main-objects').toggle();
	}).end().find('.witch').click(function(){
		$scene.find('.bird').toggleClass('fly-out');
	});
})($('.scene'));
</script>

upd. не могу свет победить, так что допиливайте сами.