JavaScript

写真をクリックしてモーダルでより見やすく表示!写真のギャラリーモーダルを作成しよう -改修準備編-

こんにちは、ユアサです。 今回は前回作成したギャラリーモーダルに工夫を加えるためのパーツについてまとめていきたいと思います ↓前回の記事はこちら tech.arms-soft.co.jp altを取得しよう imgタグに指定されているalt属性はgetAttribute('alt')を使って…

写真をクリックしてモーダルでより見やすく表示!写真のギャラリーモーダルを作成しよう -基礎作り編-

こんにちは、ユアサです。 今回は写真ギャラリーの特定の写真をクリックしてモーダルで表示し、更にモーダル内で他の写真も閲覧できるモーダルギャラリーの実装をしていきたいと思います。 そもそもどうして自分で作成しようとしたのか ギャラリーモーダルを…

PC・スマホでSwiperを実装・解除する判定をするJSを作ろう!

こんにちは、ユアサです。 以前業務でSwiperを使ったスライダーをスマホ表示時に解除してカラム表示にすることがあったので、今回はPC・スマホそれぞれのウィンドウ幅の可変で都度Swiperを実装・解除する方法について備忘録の意味も込めて書きまとめたいと思…

GSAPのtimelineアニメーションを逆再生する

こんにちは、ナカムラです。 以前の記事でtimelineをスキップするメソッドをご紹介しました。 tech.arms-soft.co.jp 今回は逆再生をしてみたいと思います。 DEMO See the Pen GSAPのtimelineアニメーションを逆再生する by Nakamura (@takayo-nakamura) on C…

ビューポート単位で100vwのスクロールバーを含めてしまう問題を解決できるのか?

こんにちは、ナカムラです。 今回はCSSでよく使われるビューポート単位について、検証したいことがあったので書きたいと思います。 100vhを使った時にアドレスバーの分、意図した高さにならない問題がiOS safariであります。 その対応に使えそうなビューポー…

ページ内スクロールのナビゲーションにカレントを付与するJavaScript(GSAP)

こんにちは、ナカムラです。 今回はページ内リンクのナビゲーションに、カレントのスタイルをつける方法のご紹介をします。 GSAPのscrollTriggerを使用します。 GSAPのscrollTriggerについてはこちら https://greensock.com/docs/v3/Plugins/ScrollTrigger D…

HTMLタグ<details>でアコーディオンを作る(簡易版)

こんにちは、ナカムラです。 今回はdetailsについて試してみたものをご紹介したいと思います。 よくある質問などでよくアコーディオンを使うと思います。 たくさんある中でユーザーが求めている物・そうでないものがあるので、必要な時だけ開くようにするの…

iPhone Safariで入力エラーが起きた時に該当箇所へスクロールする

こんにちは、ナカムラです。 今回はフォームの機能で困ったことがあったので、備忘録として書きたいと思います。 HTML5のフォームバリデーションでは必須項目が未入力の場合や、入力形式が異なる場合にエラーメッセージを表示しユーザーへ伝える機能が備わっ…

Web­Assemblyが気になったのでRustで試してみた

こんにちは、コバヤシです。 Web­Assemblyって知っていますか? 何かと目にする機会も多くなってきたので、今更感も強いですがRustを使ってWeb­Assemblyを試してみたいと思います。 Web­Assemblyとは WebAssemblyはWebブラウザーが実行できるバイナリー形式…

GSAPのタイムラインを必要なタイミングで動かす

こんにちは、ナカムラです。 GSAPのtimelineアニメーションをスキップしたり、リプレイする処理は前回行いました。 tech.arms-soft.co.jp scrollTriggerによって、特定の要素が表示されたタイミングでアニメーションする処理も書きましたね。 tech.arms-soft…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -実践後編-

新年明けましておめでとうございます!ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 前回の記事ではレーダーチャートのベース部分となる枠線の描画をしましたので、今回は実践の後編ということで動的に表示するレーダーチャ…

まるでWordpress? Editor.jsを試してみる インラインツール作成編

こんにちは コバヤシです。 今回は以前ブログで記事にしたEditor.jsでインラインツールを作成してみました。 tech.arms-soft.co.jp インラインツールとは インラインツールとは、テキストのブロックで文字を選択した時に出るツールのことです。 標準で太字に…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -実践前編-

こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…

GSAPのtimelineアニメーションをスキップする

こんにちは、ナカムラです。 今回もGSAPの使い方についてご紹介します。 前回の記事でtimelineの使い方をご説明しました。 tech.arms-soft.co.jp このtimelineを使うと、一連のアニメーションを作ることができます。 サイトのオープニングアニメーションなど…

GSAPのonイベントを使って、画面に表示されている時だけアニメーションさせる

こんにちは、ナカムラです。 今回はアニメーションの演出でよく使うプラグイン「GSAP」の紹介になります。 GSAPとは アニメーションの実装を助けてくれるjavascriptのプラグインです。 基本的なブラウザはほとんど対応されています。 GSAP | GSAP | Docs & L…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -準備編-

こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチ…

JavaScriptとclip-pathを使って、カーソルの位置に合わせて写真をマスクする

こんにちは、ナカムラです。 今回はカーソルの位置に合わせて表示を制御するものを作ってみたいと思います。 カーソルの位置の取得や、表示の変更にはJavaScriptを、写真のマスクはclip-pathを使います。 とっても簡単です。 DEMO 画面内にカーソルを当てて…

JavaScriptでクリップボードにテキストをコピーする

こんにちは、ナカムラです。 今回はJavaScriptを使って、特定のテキストをクリップボードへコピーする処理を書いていこうと思います。 クリップボードとは クリップボードとは、テキストや画像などを一時的に保存している場所です。 テキストを選択してcomma…

YouTubeの動画を背景に敷く(iOS対応、自動再生・ループ)

こんにちはナカムラです。 今回はYoutubeの動画を使って、背景に動画を敷いてみたいと思います。 実装する機能としては以下の2点になります。 自動再生 ループ レスポンシブを想定して、スマホにも対応するように作ります。 その場合は、YouTubeの「埋め込み…

position:fixedで固定した要素を横スクロールさせるJavaScript

こんにちは、ナカムラです。 今回は横スクロールが発生する状態で、pisition:fixed(もしくはabsolute)で位置を固定した要素を追従させるJavaScriptのご紹介をします。 レスポンシブ対応のサイトとはいえ、スマホのサイズから一般的なPCのサイズまで全ての…

カーソルが離れたらsetTimeOutをクリアするJavaScript

こんにちは、ナカムラです。 今回は、setTimeOutのクリアの仕方を紹介しようと思います。 setTimeOutは一定の時間が経ったら処理を開始するメソッドです。 ロード後に少し時間を置いてからアニメーションを実行するなどの使い方ができます。 さて、設定した…

まるでWordpress? Editor.jsを試してみる

こんにちは、コバヤシです。 今回は簡単にブロックエディタを導入できるEditor.jsについて書きたいと思います。 ブロックエディタとは WordpressのGutenbergで使われている、コンテンツをブロック単位で管理して記事を作成していくタイプのエディタです。 Gu…

JavaScriptのスクロール関連のプロパティとメソッドまとめ

こんにちは、ナカムラです。 前回の記事で、少しだけスクロールの操作を行いました。 今回は、スクロールに関するプロパティとメソッドについて、より詳しく整理していきたいと思います。 tech.arms-soft.co.jp DEMO プロパティやメソッドを実際に動作させた…

JavaScriptで書く、要素のサイズ取得とスクロール

こんにちは、ナカムラです。 新人研修用に要素のサイズ取得について書きたいと思います。 今回は要素の高さを取得し、その要素の半分の高さにスクロールするボタンを作りました。 50%の位置がわかりやすいように、CSSで背景の色を変えています。 アンカーリ…

JSで動作する簡単なカルーセルを作ってみる

こんにちは、ユアサです。 前回はJSのclassListプロパティについて紹介し、クリックしてONとOFFの表示を切り替えるボタンを作りました。予告していた通り、今回はこのプロパティを使って簡単なカルーセルのようなものを作成します。 前回の記事はこちらです…

JavaScriptでbodyのスクロールを禁止するハンバーガーメニューを作る

こんにちは、ナカムラです。 だいぶ前に階層の深いハンバーガーメニューの作り方をご紹介しました。 tech.arms-soft.co.jp こちらの記事では開閉の処理について書きました。 今回は、メニューを開いた時のスクロールの制御について書きたいと思います。 今回…

イベントに応じてclass属性を切り替え!JavaScriptのclassListを使ってみる

こんにちは、ユアサです。 前回まではCSSの内容の記事が多かったですが、社内での勉強会でもJSの内容に入ってきたので、今回は勉強会でも習ったclassListについて復習の意味も込めて書きまとめていきます。 classListについて classListは、特定の要素のクラ…

SVGの画像の切り抜きとsnap.svgを使ったアニメーション

こんにちは、中村です。 SVGについて、あまり勉強してこなかったので、 今回は気になっていた写真の切り抜きとアニメーションを試したいと思います。 DEMO 作ったのはこちら。 See the Pen SVGの画像の切り抜きとsnap.svgを使ったアニメーション/a> by Nakam…

YouTube IFrame Player APIの使い方 2021

こんにちは、ナカムラです。 今回はYouTubeのIFrame Player APIの使い方のご紹介です。 ご紹介といっても基本機能の使い方なので、リファレンスを読めばわかる程度のものです。 普段あまり使っていないので、いざ使うときにリファレンスを読むのがしんどくて…

Intersection Observer APIを使って、ページの最下部までスクロールしたかを判定する

こんにちは、ナカムラです。 前回はスクロール量を計測して、ページの最下部までスクロールしたかを判定する処理をご紹介しました。今回は方法を変えて、Intersection Observer APIを使った場合の処理について書いていきたいと思います。 前回の記事はこちら…