【JavaScriptステップアップ講座 第1回】jsの基本
今日からJavaScriptを基礎から学ぶ「JavaScriptステップアップ講座」を更新していきたいと思います。 私は勧められてPr〇gateでjsを勉強しようと奮闘したことがあります。でもこれはプログラミング言語を少なくともひとつは知っている人向けだな、と思いました。あくまで個人の感想に過ぎませんが、「変数」「配列」などど言われても、それがどう具体的に役に立つのか、イメージできないからです。結 […]
Read Moreメンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ
タグ: JavaScript
今日からJavaScriptを基礎から学ぶ「JavaScriptステップアップ講座」を更新していきたいと思います。 私は勧められてPr〇gateでjsを勉強しようと奮闘したことがあります。でもこれはプログラミング言語を少なくともひとつは知っている人向けだな、と思いました。あくまで個人の感想に過ぎませんが、「変数」「配列」などど言われても、それがどう具体的に役に立つのか、イメージできないからです。結 […]
Read Moreもうすぐクリスマス。 というわけで期間限定でブログに雪を降らせてみました。 https://www.otwo.jp/blog/canvas_sakura/ ベースとなるJSはこちらを参考にさせていただきました。詳しく解説が載っています。こちらは桜の花をひらひら降らせています。 http://www.shurey.com/js/samples/1_tips10.html ドキュメントの高さを取得する […]
Read Moreトップへ戻るボタンを習ったので復習しながら解説します。 HTML
1 |
<p class="gotop">TOPへ戻る</p> |
CSS
1 2 3 4 5 6 7 8 9 10 |
.gotop{ position: fixed; /*表示場所を固定*/ right: 10px; bottom: 10px; opacity: 0; transition: all .5s; } .is-show{ opacity: 1; } |
JavaScript
1 2 3 4 5 6 7 8 9 10 |
let gotop = document.querySelector('.gotop'); //クラスgotopを変数gotopにいれる window.addEventListener("scroll", function(){ let scl = window.pageYOffset; //スクロール量を取って変数に代入 if( scl > 200 && scl <= 500 ){ //もしスクロール量が200より大きくかつ500以下のとき gotop.classList.add('is-show'); //クラスgotopにクラスis-showを追加する }else if( scl > 500 ){ //もしスクロール量が500より大きいなら(おまけです) gotop.innerHTML = "TOPへ戻ろうよ!"; //要素の中身を変える(おまけです) } }); |
JavaScriptの授業は覚えることが多くとても大変ですが、できることも多いので楽しいです。他にも簡単な […]
Read More