Pyxofy (Page 3)

Sign in Subscribe

CSS Animation – Car Driving Infinite Scroll - Part 2

CSS Animation – Car Driving Infinite Scroll - Part 2

In part 1 of this multipart article, you learned how to animate the street. In part 2, we’ll make clouds and animate them step-by-step.

Welcome 2024!

（English below Japanese）新年あけましておめでとうございます。おかげさまで、Pyxofy (ピクソファイ) は開設３周年を迎えることができました。皆様に学びの場を提供することで、私たちも同じく成長していくことができています。2024年も Pyxofy と一緒に自己研鑽に励んでいきましょう！メインコンテンツ * JavaScript Programming 今年も引き続き JavaScript でのプログラミングを解説します。初心者の方にも分かりやすく楽しんでいただける記事を配信します。 * CSS アニメーション CSS アニメーションの作り方も引き続きご紹介していきます。思わず作ってみたくなるようなアニメーションを、複数の画像を使用し分かりやすく解説します。メンバー限定コンテンツ Pyxofyメンバーの方のみがご覧いただけるコンテンツを配信いたします。是非、Pyxofyメンバーへご登録を！メンバー登録は以下のリンクからお願いします。 PyxofyEmpower Digital Natives thru Education

JavaScript - setInterval() を使ったアニメーションの基本

JavaScript - setInterval() を使ったアニメーションの基本

この記事では JavaScript でアニメーションを作る方法を解説します。ポイントとなるのは setInterval() メソッドと clearInterval() メソッドです。ボタンをクリックしてアニメーションを動かしたり止めたりする方法を学びましょう。

JavaScript - ボタンを押して表示を切り替える方法

JavaScript - ボタンを押して表示を切り替える方法

ボタンをクリックしてコンテンツの表示 / 非表示を切り替えたり、ウェブページの表示をダークモードにする方法を解説します。CSS に切り替えたいクラスを追加して toggle() メソッドで切り替えるだけなので簡単です。

JavaScript - 図形に色やグラデーションを設定する方法

JavaScript - 図形に色やグラデーションを設定する方法

JavaScript で描画する図形にスタイルを設定するためのプロパティや、グラデーションカラーを作成するメソッドを紹介します。レインボーカラーや図形を立体的に見せるためのサンプルコードも掲載しているので参考にしてください。

CSS Animation – Car Driving Infinite Scroll – Part 1

CSS Animation – Car Driving Infinite Scroll – Part 1

Infinite, auto-scrolling animations are amazing to look at and easy to create with CSS. Learn how in this multi-part, step-by-step article.

JavaScript - Canvas に図形を描く方法

JavaScript - Canvas に図形を描く方法

HTML の canvas 要素を利用すると、JavaScript でグラフィックを描くことができます。基本的なメソッドを学んで、四角形や三角形、円やテキストなど簡単な図形を描画できるようになりましょう。

CSS Art – How to Make a Sporty Electric Car

CSS Art – How to Make a Sporty Electric Car

Electric Vehicles (EVs) are eco-friendly and overall good for the planet. You’ll learn how to make a sporty version in this step-by-step article.

JavaScript - for ループ (繰り返し) の基本【初心者向け】

JavaScript - for ループ (繰り返し) の基本【初心者向け】

繰り返し処理を実行するために使われる for 文の書き方や、ループの中で使われる break 文と continue 文について、プログラミング初心者の方でも分かりやすいように簡単なコードを例にして解説します。

CSS Animation – Jumping Box with @property – Part 2

CSS Animation – Jumping Box with @property – Part 2

You learned how to make a 3D-ish box and shadow in part 1. Let’s make the box shrink and then jump in part 2 of this step-by-step article.

JavaScript - イベントオブジェクト - function(e) の e とは？

JavaScript - イベントオブジェクト - function(e) の e とは？

function(e) の e はイベントオブジェクトを受け取るための変数です。イベントオブジェクトにアクセスして、押されたキーの種類やマウスポインターの座標などの情報を取得できるようになりましょう。

CSS Animation – Jumping Box with @property – Part 1

CSS Animation – Jumping Box with @property – Part 1

You can make an orange-colored 3D-ish box jump up and down with CSS. Learn how to make this animation in this step-by-step article.

JavaScript - デジタル時計の作り方

JavaScript - デジタル時計の作り方

Date オブジェクトを使ってデジタル時計を作ります。setInterval() で１秒ごとに時間を更新する方法や、表示する桁数を揃えるゼロパディングの方法、アロー関数 => の書き方について学びましょう。

CSS Animation – How to Make a Sunrise with @property – Part 2

CSS Animation – How to Make a Sunrise with @property – Part 2

In Part 1, you made the sunrise scene elements. In Part 2, let’s learn to animate a picturesque dawn in this step-by-step article.

JavaScript - Date オブジェクトで日付と時刻を取得する方法

JavaScript - Date オブジェクトで日付と時刻を取得する方法

Date オブジェクトで現在日時を取得する方法を紹介します。getMonth() や getHours() など日時に関するメソッドを使って、今日の日付や現在の時刻を表示できるようになりましょう。

CSS Animation – How to Make a Sunrise with @property – Part 1

CSS Animation – How to Make a Sunrise with @property – Part 1

Sunrises are majestic. They cast multiple shades of color and beautiful gradients. You'll learn how to create one in this step-by-step article.

JavaScript - オブジェクトの基本【初心者向け】

JavaScript - オブジェクトの基本【初心者向け】

この記事では、オブジェクトとは何か、プロパティやメソッドの意味、オブジェクトを作る方法であるオブジェクトリテラルとコンストラクタについて、初心者向けに簡単に紹介します。

CSS Animation – @property Radial Gradient Zoom Animation

CSS Animation – @property Radial Gradient Zoom Animation

Zoom in and Zooming out. Zoom animation effects are fun! In this step-by-step article, you’ll learn how to make them with CSS.

JavaScript - 数当てゲームの作り方【応用編】

JavaScript - 数当てゲームの作り方【応用編】

この記事は「数当てゲームの作り方【基本編】」に続く応用編です。入力欄やボタンに機能を加えて遊びやすいように改良します。簡単なゲームなので、プログラミング初心者の方もぜひ挑戦してみてください。

CSS Animation – @property Linear Gradient Rotate Animation with cubic-bezier()

CSS Animation – @property Linear Gradient Rotate Animation with cubic-bezier()

Yes, CSS linear gradients can be rotated! Join us in this step-by-step article to learn how to animate multicolor shapes with CSS @property.

JavaScript - 数当てゲームの作り方【基本編】

JavaScript - 数当てゲームの作り方【基本編】

数当てゲームはランダムに選ばれた数を予想するゲームです。プログラミング初心者の方でも分かりやすいようにゲームの基本的な考え方をシンプルなコードで解説します。

CSS Animation – @property and Conic Gradient Animation

CSS Animation – @property and Conic Gradient Animation

Static pie charts are boring, make them fun with animation! Learn conic gradient animation with CSS @property in this step-by-step article.

JavaScript - 背景色を変更する方法 - 配列からランダムに色を選ぶには？

JavaScript - 背景色を変更する方法 - 配列からランダムに色を選ぶには？

JavaScript で要素のスタイルを変更する方法を学びましょう。ユーザーのクリックで背景色を変えるコードを、基本と応用に分けて解説します。プログラミング初心者の方や、配列や乱数について知りたい方におすすめの内容となっています。

CSS Animation – Radial Text Background Animation

CSS Animation – Radial Text Background Animation

Your text doesn’t have to be flat on a 2D screen. You’ll learn to bake in drama and flare to your text background in this step-by-step article.

JavaScript - クリックカウンターの作り方【初心者向け】

JavaScript - クリックカウンターの作り方【初心者向け】

ボタンのクリック数を画面に表示するクリックカウンターを作ります。コードのポイントとなるのはインクリメント演算子 ++ と innerHTML です。プログラミング初心者の方でも分かりやすいように、簡単な HTML と JavaScript で解説します。