<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="last"></div>

html{height: 100%}

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

div{
  height: 100%;
  margin: 0;
  padding: 0;
  
}

div:first-child{
  background: url("https://zacate.files.wordpress.com/2015/04/mountain-road-wallpaper-mountains-path-pole-green-nature-sky-clouds-landscape.jpg?w=1200");
  background-size: 100% 100%;
  background-attachment: fixed
}

div:nth-child(2){
  background: url("https://s-media-cache-ak0.pinimg.com/originals/7a/6f/37/7a6f37eded84a07844dc308b8e3fa790.jpg");
  background-size: 100% 100%;
  background-attachment: fixed
}


div:nth-child(3){
  background: url("http://cdn.pcwallart.com/images/desert-mountains-sunset-wallpaper-3.jpg");
  background-size: 100% 100%;
  background-attachment: fixed
}

div:nth-child(4){
  background: url("http://www.tocadacotia.com/wp-content/uploads/2013/12/por-que-o-deserto-e-tao-quente-durante-o-dia-e-tao-frio-durante-a-noite--1024x640.jpg");
  background-size: 100% 100%;
  background-attachment: fixed
}

div:nth-child(5){
  background: url("https://i.ytimg.com/vi/lV6WaJi1f3k/maxresdefault.jpg");
  background-size: 100% 100%;
  background-attachment: fixed
}

div:nth-child(6){
  background: url("https://static1.squarespace.com/static/51959b80e4b0acc777d86621/52085ef6e4b0f09210ea70f8/52772f9be4b04aa465ee1571/1430906961351/P0826+-+Uncountable+Stars+-+Full+Size+No+Watermark.jpg?format=500w");
  background-size: 100% 100%;
  background-attachment: fixed
}


div:nth-child(7){
  background: url("https://c1.staticflickr.com/9/8523/27815579924_3217110404_b.jpg");
  background-size: 100% 100%;
  background-attachment: fixed
}

var x;
var div = document.getElementById("last");
  
  var scrollDown = setInterval(function () {
  
    window.scrollBy({ 
    top: x,
    left: 0, 
    behavior: 'smooth'
  });
    
    if(window.pageYOffset == 0){
      x = div.clientHeight;
      
    } else if(window.pageYOffset == div.offsetTop){
      x = -div.clientHeight;
    }
}, 3000) 


// creating my image link

var link = document.createElement("a");
document.body.appendChild(link);

link.href = "https://codepen.io/mo7hamed/pens/public";
link.target = "_blank";

var photo = document.createElement("img");
link.appendChild(photo);

photo.src =
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1292524/profile/profile-80.jpg";
photo.alt = "mo7amed";

photo.style =
  "border-radius:50%;position:fixed;bottom:20px;right:20px;transition:all 0.5s ease";

photo.onmouseover = function() {
  this.style.transform = "scale(1.1,1.1)";
  this.style.boxShadow = "5px 5px 15px #000";
};

photo.onmouseout = function() {
  this.style.transform = "scale(1,1)";
  this.style.boxShadow = "none";
};