How to move the blue twitter bird slowly using css and js?


Tags: javascript,html,css

Problem :

How to make the little bird fly back from the tree? it goes forward now, i want it to turn and come back...how to do it?

$(document).ready(function(){
  $(".bird").click(function(){
    $(this).addClass("birdmove");
  })
});
.bird img{
  width: 100px;
  height: auto;
}

.bird{
  position: absolute;
  left: 200px;
  top: 100px;
  z-index: 10;
  transition: transform 5s;
  transition-timing-function: ease;
}

.birdmove{
  transform: translateX(800px);
  animation: oscillate 5s;
  animation-timing-function: ease;
}
@keyframes oscillate {
  10% {top: 50px;}
  30% {top: 150px;}
  60% {top: 100px;}
  80% {top: 120px;}
  100% {top: 100px;}
}
<html>
<head>
	<title>preloader</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	  <link rel="stylesheet" type="text/css" href="preloader.css">
	  <script type="text/javascript" src="preloader.js"></script>
</head>
<body>
	
	

	<div class ="container">
		<div class = "row">
			<div class="col-sm-8">
				<div class="bird">
					<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" height="300" width="500" >
					
				</div>
			</div>
  			<div class="col-sm-4">
  				<div class="static-bird">
  					<img src="https://clipartion.com/wp-content/uploads/2015/11/love-birds-in-tree-clipart.jpeg">
	        	</div>
  			</div>
  		</div>
  	</div>
			
</body>

? While the other bird in branch will be static! How to animate it using CSS and JavaScript?

Thanks in advance !

enter image description here



Solution :

You can do it using CSS3 animation and transformation only and little jQuery to add a class and start the translation, if you don't want to make it very complex.

I have used two motions for bird to fly: 1 in X direction, other in Y direction. Both images are positioned absolute.

Here's the full code. You can change it accordingly:

$(document).ready(function(){
  $(".bird").click(function(){
    $(this).addClass("birdmove");
  })
});
.bird img{
  width: 100px;
  height: auto;
}
.static-bird img{
  width: 300px;
  height: auto;
}
.bird{
  position: absolute;
  left: 200px;
  top: 100px;
  z-index: 10;
  transition: transform 5s;
  transition-timing-function: ease;
}
.static-bird{
  position: absolute;
  right: 200px;
  top: 100px;
  z-index: 5;
}
.birdmove{
  transform: translateX(800px);
  animation: oscillate 5s;
  animation-timing-function: ease;
}
@keyframes oscillate {
  10% {top: 50px;}
  30% {top: 150px;}
  60% {top: 100px;}
  80% {top: 120px;}
  100% {top: 100px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class ="container">
  <div class = "row">
    <div class="col-sm-8">
      <div class="bird">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" height="300" width="500">
      </div>
    </div>
    <div class="col-sm-4">
      <div class="static-bird">
        <img src="https://clipartion.com/wp-content/uploads/2015/11/love-birds-in-tree-clipart.jpeg">
      </div>
    </div>
  </div>
</div>

  


    CSS Howto..

    How do you specify a css property to be applied only if the browser is IE in the stylesheet?

    How to use the .css function with jQuery

    Primefaces: how to change the default icon on the button of the calendar field?

    How to add css to dynamic div Id

    How to create a fixed menu (links come from right to left) - HTML & CSS

    How to make two buttons in column?

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    how I can change the size of font inside PHP

    How to find out an element with id partially matched, and change its css style?

    How do you ad stylesheets to JSDOM

    How to make text slide by only using css/html

    How to replicate this table layout in HTML4/CSS2 (incl. vert-centered rows)

    how to make smooth css transition

    How to fix incorrect element size on browser scaling?

    How to add a style only to certain elements of a list via CSS

    How to line up lists side by side?

    how to encrypt css/js filename

    How to make a colorful gradient glow around your input-box?

    How to add HTML/CSS using the editor on DNN? How to add markup without relying on modules?

    How to wrap UL list - LIs on new line with css

    How do sprites work in jqmobile?

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    How to center an absolutely positioned item in CSS

    How to reference an embedded image from CSS?

    How to get rid of the border bottom from my navigation

    Show button after login

    How to override nth-child

    How to call a javascript function with a css button? [closed]

    how to center background image in window resize

    How to set overflow content to go underneath instead of fitting in one row