動きを実現する仕組み
三角矢印の作り方とアニメーション
STEP1 HTMLコード
① head終了タグ直前に自作のCSSを読み込みます。＊wordpressでfunctionにて設定の場合は省略
<head>
<link rel="stylesheet" type="text/css" href="css/5-1-14.css">
</head>② body内にリンク元のHTMLとリンク先のHTMLを記載します。
<body>
<header class="header">
<div class="header_inner">
<div class="bland_logo">
<a href="#"
>三角矢印の作り方</a>
</div>
<div class="openbtn">
<span></span>
<span></span>
<span></span>
</div>
<nav id="g-nav">
<div id="g-nav-list">
<!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<div class="clinic-info">
<ul class="clinic-advantages">
<li>
<a href="#">
<p>上矢印</p>
</a>
</li>
<li>
<a href="#">
<p>右矢印</p>
</a>
</li>
<li>
<a href="#">
<p>下矢印</p>
</a>
</li>
<li>
<a href="#">
<p>左矢印</p>
</a>
</li>
</ul>
</div>
<!--/main--></main>
<footer id="footer">
<!-- ページトップアイコン -->
<div id="pageTopIcon">
<button id="scrollToTopBtn">
<span>▲</span><span class="scroll-text">トップ</span>
</button>
</div>
<small>© copyright.</small>
</footer>
</body>③ body 終了タグ直前に JS、動きを制御する自作のJS の2 つを読み込みます。＊wordpressでfunctionにて設定の場合は省略
<!--自作のJS-->
<script src="js/5-1-14.js"></script>
</body>④ WordpressでのfunctionでのCDNとファイルの読み込みは下記より。
//CSSとJSの読み込み
function my_enqueue_scripts()
{
$version = wp_get_theme()->get( 'Version' );
wp_enqueue_style('index-style', get_template_directory_uri() . '/css/index.css', array(), $version);
wp_enqueue_style('singular-style', get_template_directory_uri() . '/css/singular.css', array(), $version);
wp_enqueue_style('content-style', get_template_directory_uri() . '/css/content.css', array(), $version);
wp_enqueue_style('archive-style', get_template_directory_uri() . '/css/archive.css', array(), $version);
wp_enqueue_style('comments-style', get_template_directory_uri() . '/css/comments.css', array(), $version);
wp_enqueue_style('404-style', get_template_directory_uri() . '/css/404.css', array(), $version);
wp_enqueue_style('search-form-style', get_template_directory_uri() . '/css/searchform.css', array(), $version);
wp_enqueue_style('search-style', get_template_directory_uri() . '/css/search.css', array(), $version);
wp_enqueue_style('sidebar-style', get_template_directory_uri() . '/css/sidebar.css', array(), $version);
wp_enqueue_style('header-style', get_template_directory_uri() . '/css/header.css', array(), $version);
wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css', array(), $version);
wp_enqueue_style('navi-style', get_template_directory_uri() . '/css/navi.css', array(), $version);
wp_enqueue_style('navi-accordion-style', get_template_directory_uri() . '/css/navi-accordion.css', array(), $version);
wp_enqueue_style('catego-navi-style', get_template_directory_uri() . '/css/catego-navi.css', array(), $version);
wp_enqueue_style('button-style', get_template_directory_uri() . '/css/button.css', array(), $version);
wp_enqueue_script('navi-script', get_template_directory_uri() . '/js/navi.js', array('jquery'), $version, true);
wp_enqueue_script('catego-navi-script', get_template_directory_uri() . '/js/catego-navi.js', array('jquery'), $version, true);
wp_enqueue_script('page-top-script', get_template_directory_uri() . '/js/page-top.js', array('jquery'), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');⑤ header.phpの>head>内で下記を使って読み込み。
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し-->
<?php wp_head(); ?><!--システム・プラグイン用-->CSSでコーディング
STEP2 cssコード
.clinic-info {
flex: 1;
width: calc(100% - 50px);右左に25pxの余白
max-width: 800px;
}
@media (max-width: 730px) {
.clinic-info {
width: 100%;
}
}
.clinic-advantages {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 項目間の余白 */
margin: 60px 0;
padding: 0;
list-style: none;
}
@media (max-width: 730px) {
.clinic-advantages {
margin-bottom: 30px;
}
}
.clinic-advantages li {
width: calc((50% - 20px));
position: relative;
background: #fff;
border-radius: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.2s;
padding: 0;
}
.clinic-advantages li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
text-decoration: none;
color: #222;
font-weight: bold;
font-size: 14px;
}
@media (max-width: 768px) {
.clinic-advantages li a {
font-size: 12px;
}
}
@media (max-width: 400px) {
.clinic-advantages li a {
font-size: 10px;
}
}
.clinic-advantages li:nth-child(1) a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}
.clinic-advantages li:nth-child(2) a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}
.clinic-advantages li:nth-child(3) a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}
.clinic-advantages li:nth-child(4) a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}
.clinic-advantages li:nth-child(1) a:hover::after {
animation-name: upmoveAnimeBt;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;
}
/* 上に動いて元の位置に戻るアニメーション */
@keyframes upmoveAnimeBt {
0% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
}
100% {
transform: translateY(0);
}
}
.clinic-advantages li:nth-child(2) a:hover::after {
animation-name: sidemoveAnimeBt;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;
}
/* 右に動いて元の位置に戻るアニメーション */
@keyframes sidemoveAnimeBt {
0% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
.clinic-advantages li:nth-child(3) a:hover::after {
animation-name: undermoveAnimeBt;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;
}
/* 下に動いて元の位置に戻るアニメーション */
@keyframes undermoveAnimeBt {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
.clinic-advantages li:nth-child(4) a:hover::after {
animation-name: leftmoveAnimeBt;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;
}
/* 左に動いて元の位置に戻るアニメーション */
@keyframes leftmoveAnimeBt {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
/*ヘッダー設定*/
.header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
transition: 0.5s;
z-index: 9000;
background-color: #ccc;
}
.header.hide {
top: -80px;
}
.header .header_inner {
display: flex;
align-items: center;
height: 40px;
padding: 20px;
}
.header .header_inner .bland_logo {
width: 100%;
}
/*ハンバーガーナビの設定*/
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position: fixed;
z-index: 999;
/*ナビのスタート位置と形状*/
top: 0;
right: -120%;
width: 20%;
/*半分とか調整をする際は、g-nav-listも合わせる*/
height: 100vh;
/*ナビの高さ*/
background: #fff;
/*動き*/
transition: all 0.6s;
}
#g-nav.panelactive {
right: 0;
}
#g-nav.panelactive #g-nav-list {
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 20%;
/*半分とか調整をする際は、g-navも合わせる*/
height: 100vh;
/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav ul {
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
left: 10%;
margin-top: 100px;
}
#g-nav li {
font-size: 1rem;
list-style: none;
text-align: left;
}
#g-nav li li:not(:first-child) {
margin-top: 20px;
}
#g-nav li a {
color: #000;
text-decoration: none;
padding: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/*========= ボタンのためのCSS ===============*/
.openbtn {
position: absolute;
z-index: 9999;
/*ボタンを最前面に*/
top: 15px;
right: 10px;
cursor: pointer;
width: 70px;
height: 70px;
}
.openbtn span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #000;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top: 15px;
}
.openbtn span:nth-of-type(2) {
top: 23px;
}
.openbtn span:nth-of-type(3) {
top: 31px;
}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}JSを使ってJSコード作成
STEP3 JSコード
動作確認は下記から
See the Pen Untitled by K O (@K-O-the-builder) on CodePen.