0

arctext.jsを導入しようとしています。「view site」にカーブをかけたいです。

Dev Toolでみてもエラーはありませんでした。
画像の説明をここに入力

       
$(function() {
    $('#eye-text').arctext({radius: 900});

});
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ------------------------------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    font-size: 16px;
    --basesunset: #E14D2A;
    --pinksunset: #CD104D;
    --baseblue: #0ED3BE;
    --thickpurple: #9480F8;
    --lightpurple: #E4D0FA;
}


h1, h2, h3, h4, h5 {
    font-family: 'Crimson Pro', serif;  
}

p {
    font-family: 'Mada', sans-serif;
}

body {
    font-family: 'Mada', sans-serif;
    background-color: var(--lightpurple);



    height: 500vh;
}

body::-webkit-scrollbar {
    width: 1.25rem;
}

body::-webkit-scrollbar-track {
    background: #fff;
}

body::-webkit-scrollbar-thumb {
    background: #458473;
    border-radius: 30px;
}




img {
    width: 80%;
    height: auto;
}







.eye-container {
    text-align: center;
}

.eye-container img {
    width: 10vw;
    height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>Portfolio</title>

<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,900;1,700&family=Mada&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="globals.css">
    <link rel="stylesheet" href="nav.css">
    <link rel="stylesheet" href="works.css">


    
    
</head>
<body>
    

  <header>
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><h2> yoriss67 </h2></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
          </ul>
          <span class="navbar-text">
            Navbar text with an inline element
          </span>
        </div>
      </div>
    </nav>
  </header>
  <main>

<div class="hero"></div>

<div class="readme"></div>

<div class="skills"></div>

<div class="works">
  <div class="eye-container">
    <img src="images/eye.png" alt="">
    <p id="eye-text">view site</p>
  </div>
  
</div>


<div class="currently"></div>

<div class="contact"></div>

    
    
    
  </main>
  <footer></footer>


  <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<!-- jQuery -->

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script src="./Arctext/js/jquery.arctext.js"></script>



<script src="script.js"></script>


</body>
</html>

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。