マガジンのカバー画像

CO-WRITE

117
アートサイエンスをテーマに新しいアイディアや自由な発想を生みだすメディア https://gri.jp/media/ [GRI ARTS] https://griarts.jp/
運営しているクリエイター

記事一覧

react-springを使ってドロネー図のアニメーションを作ってみよう

こんにちわ。nap5です。 d3ライブラリのドロネー図を使ったトランジションアニメーションのデモを紹介したいと思います。 Twitterにも投稿してみました。 ドロネー図とは?については以下のリンクを参照くださいませ。 デモサイトのリンクはこちらです。 デモコードのリンクはこちらです。 デモビデオのリンクはこちらです。 使用したライブラリは以下になります。 コードも公開しているので、細かいのはそちらを見ていただくことにして、ポイントとなる点を抜粋します。 以

スキ
1

react-springを使ってボロノイ図のアニメーションを作ってみよう

こんにちわ。nap5です。 d3ライブラリのボロノイ図を使ったトランジションアニメーションのデモを紹介したいと思います。 Twitterにも投稿してみました。 ボロノイ図とは?については以下のリンクを参照くださいませ。 デモサイトのリンクはこちらです。 デモコードのリンクはこちらです。 デモビデオのリンクはこちらです。 使用したライブラリは以下になります。 コードも公開しているので、細かいのはそちらを見ていただくことにして、ポイントとなる点を抜粋します。 以

スキ
1

react-springを使ったgsapライクなstaggerアニメーションの紹介

こんにちわ。nap5です。 今回はreact-springを使ったgsapライクなstaggerアニメーションの一つを紹介したいと思います。 glitchでホスティングしています。 デモサイトへのリンクです。 デモコードへのリンクです。 デモ動画へのリンクです。 コードも公開しているので、細かいのはそちらを見ていただくことにして、ポイントとなる点を抜粋します。 以下のフックの部分です。keyプロパティを指定しないとトランジションをしてくれないので、注意が必要です

スキ
1

Googleカスタム検索のダサダサな検索Boxを好きなデザインにする方法

Googleカスタム検索とはGoogleでサイト内検索ができる小窓を自分のウェブサイトに設置できるサービスです。 Googleアカウントにログインして下記ページから登録を行います https://cse.google.com/cse/all そして取得したJavascriptコードを、自サイトのHTMLソースの検索ボックスを設置したい位置に貼りつけます。 こちらが張り付けた例いまいちだ 一応テーマとかあったり、各パーツの色だけ変更できるんですが、もうそんな問題じゃない

スキ
4

数値リストをグルーピングする関数の紹介

こんにちわ。nap5です。 今回は小ネタですが、知っておくと小回りが利く便利だと思うので、紹介します。 このように数値リストが連番があって、それらを先頭から順にグループ番号を付与する関数です。 $ node main.js[ { g: 1, n: 1 }, { g: 1, n: 2 }, { g: 1, n: 3 }, { g: 1, n: 4 }, { g: 2, n: 5 }, { g: 2, n: 6 }, { g: 2, n: 7 }, { g:

スキ
2

reacthookを利用したcolumn-countを使うレスポンシブレイアウトについて

こんにちわ。nap5です。 reacthookを利用したcolumn-countを使うレスポンシブレイアウトについて紹介したいと思います。今回はGlitchを使ってみました。 ライブサイトはこちらです。 デモコードはこちらです。 デモ動画はこちらです。 ポイントとなるコードは以下です。 まずはフック側。 import {useEffect, useState} from 'react';const useMedia = ({queries, values, de

スキ
3

WEB系デザイナーがAfterEffectsでモーションデザインに挑戦した話《その3》

この記事は《その2》からの続編になります。 完結編。 前回は「素材準備」までのステップを説明しましたので「カット作り」からです。完成まで駆け抜けます! カット作り画面デザインをもとにカットを作る 頭から順にアニメーションをつけていくのは難しいので、まずは画面デザインしたカットを作っていきます。 デザインをする時も細かいところから作っていくのではなく、まずは要素を配置し全体を進めていく流れなので、同じですね。 アニメーション画面デザインの通りに要素が配置&準備できたら、

スキ
5

部屋割りロジックを使ったカードレイアウトを作ってみました

こんにちわ。nap5です。 こういうのを作ってみました。loomのリンクをクリックすると動画再生ページへ遷移します。 3秒ぐらいの感覚で部屋割りを再生成してます。 今回は部屋割りロジックとしてBinary Space Partitioningを使いました。 参考にした実装は以下になります。 よくみかけるPinterestっぽいカードレイアウトよりも、もしかしたら、面白いかもです。 awwwards系のサイトにはマッチしそうなんて思いました。 最後に、Udemyで

スキ
1

【CSS】制作現場でよく使うFlexbox使用例

横並びや、上下左右の中央揃えなど、要素の配置をフレキシブルに行えるflexbox。 多くのプロパティがありますが、下記のようなWEBサイトを例に、個人的に現場でよく使うflexboxの使用例を紹介します。 <参考サイト> 1.ヘッダーレイアウト ロゴとメニューを両端揃えで横に並べ、メニューはロゴの高さに対して天地中央に配置します。 ▼実装サンプル HTML <header> <div class="logo">ロゴ</div> <nav> <ul> <li><

スキ
4

ページ遷移におけるvanillaなアンカータグとreact-router-domのLinkタグの違いについて

こんにちわ。nap5です。 前回同様、ページ遷移時のトランジション方法の一つを紹介したいと思います。今回のポイントはルーティングの挙動の違いがエフェクトに影響を与えるということです。 vanillaなアンカータグとreact-router-domのLinkタグの違いです。 デモコードをcodesanboxに置きました。 結論から言うと、アンカータグを使わないとページのリロードが走らないので、エフェクトを生かすサイト制作の際にはvanillaなアンカータグを選択しないと

スキ
3

ページ遷移時のトランジション方法の紹介

こんにちわ。nap5です。 ページ遷移時のトランジション方法の一つを紹介したいと思います。 デモコードをcodesanboxに置きました。 デモではフォントを少し変えているのですが、codesandbox上だとフォントはプレビューに反映されないようです? デモ動画はこちらです。 framer motionを使って実装しましたが、framer motionだとstaggerのリピートが難しく、ここら辺はgsapで持ち回ったほうがいいのかもしれません。(という気付きを得ま

スキ
3

カウントアップダウンUIをよりインタラクティブにする際に使用しているライブラリについて

こんにちわ。nap5です。 今回はカウントアップダウンUIをよりインタラクティブにする際に使用しているライブラリについて紹介したいと思います。 今回紹介するライブラリを使うことで実装できたのが、こちらです。 使用したライブラリはframer motionというライブラリです。 このライブラリはDOMを宣言的に使えます。 また、宣言したDOMへのイベントに対するコールバック関数もハンディに貼り付けることができるので、便利です。 最近だと、nprogressとframe

スキ
2

ハッシュタグなテキストを正規表現で抽出する方法について

こんにちわ。nap5です。 今日はハッシュタグなテキストを正規表現で抽出する方法について紹介したいと思います。 今回はライブデモ動画を用意してみました。 こういったことを実現するにはWebでのプレイグラウンドがあると便利です。 そこで、以下のサイトを使わせていただきました。 今回、参考にした実装は以下になります。 https://github.com/fauna-labs/fwitter/blob/main/src/fauna/queries/fweets.js#

スキ
5

NodejsでPromiseなジョブのハンドリング方法について

こんにちわ。nap5です。 今日はNodejsでPromiseなジョブのハンドリング方法について紹介したいと思います。 使用するライブラリはこちらになります。 参考にした実装はこちらになります。 3件のジョブを今回実行したいと思います。 ジョブが成功したら1秒待って次のジョブを実行し、失敗したら3秒待ってロールバック処理を行い、次のジョブを実行します。 今回三種類のデータセットを用意しました。 すべて成功するジョブ すべて失敗するジョブ いくつか失敗するジョ

スキ
3