その他 【解決済】NURO光でONU(光回線終端装置)を交換したらVPNが繋がらなくなった 表題の通り、最近家のインターネットが突然繋がらなくなったりして調子が悪かったので、ONUを交換してもらったら、VPNに繋がらなくなりました。普通にサイトを見る分には問題なかったのですが、仕事でWinSCPを使おうとしたところ、ログインに失敗... 2024.12.19 その他
GSAP 【GSAP】スクロールに連動させてテキストをアニメーションさせる 以前ScrollTriggerを使ってセクションを横スクロールさせる方法を紹介したのですが、セクションや画像ではなく、テキストをスクロールに連動させて横方向に動かすことはできるのか気になったので、試してみました。時々、途中でテキストが横切っ... 2024.11.22 GSAP
GSAP 【GSAP】ScrollTriggerを使って横スクロールさせる 操作は縦にスクロールさせる動きなのに、表示は横スクロールの動きになるサイトを時々見かけます。このような動きは、GSAPのScrollTriggerを使用することで簡単に実装することができます。ユーザーは縦スクロールの動きだけですべてのコンテ... 2024.11.21 GSAP
GSAP 【GSAP】keyframesを使ったアニメーション ひとつの要素を複数のトゥイーンでアニメーション化するとき、timeline を使って制御する方法だけでなく、keyframes を使ってアニメーションを制御する方法もあります。公式サイトの言葉を借りれば、「キーフレームはトゥイーン内にネスト... 2024.11.08 GSAP
GSAP 【GSAP】staggerを使ったアニメーション GSAPでは、アニメーションを制御するときに「stagger」というプロパティを使用することができます。このプロパティでは、トゥイーンに複数のターゲットがある時に、各アニメーションの開始間に遅延を追加することができます。staggerにもい... 2024.11.07 GSAP
java script 【java script】グリッド状に要素を自動生成する 先日GSAPの公式サイトを見ていたら、デモでグリッド状に要素を自動生成するjava scriptが使用されていました。生成される要素の幅が、ウィンドウ幅に合わせて可変するタイプではなかったのですが、可変した方が便利だよね、ということで自分で... 2024.11.06 java script
GSAP 【GSAP】gsap.utils.toArray( )の使い方 utils.toArray( )は、GSAPのメソッドのうちのひとつで、例えば複数の要素に同じアニメーションをつけたり、複数の要素に順番にアニメーションを適用したい時や、遅延を追加したいときなどに使うと便利です。記事中では、utils.toArray( )を使用したアニメーションの例も載せています。また、java scriptのquerySelectorAll() メソッドとの違いについても解説しています。 2024.11.04 GSAP
GSAP 【GSAP】ScrollTriggerを使ったアニメーション GSAPのプラグイン「ScrollTrigger」を使用すると、スクロールに連動したアニメーションを作成することができます。この記事では「スクロールして要素が画面に表示された時にテキストがフェイドインする」というアニメーションを例に挙げて「ScrollTrigger」の使い方について説明します。 2024.11.01 GSAP
GSAP 【GSAP】アニメーションの順番やタイミングを管理する GSAPでは、timelineという、あらかじめ決められた順番でアニメーション処理を行うためのツールがあります。このツールを使用することで、アニメーションの順番やタイミングを簡単に管理することができます。もちろんタイムラインを使わなくてもア... 2024.10.25 GSAP
GSAP 【GSAP】.set( )の使い方 今日は .set() の使い方について説明します。.set() は、対象のプロパティを設定することができるメソッドです。アニメーションはありませんが、対象を配置する場所を設定することができます。継続時間0の .to() と同じ働きをするため... 2024.10.08 GSAP