how to have a scrool scroll animation on a script

Question

what i mean by that is i am makeing a website and it has scroll animation and a phaser.js game what i want is to that scroll animation to be able to the same afect on the phaser game i have 2 class name are hidden and show they do the scroll animation

it trd to put script into a div class dut it did not work this is also on https://github.com/CrystalX775/probable-telegram

js code

const observer = new IntersectionObserver((entries) =>{
  entries.forEach((entry) => {
  console.log(entry)
  if(entry.isIntersecting){
      entry.target.classList.add('show');
  } else{
      entry.target.classList.remove('show');
  }

  });
});
const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el)=> observer.observe(el));

function myfunction() {
document.getElementById("Hacker1").style.color = "blue";
};
function myFunction1() {
document.getElementById("Hacker1").style.color = "red";
}
let pepole = prompt("Please enter your name");
if(pepole != null){
  document.getElementById("demo").innerHTML = "Hello " + pepole + "! How are you today?";
}

phaser.js code

function preload() {
    this.load.image('codey', 'https://content.codecademy.com/courses/learn-phaser/codey.png');
  }
  
  function create() {
    this.add.sprite(50, 50, 'codey');
  }
  
  const config = {
      type: Phaser.AUTO,
      width: 1300,
      height: 300,
      backgroundColor: "#5f2a55",
      scene: {
      create,
      preload
      }
  }
  
  const game = new Phaser.Game(config)

html code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<div class="scripts">
<script defer src="app.js"></script>
<link rel="stylesheet" href="style.css">
</div>
<body>
<section>
  <h1 onmouseout="myFunction1()"onmouseover="myfunction()" style="font-size: 60px;"id="Hacker1"class="hidden">HackerXGames</h1>
  <p class="hidden">this is my way to play</p>
</section>
<section>
  <h1 style="font-size: 30px;" class="hidden" id="demo"></h1>
</section>
<section class="hidden">
  <div class="hidden">
  <script  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
  <script src="game.js"></script>
</div>
</section>
</body>
</html>

css code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
body{
    background-color: #131316;
    color: #ffffff;
    font-family: Poppins, sans-serif;
    padding: 0;
    margin: 0;
}
section {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100vh;
}
.hidden{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
.media{
    display: flex;
}
.media:nth-child(2){
    transition-delay: 200ms;
}
.media:nth-child(3){
    transition-delay: 7s;
}

Did my solution work for you, if so please consider accepting my anwser, or if I missed something, just let me know. Thank you :) — winner_joiner
– winner_joiner, Commented Dec 12, 2023 at 14:12

winner_joiner · Accepted Answer · 2023-12-11 07:22:41Z

The problem is that you have to tell phaser where to put the "game", if not it will just append it to the DOM.

The solution is pretty easy:

In the html-code:

move the <script> out of the <section> into the <body> at the end
add an id to the <section> where the game should be displayed.

In the Javascript code:

add the parent property to the Phaser config (link to the documentation).

the result should look like this:

html:
(Just the main parts are shown)

<!DOCTYPE html>
<html lang="en">
    <head>
     ...
    </head>
    <body>
        ...
        <section>
          <h1 style="font-size: 30px;" class="hidden" id="demo"></h1>
        </section>
        <section id="game" class="hidden">
            <!-- here the game will be added -->
        </section>
        <script  src=".../phaser.js"></script>
        <!-- you game should be loaded after phaser and after the "parent" -->
        <script src="game.js"></script>  
    </body>
</html>

javascript:
(Just the main parts are shown)

const config = {
    type: Phaser.AUTO,
    parent: 'game',    // <-- here add the HTML "id", where phaser should add the game
    ...
}

Collectives™ on Stack Overflow

how to have a scrool scroll animation on a script

1 Answer 1

The solution is pretty easy:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The solution is pretty easy:

Comments

Your Answer

Sign up or log in

Post as a guest

Related