記事一覧
Swiper.jsの基本的に使い方
以下が公式サイト 公式サイト：https://swiperjs.com/ 資源：https://unpkg.com/browse/swiper@7.0.2 まずは、CDNでライブラリを読み込むかもしくは、資源をダウンロード…
[自分用メモ]バニラjsのみでタグを切り替えを実装
脱jqをするために、タグ切り替えをvanilla.jsのみで実装しました。
意外と簡単でした。ただまだ、jqの方がコード記述が少ないです。
下記のHTMLをファイルを用意する
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
[自分用メモ脱jq] トップへ戻るボタン スムーズにスクロールしてページのトップへ戻る
脱jqをするため、トップに戻るボタンをjsにて実装しました。
その時の備忘録です。
HTMLファイルに下記を記入
<div class="dammy"> <p>Javascript ページトップへ戻るボタン</p></div><button id="page-top" class="page-top" aria-label="ページの最初に戻る"></button>
CSSファイルには下記
[自分用メモ]バニラjsでテキストにクラス付与してアニメーションを付ける方法
HMTLファイルに記載したテキスト「 PLAY ANIMATION」にjsを使い一文字ずつに<span>タグを付与していく方法
HMTLの記述
<body> <div id="container"> <div class="animate-title inview"> PLAY ANIMATION </div> </div></bo
Intersection Observerを使おう
特定要素が画面内に入ったら発火する監視システムです。
Intersection Observer は特定の要素が指定領域内に入ったかどうかを検知するAPIです。
基本的には IntersectionObserver を呼び出して、第1引数に実行したい関数、第2引数にオプション設定を記述します。オプションは初期値でよければなくてもOK。
const options = { root: docu
Swiper.jsの基本的に使い方
以下が公式サイト
公式サイト：https://swiperjs.com/
資源：https://unpkg.com/browse/swiper@7.0.2
まずは、CDNでライブラリを読み込むかもしくは、資源をダウンロードしてローカルで設置する。
下記は<head></head>タグ内に設置する。<link rel="stylesheet" href="https://cdn.jsdeli
ページ開く際のローディングアニメーションの作り方
今回は「pace.js」を使う。
①pace.jsページに行き好きなアニメーションを選び「DOWNLOAD」ボタンを押す
②ダウンロードできたCSSファイルをHTMLファイルにリンクさせる。
③pace.jsを用意するかCDNを使ってpaceを読み込む
pace.jsファイルを下記に用意した。
④header内にpace.jsとCSSをリンクさせる。
<link rel="sty
ワードプレスの投稿を静的サイトに組み込む方法
静的サイトにwpの記事を入れた時の方法。
①ワードプレスをダウンロードする。
②wp設定が終わったら、phpのファイルを２つ用意する。
自分の場合はindex.phpとsingle.phpとして用意した。
③index.phpの
ファイルの一番上に記載する。
パスでwp-load.phpとリンクさせる。
<?php include ( dirname(__FILE__) . '../..