'My tilt js is not working the card is not tilting need help within 4 hours

So guys I have created a website and in that I have a card hear is its html code

    <div class="about-indiamain" data-tilt>
            Main Content</div>
        <div class="txt">India is the country that occupies the larger part of South Asia. Our government is a
            democratic republic that represents highly diverse culture and history.We have hundreds of languages and
            religion and roughly one-sixth of the world’s total population so is the second most populous country, after
            China
            .India is also an unique land of diverse colours, rich geography,monuments and history. From the busy
            streets of Mumbai to the silet shores of the Andaman Islands,from sandy dry dessert of Rajasthan to rainy
            streets of Sikkim India offers a wide feast for our senses.India also borns athlete who make it to the top
            like Neeraj Chopra who have won gold in Tokyo Olypics 2021.
            India is called incredible not only through monuments but also through yoga which proves to bring peace to
            mind.People all over the world comes to learn yoga.India is also known for its rich ancient medical
            knowledge that is Ayurveda.India is one of the best country in the world in terms of science.India borns
            artistics creative young minds who later go abroad in search of more money and become "SCIENTISTS" there .
            Even when we look into discoveries story of zero revolvess around Aryabhatta,Sushruta was a surgeon known
            today as the “Father of Plastic Surgery”
            Sushruta developed different surgical techniques & invented the practice of cosmetic surgery so called
            plastic surgery.<br>This are my reasons with which I can state my India is incredible
        </div>

I have named tilt js as vanilla-tilt.js and have added proper script THis is it:-

        <script type="text/javascript" src="vanilla-tilt.js"></script>

I hv also done proper styling if someone wants then:_

.about-indiamain{
  margin-left: 30%;
  margin-top: 10px;
  width: fit-content;
  font-size: 32px;
  background-color: yellowgreen;

}

Remember class name :- about-indiamain

javascripthtmlcsscdntilt


Solution 1:[1]

did you add the script before or after the body tag in the HTML ?

if it is before the body, try to move it after the body tag, so it loads after the DOM will load.

Solution 2:[2]

had the same problem. As Reyno suggested, I checked the console and saw:

the request from your-domain/vanilla-tilt.js was blocked due to (“text/html”) MIME (X-Content-Type-Options: nosniff) mdn web docs

example how to use tilt.js, from their documentation:

<body>
    <div data-tilt></div> <!-- Tilt element -->
    <script src="jquery.js" ></script> <!-- Load jQuery first -->
    <script src="tilt.js"></script> <!-- Load Tilt.js library -->
</body>

They suggest to add scripts before the body closing tag. I added them inside the head element, using a defer attribute for both scripts.

I took jQuery script at jquery cdn

Then I created a tilt.js file and pasted a jQuery code there.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oliver Ilmjärv
Solution 2 an_bozh

Related Questions