JavaScript
こんにちは、ユアサです。 今回は写真ギャラリーの特定の写真をクリックしてモーダルで表示し、更にモーダル内で他の写真も閲覧できるモーダルギャラリーの実装をしていきたいと思います。 そもそもどうして自分で作成しようとしたのか ギャラリーモーダルを…
こんにちは、ユアサです。 以前業務でSwiperを使ったスライダーをスマホ表示時に解除してカラム表示にすることがあったので、今回はPC・スマホそれぞれのウィンドウ幅の可変で都度Swiperを実装・解除する方法について備忘録の意味も込めて書きまとめたいと思…
こんにちは、ナカムラです。 以前の記事でtimelineをスキップするメソッドをご紹介しました。 tech.arms-soft.co.jp 今回は逆再生をしてみたいと思います。 DEMO See the Pen GSAPのtimelineアニメーションを逆再生する by Nakamura (@takayo-nakamura) on C…
こんにちは、ナカムラです。 今回はCSSでよく使われるビューポート単位について、検証したいことがあったので書きたいと思います。 100vhを使った時にアドレスバーの分、意図した高さにならない問題がiOS safariであります。 その対応に使えそうなビューポー…
こんにちは、ナカムラです。 今回はページ内リンクのナビゲーションに、カレントのスタイルをつける方法のご紹介をします。 GSAPのscrollTriggerを使用します。 GSAPのscrollTriggerについてはこちら https://greensock.com/docs/v3/Plugins/ScrollTrigger D…
こんにちは、ナカムラです。 今回はdetailsについて試してみたものをご紹介したいと思います。 よくある質問などでよくアコーディオンを使うと思います。 たくさんある中でユーザーが求めている物・そうでないものがあるので、必要な時だけ開くようにするの…
こんにちは、ナカムラです。 今回はフォームの機能で困ったことがあったので、備忘録として書きたいと思います。 HTML5のフォームバリデーションでは必須項目が未入力の場合や、入力形式が異なる場合にエラーメッセージを表示しユーザーへ伝える機能が備わっ…
こんにちは、コバヤシです。 WebAssemblyって知っていますか？ 何かと目にする機会も多くなってきたので、今更感も強いですがRustを使ってWebAssemblyを試してみたいと思います。 WebAssemblyとは WebAssemblyはWebブラウザーが実行できるバイナリー形式…
こんにちは、ナカムラです。 GSAPのtimelineアニメーションをスキップしたり、リプレイする処理は前回行いました。 tech.arms-soft.co.jp scrollTriggerによって、特定の要素が表示されたタイミングでアニメーションする処理も書きましたね。 tech.arms-soft…
新年明けましておめでとうございます！ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 前回の記事ではレーダーチャートのベース部分となる枠線の描画をしましたので、今回は実践の後編ということで動的に表示するレーダーチャ…
こんにちは コバヤシです。 今回は以前ブログで記事にしたEditor.jsでインラインツールを作成してみました。 tech.arms-soft.co.jp インラインツールとは インラインツールとは、テキストのブロックで文字を選択した時に出るツールのことです。 標準で太字に…
こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…
こんにちは、ナカムラです。 今回もGSAPの使い方についてご紹介します。 前回の記事でtimelineの使い方をご説明しました。 tech.arms-soft.co.jp このtimelineを使うと、一連のアニメーションを作ることができます。 サイトのオープニングアニメーションなど…
こんにちは、ナカムラです。 今回はアニメーションの演出でよく使うプラグイン「GSAP」の紹介になります。 GSAPとは アニメーションの実装を助けてくれるjavascriptのプラグインです。 基本的なブラウザはほとんど対応されています。 GSAP | GSAP | Docs & L…
こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチ…
こんにちは、ナカムラです。 今回はカーソルの位置に合わせて表示を制御するものを作ってみたいと思います。 カーソルの位置の取得や、表示の変更にはJavaScriptを、写真のマスクはclip-pathを使います。 とっても簡単です。 DEMO 画面内にカーソルを当てて…
こんにちは、ナカムラです。 今回はJavaScriptを使って、特定のテキストをクリップボードへコピーする処理を書いていこうと思います。 クリップボードとは クリップボードとは、テキストや画像などを一時的に保存している場所です。 テキストを選択してcomma…
こんにちはナカムラです。 今回はYoutubeの動画を使って、背景に動画を敷いてみたいと思います。 実装する機能としては以下の2点になります。 自動再生 ループ レスポンシブを想定して、スマホにも対応するように作ります。 その場合は、YouTubeの「埋め込み…
こんにちは、ナカムラです。 今回は横スクロールが発生する状態で、pisition:fixed（もしくはabsolute）で位置を固定した要素を追従させるJavaScriptのご紹介をします。 レスポンシブ対応のサイトとはいえ、スマホのサイズから一般的なPCのサイズまで全ての…
こんにちは、ナカムラです。 今回は、setTimeOutのクリアの仕方を紹介しようと思います。 setTimeOutは一定の時間が経ったら処理を開始するメソッドです。 ロード後に少し時間を置いてからアニメーションを実行するなどの使い方ができます。 さて、設定した…
こんにちは、コバヤシです。 今回は簡単にブロックエディタを導入できるEditor.jsについて書きたいと思います。 ブロックエディタとは WordpressのGutenbergで使われている、コンテンツをブロック単位で管理して記事を作成していくタイプのエディタです。 Gu…
こんにちは、ナカムラです。 前回の記事で、少しだけスクロールの操作を行いました。 今回は、スクロールに関するプロパティとメソッドについて、より詳しく整理していきたいと思います。 tech.arms-soft.co.jp DEMO プロパティやメソッドを実際に動作させた…
こんにちは、ナカムラです。 新人研修用に要素のサイズ取得について書きたいと思います。 今回は要素の高さを取得し、その要素の半分の高さにスクロールするボタンを作りました。 50%の位置がわかりやすいように、CSSで背景の色を変えています。 アンカーリ…
こんにちは、ユアサです。 前回はJSのclassListプロパティについて紹介し、クリックしてONとOFFの表示を切り替えるボタンを作りました。予告していた通り、今回はこのプロパティを使って簡単なカルーセルのようなものを作成します。 前回の記事はこちらです…
こんにちは、ナカムラです。 だいぶ前に階層の深いハンバーガーメニューの作り方をご紹介しました。 tech.arms-soft.co.jp こちらの記事では開閉の処理について書きました。 今回は、メニューを開いた時のスクロールの制御について書きたいと思います。 今回…
こんにちは、ユアサです。 前回まではCSSの内容の記事が多かったですが、社内での勉強会でもJSの内容に入ってきたので、今回は勉強会でも習ったclassListについて復習の意味も込めて書きまとめていきます。 classListについて classListは、特定の要素のクラ…
こんにちは、中村です。 SVGについて、あまり勉強してこなかったので、 今回は気になっていた写真の切り抜きとアニメーションを試したいと思います。 DEMO 作ったのはこちら。 See the Pen SVGの画像の切り抜きとsnap.svgを使ったアニメーション/a> by Nakam…
こんにちは、ナカムラです。 今回はYouTubeのIFrame Player APIの使い方のご紹介です。 ご紹介といっても基本機能の使い方なので、リファレンスを読めばわかる程度のものです。 普段あまり使っていないので、いざ使うときにリファレンスを読むのがしんどくて…
こんにちは、ナカムラです。 前回はスクロール量を計測して、ページの最下部までスクロールしたかを判定する処理をご紹介しました。今回は方法を変えて、Intersection Observer APIを使った場合の処理について書いていきたいと思います。 前回の記事はこちら…
こんにちは、ナカムラです。 今回はネイティブのjavaScriptでページ最下部に到達したかどうかを判定する処理を書いていこうと思います。 この処理はボタンを固定表示したページや、記事の終わりにメッセージを表示したいなど、ユーザーの操作に合わせて表示…
