background slider

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

aelynne

hello,

Does anyone knows how to make background slide like this?

http://agencexy.com/#home

coothead

Hi there aelynne,

that site seems to have used javascript to achieve the effect.

Here is a pure CSS example...

[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>

<base href="http://www.coothead.co.uk/images/">

<meta charset="utf-8">

<title>CSS transform skew and animation</title>

<style>
html,body {
    margin:0;
    height:100%;
    background-image:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,1.0));
 }
#box0,#box1,#box2,#box3 {
    position:relative;
    z-index:3;
    float:left;

width:22%;
height:100%;
margin:-100% 1% 0 1%;

background-image:url(autumn.jpg);
background-size:100% 100%;	
box-shadow:10px 10px 10px rgba(0,0,0,1.0),
      inset 1px  1px  1px rgba(0,0,0,1.0);

-webkit-transform:skew(-10deg);
-moz-transform:skew(-45deg);
-ms-transform:skew(-10deg);
-o-transform:skew(-10deg);
transform:skew(-10deg);

animation-delay:0s;
animation-duration:1s;
animation-name:slideDown;
animation-fill-mode:forwards;

-webkit-animation-delay:0s;
-webkit-animation-duration:1s;
-webkit-animation-name:slideDown;
-webkit-animation-fill-mode:forwards;
 }
#box1 {
    z-index:2;
    background-image:url(blood.jpg);
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
 }
#box2 {
   z-index:1;
   background-image:url(buddha.jpg);
   animation-delay:1s;
   -webkit-animation-delay:1s;
 }
#box3 {
    z-index:0;
    background-image:url(avenue.jpg);
    animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
 }

#nav {
    position:absolute;
    z-index:4;

width:100%;
padding:0;
margin:0;
border-top:1px solid rgb(0,0,0);
border-bottom:1px solid rgb(0,0,0);
bottom:10%;

list-style-type:none;
line-height:100px;
text-align:center;
background-color:rgb(247,247,247);
box-shadow:0 0 30px rgba(0,0,0,0.8),
     inset 0 0 30px rgba(0,0,0,0.8);
opacity:0;

animation-delay:2.5s;
animation-duration:2.0s;
animation-name:show;
animation-fill-mode:forwards;

-webkit-animation-delay:2.5s;
-webkit-animation-duration:2.0s;
-webkit-animation-name:show;
-webkit-animation-fill-mode:forwards;
 }
#nav li { 
    display:inline;
    margin:0 20px;
 }
#nav a {
    color:rgb(0,0,0); 
    text-transform:uppercase;
    text-decoration:none;
 }
@keyframes slideDown{
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }
@-webkit-keyframes slideDown {
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }

@keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
@-webkit-keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
</style>

</head>
<body>

<div id="box0"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>


<ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Information</a></li>
 <li><a href="#">Contact</a></li>
</ul>

</body>
</html>[/color]

coothead

aelynne

thank you. it works.

aelynne

why when i separate the css and html, its not working?

aelynne

how can i add something like this under the nav?[ATTACH]15773[/ATTACH]

The attachments of this post were removed during the platform migration in 2018

coothead

Hi there aelynne,

you have probably made a coding error somewhere.

Do you have a link to your test page , so that we may see your problem?

coothead

aelynne

nope. i make it offline, so i dont have the link. if i need to separate the css and html, how?

coothead

Hi there aelynne,

how can we test your code, if we don't have it? :eek:

If the background images are failing to show up, then you
have not used the correct location address in the CSS.

Put the absolute url in the CSS to test.

coothead

aelynne

how to make the gap between photos in background more smaller.means no gaps.
[ATTACH]15779[/ATTACH]

this is my code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vensta | Home</title>

<style>
html,body {
    margin:0;
    height:100%;
	background-color:#F69220;
    /*background-image:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,1.0));*/
	font-family:Arial, "Gill Sans", Helvetica, "Myriad Pro";
 }
#box0,#box1,#box2,#box3 {
    position:relative;
    z-index:2;
    float:left;

width:32%;
height:100%;
margin:-100% 1% 0 1%;

background-image:url(images/home_bg1.png);
background-size:100% 100%;	
box-shadow:0px 0px 0px rgba(0,0,0,1.0),
      inset 0px  0px  0px rgba(0,0,0,1.0);

-webkit-transform:skew(-10deg);
-moz-transform:skew(-45deg);
-ms-transform:skew(-10deg);
-o-transform:skew(-10deg);
transform:skew(-10deg);

animation-delay:0s;
animation-duration:1s;
animation-name:slideDown;
animation-fill-mode:forwards;

-webkit-animation-delay:0s;
-webkit-animation-duration:1s;
-webkit-animation-name:slideDown;
-webkit-animation-fill-mode:forwards;
 }
#box1 {
    z-index:1;
    background-image:url(images/home_bg2.png);
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
 }
#box2 {
   z-index:0;
   background-image:url(images/home_bg3.png);
   animation-delay:1s;
   -webkit-animation-delay:1s;
 }
/*#box3 {
    z-index:0;
    background-image:url(avenue.jpg);
    animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
 }*/

#nav {
    position:absolute;
    z-index:4;

width:100%;
padding:0;
margin:0;
border-top:0px solid rgb(0,0,0);
border-bottom:0px solid rgb(0,0,0);
bottom:20%;

list-style-type:none;
text-align:center;
background-color:#ffffff;
box-shadow:0 0 30px rgba(0,0,0,0.8);
     inset 0 0 0px rgba(0,0,0,0.8);
opacity:0;

animation-delay:2.5s;
animation-duration:2.0s;
animation-name:show;
animation-fill-mode:forwards;

-webkit-animation-delay:2.5s;
-webkit-animation-duration:2.0s;
-webkit-animation-name:show;
-webkit-animation-fill-mode:forwards;
 }
#nav li { 
    display:inline;
    margin:0 20px;
 }

#nav a {
    color:rgb(0,0,0); 
    text-transform:uppercase;
    text-decoration:none;
	color:#E34927;
	font-weight:bold;
	font-size:14px;
 }

#nav li.navlogo img{
	padding-bottom: 0px;
	vertical-align:middle;
 } 

div.menu {
	 z-index:5;
	 bottom: 5%;
	 position:absolute;
	 background: rgba(255,255,255,.4);
	 /*background-color:#FFF;*/
	 /*opacity: .45;
     filter: alpha(opacity=80);*/
	 left: 50%;
	 margin-left: -225px;/*negative half of the divs width*/
     height: 80px;
     width:450px;
	 display:inline-block;
 }

div.textfixed {
	height: 80px;
	width: 150px;
	float:left;
	font-size:14px;
	font-family:"Gill Sans";
}

div.textscroll {
	height: 80px;
	width: 300px;
	float:right;
	font-size:14px;
	font-family:"Gill Sans Light";
}

.text marquee {
	color:#666;
}

#typetext {
	font-style:italic;
}

@keyframes slideDown{
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }
@-webkit-keyframes slideDown {
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }

@keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
@-webkit-keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
</style>

</head>

<body>

<div id="box0"></div>
<div id="box1"></div>
<div id="box2"></div>
<!--<div id="box3"></div>-->

<ul id="nav">
 <li class="navlogo"><img src="images/logo.png"></li>
 <li><a href="#">ABOUT VENSTA</a></li>
 <li><a href="#">PROPERTY DEVELOPMENT</a></li>
 <li><a href="#">CONTACT US</a></li>
</ul>
<div class="menu">
  <div class="textfixed">
    <table width="150" border="0">
  <tr>
    <td height="76" valign="middle" style="line-height:28px; padding-left:10px;">ON GOING<br />DEVELOPMENT</td>
    <td><img src="images/arrow_home.png"></td>
  </tr>
  </table>
</div><!--textfixed-->

<div class="textscroll">
<marquee behavior="scroll" scrolldelay="90"  direction="up" height="80" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();">
<table width="300" border="0">
   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png">     </td>
     <td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
   </tr>
   <tr>
     <td width="138" align="right" valign="middle"><div id="typetext">TYPE A</div></td>
     <td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeA.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type A" width="23" height="23"></a></td>
   </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png">     </td>
     <td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
   </tr>
   <tr>
     <td width="138" align="right" valign="middle"><div id="typetext">TYPE B</div></td>
     <td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeB.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type B" width="23" height="23"></a></td>
   </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Semi D" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
     </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Bungalow" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
     </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/putra_indah_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="putra_indah_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Putra Indah Bungalow" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
     </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/taman_kota_muhibbah_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="kota_muhibbah_terrace.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Kota Muhibbah Terrace" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Terrace</td>
     </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/bukit_mas_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="bukit_mas_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Bukit Mas Semi D" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
     </tr>

</table>
</marquee>
</div><!--textscroll-->
</div><!--menu-->

</body>
</html>

The attachments of this post were removed during the platform migration in 2018

coothead

Hi there aelynne,

change the highlighted value here...

[color=navy]
#box0,#box1,#box2,#box3 {
    position:relative;
    z-index:2;
    float:left;

width:32%;
height:100%;[color=red]
margin:-100% 1% 0 1%;[/color][/color]

...to this...

[color=navy]
    margin:-100% 0 0;[/color]

coothead

aelynne

still have gap. why?

aelynne

i have solved that. thank you. but another problem appear, that is the black line between the image, how to remove that?
[ATTACH]15781[/ATTACH]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vensta | Home</title>

<style>
html,body {
    margin:0;
    height:100%;
	background-color:#F69220;
    /*background-image:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,1.0));*/
	font-family:Arial, "Gill Sans", Helvetica, "Myriad Pro";
 }
#box0,#box1,#box2 {
    position:relative;
    z-index:2;
    float:left;

width:31.5%;
height:100%;
margin:-100% 0 0;

background-image:url(images/homebg1.png);
background-size:100% 100%;	
box-shadow:0px 0px 0px rgba(0,0,0,1.0),
      inset 0px  0px  0px rgba(0,0,0,1.0);

-webkit-transform:skew(-8deg);
-moz-transform:skew(-30deg);
-ms-transform:skew(-8deg);
-o-transform:skew(-8deg);
transform:skew(-8deg);

animation-delay:0s;
animation-duration:1s;
animation-name:slideDown;
animation-fill-mode:forwards;

-webkit-animation-delay:0s;
-webkit-animation-duration:1s;
-webkit-animation-name:slideDown;
-webkit-animation-fill-mode:forwards;
 }

#box0 {
	border-left: 12px solid #FFFFFF;
 }

#box1 {
    z-index:1;
    background-image:url(images/homebg2.png);
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
	border-left: 12px solid #FFFFFF;
 }
#box2 {
   z-index:0;
   background-image:url(images/homebg3.png);
   animation-delay:1s;
   -webkit-animation-delay:1s;
   border-left: 12px solid #FFFFFF;
   border-right: 12px solid #FFFFFF;
 }
/*#box3 {
    z-index:0;
    background-image:url(avenue.jpg);
    animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
 }*/

#nav {
    position:absolute;
    z-index:3;

width:100%;
padding:0;
margin:0;
border-top:0px solid rgb(0,0,0);
border-bottom:0px solid rgb(0,0,0);
bottom:20%;

list-style-type:none;
text-align:center;
background-color:#ffffff;
box-shadow:0 0 30px rgba(0,0,0,0.8);
     inset 0 0 0px rgba(0,0,0,0.8);
opacity:0;

animation-delay:2.0s;
animation-duration:1.0s;
animation-name:show;
animation-fill-mode:forwards;

-webkit-animation-delay:2.0s;
-webkit-animation-duration:1.5s;
-webkit-animation-name:show;
-webkit-animation-fill-mode:forwards;
 }
#nav li { 
    display:inline;
    margin:0 20px;
 }

#nav a {
    color:rgb(0,0,0); 
    text-transform:uppercase;
    text-decoration:none;
	color:#E34927;
	font-weight:bold;
	font-size:14px;
 }

#nav li.navlogo img{
	padding-bottom: 0px;
	vertical-align:middle;
 } 

div.menu {
	 z-index:5;
	 bottom: 5%;
	 position:absolute;
	 background: rgba(255,255,255,.4);
	 /*background-color:#FFF;*/
	 /*opacity: .45;
     filter: alpha(opacity=80);*/
	 left: 50%;
	 margin-left: -225px;/*negative half of the divs width*/
     height: 80px;
     width:450px;
	 display:inline-block;
 }

div.textfixed {
	height: 80px;
	width: 150px;
	float:left;
	font-size:14px;
	font-family:"Gill Sans";
}

div.textscroll {
	height: 80px;
	width: 300px;
	float:right;
	font-size:14px;
	font-family:"Gill Sans Light";
}

.text marquee {
	color:#666;
}

#typetext {
	font-style:italic;
}

@keyframes slideDown{
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }
@-webkit-keyframes slideDown {
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }

@keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
@-webkit-keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
</style>

</head>

<body>

<div id="box0"></div>
<div id="box1"></div>
<div id="box2"></div>
<!--<div id="box3"></div>-->

<ul id="nav">
 <li class="navlogo"><a href="index.html"><img src="images/logo.png"></a></li>
 <li><a href="about.html">ABOUT VENSTA</a></li>
 <li><a href="#">PROPERTY DEVELOPMENT</a></li>
 <li><a href="#">CONTACT US</a></li>
</ul>
<div class="menu">
  <div class="textfixed">
    <table width="150" border="0">
  <tr>
    <td height="76" valign="middle" style="line-height:28px; padding-left:10px;">ON GOING<br />DEVELOPMENT</td>
    <td><img src="images/arrow_home.png"></td>
  </tr>
  </table>
</div><!--textfixed-->

<div class="textscroll">
<marquee behavior="scroll" scrolldelay="90"  direction="up" height="80" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();">
<table width="300" border="0">
   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png">     </td>
     <td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
   </tr>
   <tr>
     <td width="138" align="right" valign="middle"><div id="typetext">TYPE A</div></td>
     <td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeA.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type A" width="23" height="23"></a></td>
   </tr>

<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
   </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png">     </td>
     <td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
   </tr>
   <tr>
     <td width="138" align="right" valign="middle"><div id="typetext">TYPE B</div></td>
     <td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeB.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type B" width="23" height="23"></a></td>
   </tr>

<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
   </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Semi D" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
   </tr>

   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Bungalow" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
   </tr>

<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
   </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/putra_indah_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="putra_indah_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Putra Indah Bungalow" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
   </tr>

<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
   </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/taman_kota_muhibbah_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="kota_muhibbah_terrace.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Kota Muhibbah Terrace" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Terrace</td>
   </tr>

<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
   </tr>

   <tr>
   	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/bukit_mas_logo.png">     </td>
     <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
     <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="bukit_mas_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Bukit Mas Semi D" width="23" height="23"></a></td>
   </tr>
   <tr>
     <td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
   </tr>

</table>
</marquee>
</div><!--textscroll-->
</div><!--menu-->

</body>
</html>

The attachments of this post were removed during the platform migration in 2018