なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

カテゴリー: JavaScript

【CSS+JS】スクロールでふわっと出てくるフェードインの実装方法【jQueryなし】

画像や要素などがスクロールするとふわっと出てくる「フェードイン」の実装方法をまとめます。仕事でやることになって、調べましたが自力でも出来そうだったので、私のようにjQueryに依存しないで実装したいという方のために書きます。ちなみに私はjQueryは個人的に苦手でまったく書けないです…。 適当なHTMLを用意しました。ここではh1と内容全体にフェードインさせるクラスを付けました。 JavaScri […]

Read More

スマホで使いやすい申し込みフォーム③

jQueryです。 $(function(){ $.fn.autoKana(‘#name’, ‘#furi_name’, { katakana : true //true:カタカナ、false:ひらがな(デフォルト) }); //フォーカスされたとき $(“#name”).focus(function(){ $(this).css(“background-color”, “#fff”); $(th […]

Read More

Local Storageについて

学校のWebアプリを作る授業でLocal Storageを使ったので使いかたをメモしておきます。 WebStorageとはWeb上にデータを保存しておくことができるものでローカルストレージとセッションストレージがあります。今回はローカルストレージについて書きます。 LocalStorageに値を入れるには以下のように書きます。 キーと値をセットで箱に入れておくイメージです。取り出すときは 上記のよ […]

Read More

【rellax.js】rellax.jsでパララックス

こんにちは。12月はアドベントカレンダーと称して毎日1記事ずつ書いていきたかったのですがサボってしまっております。今日はパララックスについて書いていきます。 パララックスとはWebサイトのスクロールのスピードに差をつけて、ユーザーの目を惹くデザインを叶えてくれるものです。JavaScriptやjQueryで実装しますが、今回は一からではなくrellax.jsを使って簡単に実装する方法をやってみたの […]

Read More

【JavaScriptステップアップ講座 第1回】jsの基本

今日からJavaScriptを基礎から学ぶ「JavaScriptステップアップ講座」を更新していきたいと思います。 私は勧められてPr〇gateでjsを勉強しようと奮闘したことがあります。でもこれはプログラミング言語を少なくともひとつは知っている人向けだな、と思いました。あくまで個人の感想に過ぎませんが、「変数」「配列」などど言われても、それがどう具体的に役に立つのか、イメージできないからです。結 […]

Read More

【JavaScript】canvas要素を使って雪を降らせる

もうすぐクリスマス。 というわけで期間限定でブログに雪を降らせてみました。 https://www.otwo.jp/blog/canvas_sakura/ ベースとなるJSはこちらを参考にさせていただきました。詳しく解説が載っています。こちらは桜の花をひらひら降らせています。 http://www.shurey.com/js/samples/1_tips10.html ドキュメントの高さを取得する […]

Read More

【JavaScript】if文でTOPへ戻るボタン

トップへ戻るボタンを習ったので復習しながら解説します。 HTML

CSS

JavaScript

JavaScriptの授業は覚えることが多くとても大変ですが、できることも多いので楽しいです。他にも簡単な […]

Read More