How to leave CEP form sliding the same as ifood's website? [closed]

Navigation
2

This is the form of the site I want to change: artnaweb.com.br/pediragua

Leave this same: ifood.com.br

I do not understand Jquery. I have knowledge only of HTML and CSS. Thanks!

    
asked by anonymous 03.02.2017 / 01:16

1 answer

4

If you are aware of CSS3 you can create the animation in CSS3 and use javascript only to include the animation class, but you do not even need to use Jquery if you do not know it, it can be with pure Javascript anyway.

Example of javascript code that can be used to add a class to some element located by the id: 

<script type="text/javascript">
    function ani(){
        document.getElementById('img').className ='classname';
    }
</script>

Botão q ativa a função:
<input type="button"  name="" value="Teste"  onclick="ani()" />

Now below is a functional example with animation running to the side and disappearing: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.desapareceesquerda, .aparecedireita, .apareceesquerda, .desaparecedireita {
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}

.desapareceesquerda { -webkit-animation-name: desapareceesquerdaAnimation; }

.aparecedireita { -webkit-animation-name: aparecedireitaAnimation; }

.apareceesquerda { -webkit-animation-name: apareceesquerdaAnimation; }

.desaparecedireita { -webkit-animation-name: desaparecedireitaAnimation; }


@keyframes desapareceesquerdaAnimation {
  from {
   margin-left:0;
   opacity:1;
   filter: alpha(opacity=100); /* For IE8 and earlier */
   z-index:2;
  }
      
  to {
    margin-left:-50%;
	opacity:0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	z-index:1;
  }
}


@keyframes aparecedireitaAnimation {
  from {

   opacity:0;
   filter: alpha(opacity=0); /* For IE8 and earlier */
   width:50%; left:50%;
   z-index:1;
  }
      
  to {

	opacity:1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	width:100%; left:0;
	z-index:2;
  }
}


@keyframes apareceesquerdaAnimation {
  from {
    margin-left:-50%;
	opacity:0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	z-index:1;  

  }
      
  to {
   margin-left:0;
   opacity:1;
   filter: alpha(opacity=100); /* For IE8 and earlier */
   z-index:2;	
  }
}


@keyframes desaparecedireitaAnimation {
  from {
	opacity:1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	width:100%; left:0;
	z-index:2;
  }
      
  to {
   opacity:0;
   filter: alpha(opacity=0); /* For IE8 and earlier */
   width:50%; left:50%;
   z-index:1;  
  }
}



#container { width:80%; margin:auto; position:relative;}

#divesquerda,#divdireita { float:left; width:100%; position:absolute; top:0; left:0; }

#divesquerda { background-color:#fda; z-index:2;  }

#divdireita { 
	background-color:#adf; width:50%;  /* div começa encolhida pela metade pra não criar barra de rolagem */
	left:50%; 
	z-index:1;
	
	opacity:0;
	filter: alpha(opacity=0); /* For IE8 and earlier */  
} 


</style>
  <script type="text/javascript">
        function saiesquerdaentradireita(){
            document.getElementById('divesquerda').className ='desapareceesquerda';
			
			document.getElementById('divdireita').className ='aparecedireita';
        }
		
        function saidireitavoltaesquerda(){
            document.getElementById('divesquerda').className ='apareceesquerda';
			
			document.getElementById('divdireita').className ='desaparecedireita';
        }		
  </script>
<title>Untitled Document</title>
</head>

<body>

<div id="container">

	<div id="divesquerda">
		<input type="button"  name="" value="&laquo; Trocar"  onclick="saiesquerdaentradireita()" /> <br>
		<img src="https://i.stack.imgur.com/cKG89.jpg?s=328&g=1"width="308" height="308" />
	</div>

	<div id="divdireita">
		<input type="button"  name="" value="Voltar &raquo;"  onclick="saidireitavoltaesquerda()" /> <br>
		<img src="https://graph.facebook.com/1793996810886126/picture?type=large"width="308" height="308" />
	</div>

	<br clear="both">
</div>

</body>
</html>
    
03.02.2017 / 02:08
Receive input code Path access error was denied