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;

Leave a Reply

Your email address will not be published. Required fields are marked *