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 can I center align the list horizontally?

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    asp.net+css+jQuery - how does it all work together?

    How detect first div clicked when all of them absolute

    How do I sort css selectors with vim?

    How do I stretch a div to be the height of the document body, not the viewport? (included code)

    How to make arrow in CSS with angle?

    How do you create different CSS for dynamically generated elements?

    How to rotate the background image in css?

    How to create a nested vertical menu with horizontally sub-menus using css

    how to define multiple classes' hover event in css?

    How to detect CSS translate3d without the webkit context?

    How to make padding:auto work in CSS?

    How to use sprite image in css?

    How to centre text as CSS content attribute vertically and horizontally?

    How do let CSS change the inset shadow on li hover, instead of resetting it?

    How to use CSS filters in JavaScript?

    css hover : aligning on bottom: how to align on top?

    How to change the src of an iframe with css

    How to change a div's position according to data from database

    How to override bootstrap styles?

    How can I get a CSS class selector to override the input[readonly] selector?

    How to perfectly center a “plus” sign in a circle using CSS

    How do i select only one column when hovering over it in a drop down jQuery menu?

    How to align tags withina div

    If you remove float: left they are centred, in combination with setting text-align: center with their parent div. That is, their immediate (first) parent div; give this an id....
    Read more

    How to center an item inside of a DIV

    (CSS) How to Shorten CSS code

    How to scroll left column when cursor is above right column?

    How to set variables in LESS from a dynamic website?

    How to format text in input box with css