Thursday 20 February 2014

How to make image transition effect by css and html5

we often use javascript to make image move, but it is quite easy when using css. Countinues the previous game: guessing number, we now add an image of ruler and an arrow to show where is the number.

css code:
#stage
{
width: 300px;
height: 33px;
position: relative;
}
#scale
{
  width: 300px;
  height: 33px;
  position: absolute;
  top: 0px;
  left: 5px;
  background-image: url(../images/scale.png);
}
#arrow
{
   width: 13px;
   height: 22px;
   position: absolute;
   top: 10px;
   left: 0px;
   background-image: url(../images/arrow.png);
   /*Transition*/
   -webkit-transition: left 0.5s ease-out 0s;
   -moz-transition: left 0.5s ease-out 0s;
   transition: left 0.5s ease-out 0s;
}

button
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff;
padding: 10px 20px;
border: 2px solid #000;
cursor: pointer;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

background:-webkit-linear-gradient(top, #a3a3a3, #000);
background:-moz-linear-gradient(top, #a3a3a3, #000);
background: linear-gradient(top, #a3a3a3, #000);
-webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
button:hover
{
background: -webkit-linear-gradient(top, #acc7a3, #506651);
background: -moz-linear-gradient(top, #acc7a3, #506651);
background: linear-gradient(top, #acc7a3, #506651);
}
button:active
{
background: -webkit-linear-gradient(top, #858565, #c5c9a9);
background: -moz-linear-gradient(top, #858565, #c5c9a9);
background: linear-gradient(top, #858565, #c5c9a9);
}
 html and javascript code:
<!doctype html>
<meta charset="utf-8">
<title>Đoán số</title>
<link type='text/css' rel='stylesheet' href='css/style.css' />

<div id="stage">
<div id="scale"></div>
<div id="arrow"></div>
</div>

<p id="output">Đây là một số trong khoảng từ 1 đến 99</p>
<input id="input" type="text" placeholder="Điền số..." autofocus>
<button>Kiểm tra</button>
<script>
//Game variables
var mysteryNumber = Math.floor(Math.random() * 100);
console.log(mysteryNumber);
var playersGuess = 0;
var guessesRemaining = 10;
var guessesMade = 0;
var gameState = "";
var gameWon = false;
//The input and output fields
var input = document.querySelector("#input");
var output = document.querySelector("#output");
//The button
var button = document.querySelector("button");
button.addEventListener("click", clickHandler, false);
button.style.cursor = "pointer";
//The arrow
var arrow = document.querySelector("#arrow");
function render()
{
//Position the arrow
//Multipy the players guess by 3 to get the
//correct pixel position on the scale
arrow.style.left = playersGuess * 3 + "px";
}
//Listen for enter key presses
window.addEventListener("keydown", keydownHandler, false);
function keydownHandler(event)
{
if(event.keyCode === 13)
{
validateInput();
}
}
function clickHandler()
{
validateInput();
}
function validateInput()
{
playersGuess = parseInt(input.value);
if(isNaN(playersGuess))
{
output.innerHTML = "Điền vào số.";
}
else
{
playGame();
}
}
function playGame()
{
guessesRemaining = guessesRemaining - 1;
guessesMade = guessesMade + 1;
gameState = " Số lần đã đoán: " + guessesMade + ", Còn lại: " + guessesRemaining;
playersGuess = parseInt(input.value);
if(playersGuess > mysteryNumber)
{
output.innerHTML = "Số này cao hơn số bí mật." + gameState;
//Check for the end of the game
if (guessesRemaining < 1)
{
endGame();
}
}
else 
if(playersGuess < mysteryNumber)
{
output.innerHTML = "Số này thấp hơn số bí mật." + gameState;
//Check for the end of the game
if (guessesRemaining < 1)
{
endGame();
}
}
else if(playersGuess === mysteryNumber)
{
gameWon = true;
endGame();
}
//Update the graphic display
render();
}
function endGame()
{
if (gameWon)
{
output.innerHTML = "Số " + mysteryNumber + " chính là số cần tìm!" + "<br>" + "Bạn mất " + guessesMade + " lần đoán.";
}
else
{
output.innerHTML = "Không còn lựa chọn nào!" + "<br>" + "Số bí mật là: " + mysteryNumber + ".";
}
//Disable the button
button.removeEventListener("click", clickHandler, false);
button.disabled = true;
//Disable the enter key
window.removeEventListener("keydown", keydownHandler, false);
//Disable the input field
input.disabled = true;
}
</script>
 First, we add  this code to display scale and arrow image. Each div have its id, to display background image by html and css below.
html code:
<div id="stage">
<div id="scale"></div>
<div id="arrow"></div>
</div>
css code:
#stage
{
width: 300px;
height: 33px;
position: relative;
}
#scale
{
  width: 300px;
  height: 33px;
  position: absolute;
  top: 0px;
  left: 5px;
  background-image: url(../images/scale.png);
}
#arrow
{
   width: 13px;
   height: 22px;
   position: absolute;
   top: 10px;
   left: 0px;
   background-image: url(../images/arrow.png);
   /*Transition*/
   -webkit-transition: left 0.5s ease-out 0s;
   -moz-transition: left 0.5s ease-out 0s;
   transition: left 0.5s ease-out 0s;
}
Everytime we add new number, we caculate position of the arrow, then call a function to change value of its css by the code bellow:
function render()
{
arrow.style.left = playersGuess * 3 + "px";
}
this function is call in they function playGame(). So that it is called everytime we guess a number.
To make the transition more smooth, we use the css bellow:
  -webkit-transition: left 0.5s ease-out 0s;
   -moz-transition: left 0.5s ease-out 0s;
   transition: left 0.5s ease-out 0s;
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)