CSSアニメーション 【cssのみ】パララックス効果のついた背景の作り方
パララックス背景とは、ページをスクロールした時に、背景と前景の要素を異なる速度で動かすことで、視覚的に奥行きや立体感を演出する視差効果が使われた背景のことです。Java Scriptを使った実装は知っていたのですが、最近はcssだけでも実装...
CSSアニメーション 
その他 【CodePen 2.0 Editor】外部リソースの読み込み方法
7月の下旬ごろにCodePenの2.0エディションが出たそうですね。早速、2.0エディションに変更して使ってみたのですが、外部リソースの読み込み方法が変更になっていて戸惑ったので、記録として残しておきます。外部ファイルの読み込み方法旧バージ...
java script 三項演算子の使い方
三項演算子（条件演算子）は、java script で唯一、3 つのオペランドをとる演算子です。（オペランドとは、演算子によって処理されるデータを表す「数値」「文字列」「変数」などのことを言います）if文の代替として使用されることが多いそう...
java script スクロールに合わせたカレント表示を設定する
以前、カレント表示を実装する機会があったので、覚え書きついでに解説していきたいと思います。java script でカレント表示を実装する必要がある方のお役に立てれば幸いです。まず、必須である要件は以下の３点です。セクションと目次を紐づけて...
その他 【解決済】NURO光でONU（光回線終端装置）を交換したらVPNが繋がらなくなった
表題の通り、最近家のインターネットが突然繋がらなくなったりして調子が悪かったので、ONUを交換してもらったら、VPNに繋がらなくなりました。普通にサイトを見る分には問題なかったのですが、仕事でWinSCPを使おうとしたところ、ログインに失敗...
GSAP 【GSAP】スクロールに連動させてテキストをアニメーションさせる
以前ScrollTriggerを使ってセクションを横スクロールさせる方法を紹介したのですが、セクションや画像ではなく、テキストをスクロールに連動させて横方向に動かすことはできるのか気になったので、試してみました。時々、途中でテキストが横切っ...
GSAP 【GSAP】ScrollTriggerを使って横スクロールさせる
操作は縦にスクロールさせる動きなのに、表示は横スクロールの動きになるサイトを時々見かけます。このような動きは、GSAPのScrollTriggerを使用することで簡単に実装することができます。ユーザーは縦スクロールの動きだけですべてのコンテ...
GSAP 【GSAP】keyframesを使ったアニメーション
ひとつの要素を複数のトゥイーンでアニメーション化するとき、timeline を使って制御する方法だけでなく、keyframes を使ってアニメーションを制御する方法もあります。公式サイトの言葉を借りれば、「キーフレームはトゥイーン内にネスト...
GSAP 【GSAP】staggerを使ったアニメーション
GSAPでは、アニメーションを制御するときに「stagger」というプロパティを使用することができます。このプロパティでは、トゥイーンに複数のターゲットがある時に、各アニメーションの開始間に遅延を追加することができます。staggerにもい...
java script 【java script】グリッド状に要素を自動生成する
先日GSAPの公式サイトを見ていたら、デモでグリッド状に要素を自動生成するjava scriptが使用されていました。生成される要素の幅が、ウィンドウ幅に合わせて可変するタイプではなかったのですが、可変した方が便利だよね、ということで自分で...