Skip to content

Instantly share code, notes, and snippets.

@randName

randName/index.html

Created February 6, 2019 10:33
Show Gist options
  • Save randName/8038923a81217c7e368e903e4069222d to your computer and use it in GitHub Desktop.
Save randName/8038923a81217c7e368e903e4069222d to your computer and use it in GitHub Desktop.
Download ZIP
animatedDog
Raw
index.html
<html>
<head>
<style>
.buttonInImage {
position: relative;
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.buttonInImage img {
width: 100%;
height: auto;
}
.buttonInImage .btn1 {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.buttonInImage .btn1:hover {
background-color: black;
}
.buttonInImage .btn2 {
position: absolute;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.buttonInImage .btn2:hover {
background-color: black;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h2>Button on Image</h2>
<div id="dog" class="buttonInImage">
<img src="https://loremflickr.com/320/240/dog" alt="Doggy">
<button id="shift" class="btn1">Move</button>
<button id="stop" class="btn2">Stop</button>
</div>
<script>
$(document).ready(function () {
//Task to move back and forth infinitely, able to pause at any time,
//start again from where was last stopped
function animateLoop() {
$("#dog").animate({ left: "-=750" }, 2000)
.animate({ left: "+=750" }, 2000, function () { animateLoop() });
}
$("#shift").click(function () {
animateLoop();
});
$("#stop").click(function () {
$("#dog").stop();
$("#dog").stop();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment