CODEWITHSUNDEEP
javascripthtmlcssanimation
VlAd TbK
VlAd TbK

Reputation: 69

Javascript dosen't get regonized by HTML

I have a javascript function that should make the letters in a paragraf come from the bottom than fade but when I insert it in the html it just shows plain text ... The function should work , I think I am doing something wrong calling it to html . The text that I am trying to animate is the one in the the header "Text is text".

Main HTML code

<link rel="stylesheet" href="javascript/javascripit.js">
<link rel="stylesheet" type="text/css" href="css/navbar.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="css/utilities.css">


</head>
<body>
    <!-- Navbar -->
    
    <div class ="main">
        <div class="navbar ">
        
          <div class="container flex lead ">
            <nav>
                <ul>
                    <li><a href="#">Acasa</a></li>
                    <li><a href="features.html">Proiecte</a></li>
                    <li><a href="docs.html">Recenzii</a></li>
                </ul>
            </nav>
            <div>
                <h1 class="ml7">
                    <span class="text-wrapper">
                      <span class="letters">Text is text</span>
                    </span>
                  </h1>
                  
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
                  
            </div>
            <div class="social sm">
                <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS code + utilites

.navbar {
  background-color: var(--primary-color);
  color: #fff;
  
  min-height: 80px; 
  position: sticky; 
  top: 0; 
}
.navbar ul {
  display: flex;
  flex-direction: row;
  flex-grow:1;
}

.navbar a {
  color: #fff;
  padding: 10px;
  margin: 0 2px;
}


.navbar a:hover {
  border-bottom: 2px #fff solid;
}

.navbar .flex {
  justify-content:space-between;
}
.navbar .social a{

  margin: 0 2px;
  flex-grow:1;
}
.navbar .social > *:nth-child(3){
  font-size: 28px;
  
}
.ml7 {
  position: relative;
  font-weight: 900;
  font-size: 3.7em;
}
.ml7 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}
.ml7 .letters {
  transform-origin: 0 100%;
  display: inline-block;
  line-height: 1em;
}
.container {
  max-width: 1400px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
  align-self: start;
  
}
.main {
  min-height: 100vh; /*add*/
  height: 3000px; /*this is a test rule*/
}

.card {
  background-color: #fff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 10px;
}

And the javascript function

var textWrapper = document.querySelector('.ml7 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml7 .letter',
    translateY: ["1.1em", 0],
    translateX: ["0.55em", 0],
    translateZ: 0,
    rotateZ: [180, 0],
    duration: 750,
    easing: "easeOutExpo",
    delay: (_el, i) => 50 * i
  }).add({
    targets: '.ml7',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Upvotes: 2

Views: 116

Answers (1)

O. Jones
O. Jones

Reputation: 108696

Your HTML attempts to load your Javascript as if it were a style sheet. Look at your browser dev tools and you'll probably see an error in the Javascript console. Use <script src="whatever.js"></script> to load scripts. In your case this is probably:

<script src="javascript/javascripit.js"></script> /*mis-spelled name?? */

And, you asked in a comment about where to put your <script></script> tags. Many people put them at the end of the HTML page, immediately before the </body> tag. This lets the browser fetch image objects needed to render the page before it fetches Javascript code, and gives a better user experience.

Regardless of where you put your <script></script> tags, Javascript code like yours to manipulate the Document Object Model (DOM) of the page should be run as an event handler for the DOMContentLoaded event. In other words, wrap your Javascript in this.

document.addEventListener('DOMContentLoaded', (event) => {
    /* all your Javascript goes here */
});

That way it won't run before the page is loaded. If you don't do this and your Javascript does happen to run before your HTML is completely loaded, your .querySelector() operations may return null, causing your Javascript to fail.

Browsers try to do a lot of things in parallel to speed up their click-to-page-visible times.

Upvotes: 2

Related Questions