Labels

Animation(ChessBoard)

*******************************
HTML Code
*******************************
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Chess Board</title>
</head>

<body onload="squareSize()">
    <div class="chessBoard">
        <div class="container" id="rowA">
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
        </div>
        <div class="container">
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
        </div>
        <div class="container">
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
        </div>
        <div class="container">
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
        </div>
        <div class="container">
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
        </div>
        <div class="container">
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
        </div>
        <div class="container">
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
        </div>
        <div class="container">
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
        </div>
        <div class="container">
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
        </div>
        <div class="container">
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
        </div>
        <div class="container">
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
        </div>
        <div class="container">
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
            <div class="boxBlack"> </div>
            <div class="boxWhite"> </div>
        </div>
    </div>
</body>
<script src="index.js"></script>

</html>
*******************************
CSS Code
*******************************
*{
    padding: 0px;
    margin: 0px;
}
.boxWhite:hover{
    transform: rotate(360deg);
}

.boxWhite{
    position: relative;
    background-color: white;
    height: 1px;
    width: 1px;
    transition: all .5s ease-in-out;
    border: 1px solid;
    /* transition: all 2s ease-in-out; */
}

.boxBlack:hover{
    transform: rotate(-360deg);
}

.boxBlack{
    position: relative;
    background-color: black;
    height: 1px;
    width: 1px;
    border: 1px white;
    transition: all 1s ease-in-out;
}

.container{
    float: left;
    margin: -1px;
}


.chessBoard{
    position: absolute;
    margin: inherit;
}

#rowA{
    margin: 0px 0px 0px 8px;
}
*******************************
JS Code
*******************************
function squareSize(){
    let x = screen.width;
    let y = screen.height;
    let size = (x/12)-2;
    console.log(size +'px');
    console.log(x);
    for (let index = 0; index < document.getElementsByClassName('boxWhite').length; index++) {
        // document.getElementsByClassName('boxWhite')[index].style.hight = '200';
        // document.getElementsByClassName('boxWhite')[index].style.width = '200';
        // document.getElementsByClassName('boxBlack')[index].style.hight = '200';
        // document.getElementsByClassName('boxBlack')[index].style.width = '200';
        document.getElementsByClassName('boxWhite')[index].style.height = size +'px'
        document.getElementsByClassName('boxWhite')[index].style.width =size +'px'
        document.getElementsByClassName('boxBlack')[index].style.height = size +'px'
        document.getElementsByClassName('boxBlack')[index].style.width = size +'px'
    }
}
Labels:

Comments

Post a Comment