Czemu kod działa mi tylko na codepen?

pytanie zadane 15 stycznia 2021 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)
zamknięte 19 stycznia 2021 przez AgentTecza

Mam problem zrobiłem animowaną sekcję, lecz jak odpalam ja na codepenie to wtedy działa a gdy odpalam ją u siebie jako plik w przeglądarce kod nie działa czy muszę mieć do tego localhosta a jak tak to jak zrobić takowy localhost?

Codepen: https://codepen.io/AgentTecza/pen/poEbemE

cody są idetyczne!

HTML:
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="css.css"/>
</head>
<body>
    <div class= "tekst">
        <p>TEKST</p>
      </div>
      <div class = "sc">
        <p class = "sc-scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta erat velit, in feugiat velit lobortis id. Mauris quam turpis, venenatis eget imperdiet ac, finibus sit amet nulla. Nulla facilisi. Fusce sed nisl mauris. Integer cursus dui tellus, vitae rutrum orci vulputate et. Nulla commodo libero nunc, eget finibus sem blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam vitae sagittis metus, ut rhoncus risus. Morbi turpis neque, auctor sit amet tempus interdum, ornare vitae metus. Aenean at lorem quis elit ullamcorper tempor. Integer vel est commodo, facilisis dui in, molestie odio. In hac habitasse platea dictumst. Phasellus lacinia ex vel volutpat venenatis. Proin fermentum euismod nisl sed elementum.
      
        </p>
        
      </div>
</body>

CSS:
*{
    margin: 0px;
    padding: 0px;
  }
  .tekst{
    width: 100%;
    height: 1000px;
    background-color: black;
  }
  .tekst p{
    color: white;
    font-size: 50px;
    text-align: center;
    margin: auto;
  }
  .sc-scroll{
    opacity: 0;
    transform: scale(0.1);
    transition: all 2s ease;
  }
  .active{
    opacity: 1;
    transform: scale(1);
  }

JavaScript:
window.addEventListener('scroll',()=>{
    let content = document.querySelector('.sc-scroll');
    let contentPoistion = content.getBoundingClientRect().top;
    let screenPoistion = window.innerHeight;
    if(contentPoistion < screenPoistion){
       content.classList.add('active');
     
    }
});

komentarz zamknięcia: uzyskana odpowiedź

1	komentarz 15 stycznia 2021 przez Tomek Sochacki Ekspert (227,510 p.) Ale tego js nigdzie nie wczytujesz, musisz go wgrać analogicznie jak css

komentarz 16 stycznia 2021 przez Milesq Nałogowiec (32,020 p.)

@AgentTecza, Jeśli dostałeś rozwiązanie problemu, oznacz najlepszą odpowiedź i zamknij pytanie :)

1 odpowiedź

odpowiedź 15 stycznia 2021 przez CSSoup Mądrala (6,460 p.)
wybrane 19 stycznia 2021 przez AgentTecza

Najlepsza

Brak podpięcia JS

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="css.css"/>
</head>
<body>
    <div class= "tekst">
        <p>TEKST</p>
      </div>
      <div class = "sc">
        <p class = "sc-scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta erat velit, in feugiat velit lobortis id. Mauris quam turpis, venenatis eget imperdiet ac, finibus sit amet nulla. Nulla facilisi. Fusce sed nisl mauris. Integer cursus dui tellus, vitae rutrum orci vulputate et. Nulla commodo libero nunc, eget finibus sem blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam vitae sagittis metus, ut rhoncus risus. Morbi turpis neque, auctor sit amet tempus interdum, ornare vitae metus. Aenean at lorem quis elit ullamcorper tempor. Integer vel est commodo, facilisis dui in, molestie odio. In hac habitasse platea dictumst. Phasellus lacinia ex vel volutpat venenatis. Proin fermentum euismod nisl sed elementum.
       
        </p>
         
      </div>

<script src="TWÓJ_SKRYPT.js"></script>
</body>