In Defense of Happily Ever-After

Reevaluating the Romance Novel

Sarah Bacharach

Responsive

Fully responsive CSS flip book, thanks to the

Even more, the book height is dicated by the amount of content in the tallest page. The only thing you need to take care of is how much text you put into a page.

JS at its minimum

JavaScript is at its minimum. Basically it's only used to set the initial page index and assign click listeners to the pages. Modifies the CSS Var for the current page, and the rest is handled entirely by CSS.

Additionally JavaScript allows you to click on an anchor link in your text — without turning the page. You can also have multiple independent flip books in a single document. You're all covered.

That's all, folks

📖📚📖📚

<!DOCTYPE html>

<html>

<head>

<style>

* { box-sizing: border-box; }

/* FlipBook */

body {

/* or any other parent wrapper */

margin: 0;

display: flex;

min-height: 100dvh;

perspective: 1000px;

font: 10em/1.4 "EB Garamond", serif;

overflow: hidden;

background-image: radial-gradient(circle farthest-corner at 50% 50%, hsl(187 20% 88%) 30%, hsl(149 20% 94%) 100%);

}

.book {

position: relative;

display: flex;

margin: auto;

width: 65cqmin;

height: 300px;

/*1* let pointer event go trough pages of lower Z than .book */

pointer-events: none;

transform-style: preserve-3d;

transition: translate 1s;

translate: calc(min(var(--c), 1) * 50%) 0%;

/* Incline on the X axis for pages preview */

rotate: 1 0 0 5deg;

}

.page {

/* PS: Don't go below thickness 0.5 or the pages might transpare */

--thickness: 4;

flex: none;

display: flex;

width: 100%;

font-size: 2cqmin;

/*1* allow pointer events on pages */

pointer-events: all;

user-select: none;

transform-style: preserve-3d;

transform-origin: left center;

transition:

transform 1s,

rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);

translate: calc(var(--i) * -100%) 0px 0px;

transform: translateZ( calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * .23cqmin)));

rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);

}

.front,

.back {

position: relative;

flex: none;

width: 100%;

backface-visibility: hidden;

overflow: hidden;

background-color: #fff;

translate: 0px;

}

.back {

translate: -100% 0;

rotate: 0 1 0 180deg;

}

/* That's it. Your FlipBook customization styles: */

.book {

counter-reset: page -1;

}

.page {

box-shadow: 0em .5em 1em -.2em #00000020;

}

.front,

.back {

display: flex;

flex-flow: column wrap;

justify-content: space-between;

padding: 2em;

border: 1px solid #0002;

}

.front {

background: linear-gradient(to left, #f7f7f7 80%, #eee 100%);

border-radius: .1em .5em .5em .1em;

}

.back {

&::after {

left: 1em;

}

background-image: linear-gradient(to right, #f7f7f7 80%, #eee 100%);

border-radius: .5em .1em .1em .5em;

}

.cover {

background: radial-gradient(circle farthest-corner at 80% 20%, hsl(330, 80%, 90%) 0%, hsl(330, 60%, 80%) 100%),

hsl(231, 32%, 29%) 50% / cover;

color: hsl(200, 30%, 98%);

}

h1 {

font-size: 20px;

color: #FFFFFF;

text-align: center;

margin-top: 40px;

text-transform: uppercase;

}

h2 {

font-size: 10px;

color: #FFFFFF;

text-align: center;

margin-top: -50px;

text-transform: uppercase;

}

</style>

</head>

<body>

<h1>In Defense of Happily Ever-After</h1>

<h2> Reevaluating the Romance Novel</h2>

<p>Sarah Bacharach</p>

</div>

<h2>Responsive</h2>

<p>Fully responsive CSS flip book, thanks to the</p>

</div>

<p>Even more, the book height is dicated by the amount of content in the tallest page.

The only thing you need to take care of is how much text you put into a page.</p>

</div>

</div>

<h2>JS at its minimum</h2>

<p>JavaScript is at its minimum. Basically it's only used to set the initial

page index and assign click listeners to the pages. Modifies the CSS <b>Var</b>

for the <i>current</i> page, and the rest is handled entirely by CSS.</p>

</div>

<p>Additionally JavaScript allows you to click on an anchor link in your

text — without turning the page. You can also have multiple independent

flip books in a single document. You're all covered.</p>

</div>

</div>

<h3>That's all, folks</h3>

</div>

const flipBook = (elBook) => {

elBook.style.setProperty("--c", 0); // Set current page

elBook.querySelectorAll(".page").forEach((page, idx) => {

page.style.setProperty("--i", idx);

page.addEventListener("click", (evt) => {

if (evt.target.closest("a")) return;

const curr = evt.target.closest(".back") ? idx : idx + 1;

elBook.style.setProperty("--c", curr);

});

};

document.querySelectorAll(".book").forEach(flipBook);

</script>

</body>

</html>

Html teg

Pages

Books 2

In Defense of Happily Ever-After

Reevaluating the Romance Novel

Responsive

JS at its minimum

That's all, folks

No comments:

Post a Comment

Audio file