クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

JS

スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】

スクロールするとフワッと現れたり動いたりするアニメーションを作る方法はいくつかあるが、一番シンプルに感じた方法をご紹介。CSSでアニメーションを設定し、JSでスクロールを感知してCSSのclassを付加する方法。

Web Audio APIの機はもうすぐ熟しそう!ブラウザ対応状況♪

JS

「周回遅れでもWebGLを事始める!」で「WebGLの機はとっくに熟している」と書きました。 もう一つ、2018年事始めたいマイテーマに「Web Audio API」というものがあります。こちらも徐々に機が熟しています。 いっちょやってみっかー、と自分を奮い立たせるた…

周回遅れでもWebGLを事始める!canvas大地に立つ!!

JS

ブラウザでの3D(3次元)を表現する「WebGL」。ほぼ全てのブラウザに対応し、機はとっくに熟している。 かつては3Dを始めるには3D作成ソフトを購入する必要があったが、現在はやりたくなった「今」、始められます。そう、CodePenがあればね!*1 時は来た!そ…

【卒jQueryへの道】生JSとライブラリとフレームワークの理解

JS

JavaScript Advent Calendar 2017 - Qiitaの第5日目です。 「こいつ、動くぞ!*1」自分の作ったものが動く!この喜びをいち早く体験させてくれたjQuery。 だが、HTML→CSS→jQueryという道を辿った方が「次」のステップに進むときに感じる「壁」があります。そ…

【JSの基本-後編】書ける前に読む!HTML、CSS、JSの書式-5

JS

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【JSの基本-前編】書ける前に読む!HTML、CSS、JSの書式-4

JS

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【Webの基礎知識】書ける前に読む!HTML、CSS、JSの書式-1

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め

JS

ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ(仮)」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「Al…