このブログのJavascript関連のまとめ記事

この記事は、 当ブログのjavascrip関連のまとめページです。 

カテゴリー分けしてましたが、見づらくなったので、詳細区分ごとに切り分けています。

簡単なサンプルデモもついているので、遊んでみてください。

素のJavaScriptを使った表示系の記事

各デモの画像は、表示に時間がかかることがありますので、デモ内のボタンを何度かクリックしてみてください。

細かい説明やコードは、各記事に記載しています。

スライドショー（ボタン付き）

See the Pen slideshow by dyna (@sakudyna) on CodePen.

javascriptでボタン付きスライドを作成する（jQueryなし）

今回はJQueryなしで、画像のスライドを作った備忘録です。 考え方としては、HTMLで画像（背景）の部分を作成する（CSSで整える） Javascriptのクリックイベントで1の画像URLを切り替えて表示させるという考え方で作成しています。

アコーディオンメニュー

See the Pen toggle by dyna (@sakudyna) on CodePen.

javascript,HTML,CSSでアコーディオンメニュー作成（jQueryなし）

javascriptでアコーディオンメニュー（トグルメニュ―）を作成した記録です。 jQueryなしの素のJavascriptで記載してます。

要素をふわっと表示

See the Pen スクロールでふわっと表示 by dyna (@sakudyna) on CodePen.

HTML,CSS,Javascript　スクロールしたらふわっと表示(jQueryなし）

javascriptでスクロールしたらふわっと表示させる作り方です。 このままコピペしても動くと思います。 jQueryなしで作成しています。

ページTOPボタン

See the Pen TOPへ戻るボタン by dyna (@sakudyna) on CodePen.

JavaScriptで「TOPに戻る」ボタンをスクロールしたら表示する

ブログやWEBサイトの右下にある、「TOPに戻る」ボタンを作成した記事です。 スクロール量によって表示・非表示を切り替えています。

1文字ずつ表示するアニメーション

右下のRerunを押してみてください。

See the Pen split-javascript-CSS by dyna (@sakudyna) on CodePen.

javascriptのsplitを使い1文字ずつ表示する[jQueryなし]

素のJavascriptで文字を1文ずつ表示するアニメーションです。

素のJavascriptを使った遊び系（ゲーム系）記事

ルーレット

See the Pen 円形に要素を配置し、ランダムなルーレットをする by dyna (@sakudyna) on CodePen.

Javascriptでルーレット作成、円形に要素を配置してルーレットする

Javascriptで円形に要素を配置し、ランダムに光るルーレットを作成した記録です。デモコード記載しています。

anime.jsを使った記事

リップルエフェクトはデモ内をクリック（タッチ）してみてください。　

リップルエフェクト

See the Pen ripple effect(波紋効果)　anime.js by dyna (@sakudyna) on CodePen.

anime.jsでripple effect(波紋効果)を作ってみたよ

anime.jsの公式サイトに載っているgrid、ripple effectをデモで作成した内容です。

コールバックを使ったカウント

See the Pen anime.js update_sample by dyna (@sakudyna) on CodePen.

Anime.jsのコールバック、update、begin、completeを使ったアニメーション

Anime.jsのコールバック、update、begin、completeを使用して、アニメーションをつけてみました

three.jsの記事

記事が多いので、別途、three.jsカテゴリーに切り分けています。

デモサンプル↓

See the Pen 星 by dyna (@sakudyna) on CodePen.

JavaScriptのその他の記事（初心者向け）

深くは突っ込まず、概要を把握するために記載しています。

オブジェクト、プロパティ、メソッド

Javascriptのオブジェクト、プロパティ、メソッドを学習してみたよ

Javascriptのオブジェクト、プロパティ、メソッドを学習した記録。 実際のコードを記載しながら説明してます。

returnについて

javascriptのreturnとは

javascriptのreturnの使い方について、学んだことを簡単に記録しています。返り値、処理の終了として使用できます。

コンストラクター、インスタンス

javascriptのコンストラクター,インスタンスって何？

今回はJavascriptのコンストラクタ、インスタンス（ちょっとだけプロトタイプも）についての学習記録です。(初心者向け）

ローカル変数とグローバル変数

Javascriptのローカル変数とグローバル変数

javascriptにおけるローカル変数とグローバル変数を学習した記録です。 他、ローカルスコープ、グローバルスコープなど。

おすすめ書籍（初心者向け）

初心者向けでわかりやすい、JavaScript勉強におすすめの学習本

プログラミング初心者だったときに、JavaScriptの学習に読んでいた本のご紹介です。初心者向けの記事です。

CSVを取り込み表示する

JavaScriptでCSVを取り込み表示する(HTML)

JavaScriptでCSVを取り込んで、HTML表示までに調べた事を記載しています。

記事を更新したら、別途追加していきたいと思います。

ある程度記事が増えたら、もっと見やすくカテゴリー分けしたいと思います。