javascript - Scroll with multiple, and going different directions -

i have large image of l-shaped painting on 1 page. created divs on parts of painting want explain. when page loads, want scroll down length of image, , move left of image, stopping @ each div few seconds. understand how page scroll down on load, not understand how continue scrolling once has reached first div. should target data-box , not class, continue move through each div box?

$(document).ready(function(){      $('html, body').animate({          scrolltop: $(".bird1").offset().top      }, 5000);        });

/*font*/  @import url(http://fonts.googleapis.com/css?family=yellowtail|calligraffitti|courgette);  @import url(http://fonts.googleapis.com/css?family=ubuntu:400,300italic);        body {  	/*background-color: #fbf2e0;*/  	background-color: #fcf5e9;  	/*background-color: #fdfbf5;*/  	/*background-color: #fefcf8;*/  	font-family: ubuntu, sans-serif;  }        /************************************  			home page  ************************************/  .jumbotronone {   	  background:       linear-gradient(        rgba(50,50,50, 0.8),        rgba(50,50,50, 0.8)      ),      url(https://scontent-ord1-1.xx.fbcdn.net/hphotos-xft1/v/t1.0-9/11150883_878883265488069_6626923622401519037_n.jpg?oh=d5636fb2a9b2e8365a8c951037d70895&oe=55fdd666);  	background-repeat: no-repeat;  	background-position: center;  	background-size: cover;  	margin-top:3.6em;    	/*-webkit-background-size: cover;  	-moz-background-size: cover;  	-o-background-size: cover;  	background-size: cover;*/  }    .words {  	color: #fdf8ef;  	padding-top: 9%;  	background:linear-gradient;  }    .red {      color:lightcoral;   }  #title {  	font-family: courgette;  	text-align: center;    }    #text {  	text-align: center;  	width: 95%;  	padding-top: 5%;  	line-height: 150%;  	font-size: 25px;  }        /************************************  			nav transparent  ************************************/        #nav {  	padding: 0;  	margin: 0;  }    /*** active color ***/  .navbar ,.active,.sr-only{     background-color: transparent;     background: transparent;     border-bottom-color: lightcoral;     border-bottom-width: 5px;     border-top: none;     overflow: hidden;  }    .navbar li {   	color: #fff;   }         /*nav color*/  .navbar-header,.collapse, .navbar-collapse , .navbar-toggle, .navbar-right, .dropdown, .dropdown-menu, .navbar-brand,.navbar-brand, .dropdown-toggle, .button {  	background-color: rgba(251,251,253, .5);  }        /*img sizing*/  #header img {  	width:100%;  	height: 100%;  	right:100%;   }    .slidein {      top:-100px;  }      .navbar-fixed-top {  	transition:all 1s ease-in-out  }  /*nav font color*/  .navbar-default .navbar-nav>li>a {     /*color: black; */  }      /*hover class text color */    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {  	  color: inherit;    	}      li #activecolor.active {   	background-color:red;   }      /************************************  			artist page  ************************************/    /*profile*/  #nopadding{  	padding: 0;  	margin: 0;  }  .nopadding {  	padding: 0;  	margin:0;    }  .profile img {  	object-fit:cover;  	display: block;  	height: 300px;  	width: 400px;  	margin-top: 15%;  	top: 5%;    }    .artistheader {    	/*color: black;*/    	margin-top: 7%;    }    .longname {    	font-size: 20px;    }            /************************************  			meaning  ************************************/    .redbox {  	position: absolute;  	height: 100%;  	/*left:-75px;*/  	top:5px;  }    .redbox div {  	border-style: solid;  	border-color: red;  	position: relative;  }    /*.totem .ganesh .bird1 .bird2 .katy .fredia .saar .parks .james .anna .ai .friends1 .friends2 .friends3 .kids .parents .quote{  	display: none;  }*/  .meaningimg img {  	margin-top: 1.1%;  	max-height:1000px;  	max-width:1000em;  	margin-bottom: 0;   }  .totem {  	height: 160px;  	width: 60px;  	top: 412px;  	left: 220px;  	display: inline-block;  }  .ganesh {  	top: 420px;  	left: 210px;  	height:140px;  	width:80px;  }    .bird1{  	top: 287px;  	left: 310px;  	height:40px;  	width:250px;	  }  .katy{  	top: 160px;  	left: 635px;  	height:200px;  	width:244px;	  }  .fredia{  	top: 125px;  	left: 960px;  	height:194px;  	width:158px;	  }  .saar{  	top: -215px;  	left: 1150px;  	height:194px;  	width:158px;	  }  .parks{	  	top: -255px;  	left: 1350px;  	height:168px;  	width:122px;	  }  .james{  	top: -505px;  	left: 1690px;  	height:358px;  	width:122px;	  }  .anna{  	top: -780px;  	left: 2005px;  	height:290px;  	width:146px;	  }  .andy{  	top: -1030px;  	left: 2305px;  	height:255px;  	width:140px;	  }  .ai{  	top: -1315px;  	right: -2500px;  	height:249px;  	width:514px;  	/*508 & 243	*/  }  .friends1{  	top:-1450px;  	right:-3175px;  	height:109px;  	width:264px;  }  .friends2{  	top:-1550px;  	right:-3855px;  	height:103px;  	width:200px;  }  .friends3{  	top:-1800px;  	right:-3685px;  	height:97px;  	width:164px;  }  .kids{  	top:-1870px;  	right:-3185px;  	height:109px;  	width:295px;  }  .parents{  	top:-1890px;  	right:-3475px;  	height:203px;  	width:358px;  }    .quote{  	top:-2250px;  	right:-4200px;  	height:230px;  	width:250px;  }  .bird2{  	top:-2550px;  	right:-3950px;  	height:250px;  	width:240px;  }    .totem, .ganesh, .bird1, .bird2, .katy, .fredia, .saar, .parks, .james, .anna, .andy, .ai, .friends1, .friends2, .friends3, .kids, .parents, .quote {      opacity:0;         -webkit-transition:.5s;      -moz-transition:.5s;      -o-transition:.5s;      -ms-transition:.5s;      transition:.5s;  }    .totem:hover, .ganesh:hover, .bird1:hover, .bird2:hover, .katy:hover, .fredia:hover, .saar:hover, .parks:hover, .james:hover, .andy:hover, .anna:hover, .ai:hover, .friends1:hover, .friends2:hover, .friends3:hover, .kids:hover, .parents:hover, .quote:hover {      opacity:1;        }  .background {  	  background:   		linear-gradient(  		rgba(219,253,244, 0.7),  		rgba(219,253,244, 0.7)  		),  		url(http://wallpoper.com/images/00/43/13/34/forest-sunrise-wallpaper-landscape-nature_00431334.jpg);  	/*background-size: length;*/  	width: 4892px;    /* single tree url(http://wallpoper.com/images/00/42/56/25/forest-summer_00425625.jpg);*/  /* tress light green url(http://wallpaperlepi.com/wp-content/uploads/2014/09/awesome-nature-ray-of-light-wallpaper.jpg);*/  /* trees light green url(http://orig12.deviantart.net/ddf1/f/2012/303/0/0/forest_stock_by_dl_stockandresources-d5jffdv.jpg);*/  /* red tint url(http://wallpoper.com/images/00/43/13/34/forest-sunrise-wallpaper-landscape-nature_00431334.jpg);*/  /*		  		light green color 	*/    /*		rgba(216,74,74, 0.1),  		rgba(216,74,74, 0.1)  		red color 			*/    	height:50%;  	margin-top: 0;  	/*background-repeat: no-repeat;*/  	/*background-size: cover;*/  	/*background-attachment: fixed;*/    }     	  /************************************  			footer  ************************************/  #footer {  	color: #ed5565;  	background-color: #fbf2e0;  	/*background-color: #fcf5e9;*/  	  	text-align: center;  	/*margin-top: 20em;*/  	/*max-height: 1%;*/  	/*height:10%;*/  	/*padding-bottom: 15;*/  	margin-bottom: 0;	    }      /*****************************  		  pic gallery   *****************************/  .fulldrawing {  	margin: 0;  	padding-left: 0px;  	padding-right: 0px;  	padding-top: 50px;  	max-height:200.750em;/*18.750em;/*height: 300px;*/  	max-width:1000em; /*91.500em;*/ /*120px*/  	min-height: 13em;  	width: 100%;  }  .bottomfulldrawing {  	margin: 0;  	padding-left: 0px;  	padding-right: 0px;  	padding-top: 50px;  	max-height:200.750em;/*18.750em;/*height: 300px;*/  	max-width:1000em; /*91.500em;*/ /*120px*/  	min-height: 13em;  	width: 100%;  	padding-bottom: 2.5em	;	  }  .gallerycontainer {  	width: 90%;  	overflow-x:scroll;  	overflow-y:hidden;  	padding-top: 5%;  	padding-left: 5%;  	padding-right: 5%;    }    .profile {  	margin-top: 5%;  }    .gallerycontainer img {  	/*height: 171px;*/  	/*width: 180px;*/  	/*margin-top: 100%;*/  	/*padding-bottom: 0px;*/      /*height: 515px;*/    }    .gallerycontainer img {  	height: 300px;  	width: 400px;  	object-fit:cover;  }      .fulldrawing img{  	height: 217.273px;  	width:1440px;  }      .list-inline {  	white-space:nowrap;  }      .gallerycontainer > .row [class*="col-lg"], .gallerycontainer > .row [class*="col-md"], .gallerycontainer > .row [class*="col-md"] {      float:none;      display:inline-block;      white-space:normal;      vertical-align:top;    }    #main-content > .row {      overflow-x:scroll;      overflow-y:hidden;      white-space:nowrap;    }

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <!-- totem pole -->      <div class="redbox">                        <div class=" box totem">                  <span class="hovertotem" data-box="totem" ></span>              </div>              <!-- ganesh -->          <div class="focus box ganesh">              <span data-box="ganesh" ></span>          </div>          <!-- bird 1 -->          <div class="box bird1">              <span data-box="bird1" ></span>          </div>          <!-- katy -->          <div class="box katy">              <span data-box="katy" ></span>          </div>          <!-- fredia -->          <div class="box fredia">              <span data-box="fredia" ></span>          </div>               <!-- sarry -->          <div class="box saar">              <span data-box="saar" ></span>          </div>            <!-- parks -->          <div class="box parks">              <span data-box="parks" ></span>          </div>            <!-- james -->          <div class="box james">              <span data-box="james" ></span>          </div>             <!-- anna -->          <div class="box anna">              <span data-box="anna" ></span>          </div>              <!-- andy -->          <div class="box andy">              <span data-box="andy" ></span>          </div>             <!-- ai -->          <div class="box ai">              <span data-box="ai" ></span>          </div>            <!-- friends -->          <div class="box friends1">              <span data-box="friends1" ></span>          </div>          <div class="friends2">              <span data-box="friends2" ></span>          </div>          <div class="box friends3">              <span data-box="friends3" ></span>          </div>              <!-- kids -->          <div class="box kids">              <span data-box="kids" ></span>          </div>                    <!-- parents -->              <div class="box parents">              <span data-box="parents" ></span>          </div>                    <!-- quote -->              <div class="box quote">              <span data-box="quote" ></span>          </div>                <!-- bird 2 -->          <div class="box bird2">              <span data-box="box bird2" ></span>          </div>              </div>            <div class="container-fluid">          <div id="" class="row meaningimg">              <div class="background">                                          <a href="../public/img/tallpart1.png">                    <img class="" src="http://arttreeoflife.com/public/img/tallpart1.png" class="meaningimg">                  </a>              </div>          </div>      </div>

ok, got code work.

i kept html same made few changes jquery.

    $(document).ready(function(){ $('html, body').animate({     scrolltop: $(".ganesh").offset().top, }, 5000).animate({     scrollleft: $(".bird1").offset().left, }, 5000).animate({     scrollleft: $(".saar").offset().left, }, 5000).animate({      scrollleft: $(".anna").offset().left, }, 5000).animate({      scrollleft: $(".friends1").offset().left, }, 5000).animate({      scrollleft: $(".quote").offset().left, }, 5000); });   

i think needed fix syntax bit, , able scroll both parts of screen first few lines of code, scrolled diagonally. make stop between each scroll had make new animation. , why think worked.

if explain me better please i'm not sure if follow going on here or not.