Creating a flip-book with HTML and CSS

timothy ogbemudia's photo
timothy ogbemudia
·

0 min read

This is a simple flip-book done in HTML and CSS. This is geared towards beginners or anyone who may be frustrated with front-end development. I’ll also add a link to the GitHub repository in-case you want to clone it.

Here’s the code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
  <!--you put the link to your own stylesheet above--->
    <title>Ice Skater Flip-Book</title>
</head>
<body>
<h1>Ice Skater Flip-Book</h1>
<section class="I"></section>
<section class="II"></section>
<section class="III"></section>
<section class="IV"></section>
<section class="V"></section>
<section class="VI"></section>
<section class="VII"></section>
<section class="VIII"></section>
<section class="IX"></section>
<section class="X"></section>
<section class="XI"></section>
<section class="XII"></section>
<section class="XIII"></section>
<section class="XIV"></section>

</body>
</html>

html{
    box-sizing: border-box;    
}
body{
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Helvetica,sans-serif;
}
h1{
    position: fixed;
    width: 100%;
    font-size:250%;
    color: #fff;
    text-align: center;
}
section{
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center top;
    width: 100%;
    height: 100vh;
}
/*--Insert your own background image below---*/
.I{
background-image:url(Images/IceSkater1.JPG);
}
.II{
    background-image: url(Images/IceSkater2.JPG);
}
.III{
    background-image: url(Images/IceSkater3.JPG);
}
.IV{
    background-image: url(Images/IceSkater4.JPG);
}
.V{
    background-image: url(Images/IceSkater5.JPG);
}
.VI{
    background-image: url(Images/IceSkater6.JPG);
}
.VII{
    background-image: url(Images/IceSkater7.JPG);
}
.VIII{
    background-image: url(Images/IceSkater8.JPG);
}
.IX{
    background-image: url(Images/IceSkater9.JPG);
}
.X{
    background-image: url(Images/IceSkater10.JPG);
}
.XI{
    background-image: url(Images/IceSkater11.JPG);
}
.XII{
    background-image: url(Images/IceSkater12.JPG);
}

.XIII{
    background-image: url(Images/IceSkater13.JPG);
}

.XIV{
    background-image: url(Images/IceSkater14.JPG);
}

The HTML file is pretty straightforward just a header and our sections with the class names.

The CSS is also not to complicated pretty basic stuff going on with the body and h1 element. It gets really interesting in the Section element’s styling. We give it a background-repeat of no-repeat and yes you guessed it… it literally means what you think. We’re saying the background should not be repeated.

Now finally to the piece of magic making this baby work. We set the background-attachment to “fixed”. Now all this is saying is that the background should effectively be rooted to the spot(fixed) regardless of whatever’s happening and this by and large is responsible for the flip-book actually working when we scroll and voila you have yourself a flip-book or scroll-book in this case. Show this off to your friends , family they’ll undoubtedly be in awe that you made this.

glamboyosa/Ice-Skater-Flip-book _Contribute to glamboyosa/Ice-Skater-Flip-book development by creating an account on GitHub._github.com

CSSHTML