How to leave ZIP form sliding equal to ifood site?

Asked

Viewed 186 times

2

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

Leave the same as this: ifood.combr.

I don’t understand Jquery. I have knowledge only of HTML and CSS. Thank you!

javascript jquery html css
  • 1

    It would be interesting for you to show what you have already tried and post your code in the way that this question does not go if possible from a canonical answer. Do the tour to learn how the site works.

  • Guy looks for Jquey functions

  • Cool, thanks for the suggestion.. I’m new on the site and this is my first post. But next time, I will follow the guidelines of "home" rs. Thank you.

1 answer

4

Bira, if you have knowledge of CSS3 you can create the animation in CSS3 and use javascript only to include the animation class, but you don’t even need to use Jquery if you don’t know, it can be with pure Javascript even.

Example of javascript code that can be used to add a class to an element located by 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 sideways 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>

  • Hello Antonio, good night! Thanks for helping me... I have no advanced knowledge in CSS... but based on what you put here, I managed to make the animation of the form disappear.... bad as I do to appear another form and have the option to return (like the ifood site) Again thank you, and sorry if I’m abusing..

  • You can try putting an invisible div next to each other and make it appear. To make the return makes another animation with another name doing the reverse. I will create a better example here and edit my answer.

  • Pow show.. super thank you if you managed to create the sample code!

  • I edited the example code. Now you have two Divs.

  • Show partner top! I got it all right! Thank you so much... if you have anything I can do as a reward here on the site, just talk.. helped a lot! = D Congratulations!!!

  • Good! I’m happy! Big hug! :)

Show 1 more comment

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.