my html animation element is displaying right in editor but not in preview mode?
How it looks in editor: [
How it looks in preview: [
The code I’m trying to implement: [ GitHub - codingstar-jason/3D-Flip-Book-Tutorial-Customized-CodingStar ]
How can I fix this? I tried displaying it as an iframe and it looks correct, but then it loses it’s ability to press the buttons to turn the page.
Enable it as an iFrame again, then in an HTML element do:
<style>
[the css code provided]
</style>
[html code provided]
<script>
[javascript provided]
</script>
Here’s the full thing I tested and it worked:
<style>
/* General */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
background-color: #dac400;
}
/* Button */
button {
border: none;
background-color: transparent;
margin: 10px;
cursor: pointer;
transition: transform 0.5s;
}
button:focus {
outline: none;
}
button:hover i {
color: rgb(102, 102, 102);
}
i {
color: gray;
font-size: 4em;
}
/* Book */
.book {
width: 350px;
height: 500px;
position: relative;
transition: transform 0.5s;
}
.paper {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
perspective: 1500px;
}
.front {
backface-visibility: hidden;
border-left: 3px solid #dac400;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
transform-origin: left;
transition: transform 0.5s;
}
.front {
z-index: 1;
}
.back {
z-index: 0;
}
.front-content,
.back-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.back-content {
transform: rotateY(180deg)
}
/* Paper Flipped */
.flipped .front,
.flipped .back {
transform: rotateY(-180deg)
}
/* Paper Z-index */
#p1 {
z-index: 3;
}
#p2 {
z-index: 2;
}
#p3 {
z-index: 1;
}
/* Customization */
.book-title {
font-size: 3em;
margin-bottom: 40px;
}
.cover-img {
width: 200px;
height: 270px;
object-fit: cover;
border-radius: 30px;
}
#b1 {
padding: 20px;
text-align: center;
font-size: 1.2em;
justify-content: space-around;
}
#b1 h2 {
font-size: 2em;
margin-top: 10px;
margin-bottom: 20px;
}
#b1 p {
margin-bottom: 20px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book</title>
<link rel="stylesheet" href="./style.css">
<script src="https://kit.fontawesome.com/b0f29e9bfe.js" crossorigin="anonymous"></script>
<script defer src="./main.js"></script>
</head>
<body>
<button id="prev-btn">
<i class="fas fa-arrow-circle-left"></i>
</button>
<!-- The Book -->
<div id="book" class="book">
<!-- Paper 1 -->
<div id="p1" class="paper">
<div class="front">
<div id="f1" class="front-content">
<h1 class="book-title">Little Dog</h1>
<img class="cover-img" src="./dog.jpg" alt="dog">
</div>
</div>
<div class="back">
<div id="b1" class="back-content">
<h2>Some Intro</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
</div>
</div>
</div>
<!-- Paper 2 -->
<div id="p2" class="paper">
<div class="front">
<div id="f2" class="front-content">
<h1>Some Cool Page</h1>
</div>
</div>
<div class="back">
<div id="b2" class="back-content">
<h1>An Awesome Page</h1>
</div>
</div>
</div>
<!-- Paper 3 -->
<div id="p3" class="paper">
<div class="front">
<div id="f3" class="front-content">
<h1>An Amazing Page</h1>
</div>
</div>
<div class="back">
<div id="b3" class="back-content">
<h1>The Good Bye</h1>
</div>
</div>
</div>
</div>
<button id="next-btn">
<i class="fas fa-arrow-circle-right"></i>
</button>
</body>
</html>
<script>
// References to DOM elements
const prevBtn = document.querySelector('#prev-btn');
const nextBtn = document.querySelector('#next-btn');
const book = document.querySelector('#book');
const paper1 = document.querySelector('#p1')
const paper2 = document.querySelector('#p2')
const paper3 = document.querySelector('#p3')
// Event listeners
prevBtn.addEventListener("click", goPrevious);
nextBtn.addEventListener("click", goNext);
// Business Logic
let currentState = 1;
let numOfPapers = 3;
let maxState = numOfPapers + 1;
function openBook() {
book.style.transform = "translateX(50%)";
prevBtn.style.transform = "translateX(-180px)";
nextBtn.style.transform = "translateX(180px)";
}
function closeBook(isFirstPage) {
if(isFirstPage) {
book.style.transform = "translateX(0%)";
} else {
book.style.transform = "translateX(100%)";
}
prevBtn.style.transform = "translateX(0px)";
nextBtn.style.transform = "translateX(0px)";
}
function goNext() {
if(currentState < maxState) {
switch(currentState) {
case 1:
openBook();
paper1.classList.add("flipped");
paper1.style.zIndex = 1;
break;
case 2:
paper2.classList.add("flipped");
paper2.style.zIndex = 2;
break;
case 3:
closeBook(false);
paper3.classList.add("flipped");
paper3.style.zIndex = 3;
break;
default:
throw new Error("unkown state");
}
currentState++;
}
}
function goPrevious() {
if(currentState > 1) {
switch(currentState) {
case 2:
closeBook(true);
paper1.classList.remove("flipped");
paper1.style.zIndex = 3;
break;
case 3:
paper2.classList.remove("flipped");
paper2.style.zIndex = 2;
break;
case 4:
openBook()
paper3.classList.remove("flipped");
paper3.style.zIndex = 1;
break;
}
currentState--;
}
}
</script>
My guess is some HTML bubble has is conflicting with this HTML, and when you do the iFrame if you’re running the Javascript on page load it can’t find any of the elements anymore because it is isolated. So instead you can run the JS inside the HTML element itself.
Perfect, thanks for explaining the proper format and structure as well!
This topic was automatically closed after 70 days. New replies are no longer allowed.