How to move object in html?

Question

I want to move the scooter from right to left

Here you can see the scooter. I want when page finishes the loading I want the scooter to move near to that chair were lady sits.

Here is my code:-

.inner-girl-icon {
  float: right;
  margin: 5px 262px;
  max-width: 75px;
  width: 100%;
}

<div class="col-md-8 col-sm-8 col-xs-12">
  <div class="girl-icon">
    <span class="inner-girl-salon"><img src="{{ asset('images/demo/salon-icon.png') }}" class="img-responsive"></span>
  </div>
  <div class="girl-icon">
    <span class="inner-girl-icon"><img src="{{ asset('images/demo/demo1.jpg') }}" class="img-responsive"></span>
  </div>
</div>

http://stackoverflow.com/a/41563719/4206079 – Banzay Jan 30 '17 at 13:26 — Banzay, Jan 30 '17 at 13:26

score 2 · Accepted Answer · answered Jan 30 '17 at 13:27

You can add an animation in CSS3 who move the scooter element next to the chair.

With Jquery add in the ready event add your animated class.

Example

$(document).ready(function(){
  $(".scooter").addClass("animon");
});

.container{
  position:relative;
}

.chair{
  position:absolute;
  left:50px;
  background-color:blue;
  width:40px;
  height:40px;
}

.scooter{
  position:absolute;
  left:400px;
  background-color:green;
  width:40px;
  height:40px;
}

.animon{
  animation:animscooter 2s ease-out forwards;
}

@keyframes animscooter{
  0%{
    left:400px;
  }
  100%{
    left:90px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="chair">
  </div>
  <div class="scooter">
  </div>
</div>

score 1 · Answer 2 · answered Jan 30 '17 at 13:26

try this code

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    -webkit-animation: myfirst 5s infinite; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation: myfirst 5s 3s;
    animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    25%  {background: yellow; left: 200px; top: 0px;}
}

@keyframes myfirst {
    25%  {background: yellow; left: 200px; top: 0px;}
}
</style>
</head>
<body>

<div></div>


</body>
</html>

change your direction as per your requirement

score 0 · Answer 3 · edited May 23 '17 at 12:33

0

$(window).on('load', function() {
   // executes when page is fully loaded, including all frames, objects and images
   $("#scooter").animate({left: "100px"});
});

More details here: http://api.jquery.com/animate/

And here: Difference between $(window).load() and $(document).ready() functions

edited May 23 '17 at 12:33

Community

1
1

answered Jan 30 '17 at 13:32

TwistedOwl

1,195
1
17
30

score 0 · Answer 4 · answered Jan 30 '17 at 13:35

Here's a working example, this take care about the container divs, it's children by inheritance changing some HTML and the "scooter" with it's personal CSS settings setting an ID to it.

After 2 seconds I've made the float change.

Take a look:

// Wait for DOM load
$(document).ready(function() {
  // The element goes left 2 seconds later for example
  setTimeout(function() {
    // Changing the CSS attribute
    $('#scooter').css('float', 'left');
    // Console message
    console.log('changed!');
  }, 2000);
});

/* Instead of margin in girl-icon i'm setting default width to both containers */
.girl-icon {
  width: 100px;
  float: left;
}

/* Scooter default CSS */
#scooter {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="girl-icon">
  <!-- Converted to div -->
  <div class="inner-girl-salon">
    <!-- Represents the 1st image -->
    <div id="person">person</div>
  </div>
  <!-- Clear both -->
  <div style="clear:both"></div>
</div>
<div class="girl-icon">
  <!-- Converted to div -->
  <div class="inner-girl-icon">
    <!-- Represents the 2nd image -->
    <div id="scooter">scooter</div>
  </div>
  <!-- Clear both -->
  <div style="clear:both"></div>
</div>

<!-- Clear both -->
<div style="clear:both"></div>

How to move object in html?

4 Answers4