Cesium custom fader

HTML

<link rel="stylesheet" href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css">
<script src="https://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
 
<link href="http://cesiumjs.org/releases/1.15/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.15/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="controlPanel">
  This is a floating control panel<br/>
  with a translucent background color.
  <p>
    <label>
      <input id="skyCheckbox" type="checkbox" checked />
      <input id="skyCheckboxtxt" type="text"  />
      <span>Enable atmospheric effect</span>
    </label><br/>
    <button id="skyCheckbtn"  class="cesium-button">Button 1</button>
    <button class="cesium-button">Button 2</button>
  </p>
</div>

CSS

html,
      #cesiumContainer {
        height: 100%;
      }

      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
        height: 100%;
      }
html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif; color: #edffff;
}
#controlPanel {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(42, 42, 42, 0.8);
  padding: 5px 8px;
  border-radius: 5px;
}
label {
  cursor: pointer;
}
label:hover span {
  text-decoration: underline;
}

JavaScript

var viewer = new Cesium.Viewer('cesiumContainer');
var ellipsoid = Cesium.Ellipsoid.WGS84;

var angle;
var array;
var point;

var skyAtmosphere = viewer.scene.skyAtmosphere;
var skyCheckbox = document.getElementById('skyCheckbox');
var asddd  = document.getElementById('skyCheckbtn');
 

asddd.addEventListener('click', function() {
  
  
  
  
  
  
  var bnai = document.getElementById('skyCheckboxtxt');
  console.log(bnai.value);
  
  
  		$.ajax({
				url: String('https://nominatim.openstreetmap.org/search?format=json&limit=500&polygon=1&q='+bnai.value),
				type: "GET",
				async: false,
				dataType: 'json',
				cache: false,
				success: function (pois) {
					//this.items = [];
var czml = [{
								"id": "document",
								"name": "CZML Geometries: Polygon",
								"version": "1.0"
							} 
						];


					for (var i in pois) {

						bb = pois[i].boundingbox;
						//console.log(pois[i]);
						//console.log(pois[i].display_name);
						
						//display_name
						lat1 = bb[0];
						lng1 = bb[2];
						lat2 = bb[1];
						lng2 = bb[3];

						//console.log(pois[i].polygonpoints);
						if (pois[i].polygonpoints.length > 0) {
console.log(pois[i]);
							var newczml = {
									"id": pois[i].place_id,
									"name": pois[i].display_name,
									"polygon": {
										"positions": {
											"cartographicDegrees": []
										},
										"material": {
											"solidColor": {
												"color": {
													"rgba": [255, 100, 0, 100]
												}
											}
										},
										"extrudedHeight": 50,
										"perPositionHeight": true,
										"outline": true,
										"outlineColor": {
											"rgba": [0, 0, 0, 255]
										}
									}
								}
							;
							
							
							for (var ti = 0; ti < pois[i].polygonpoints.length; ti++)...