arctext.jsを導入しようとしています。「view site」にカーブをかけたいです。
$(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>