inumberx

Webデザイナー/フロントエンドエンジニアとして働いています。 ポートフォリオサイト https://afterworks.jp
  • 4本

Swiperカスタマイズメモ

案件でSwiprerを使用した際に、カスタマイズで躓いたポイントのメモです。 Swiperとは?一般的にスライダーライブラリと言えば、「Slick」「FlexSlider」などがありますが、実装にあたりjQueryプラグインの導入が必要でした。 ですが、この「Swiper」はjQueryに依存しない高機能なライブラリ。 「Slick」は以前に実装経験がありますが、今ちょっと話題のこの「Swiper」がどんな感じなのか気になったので、使ってみました。 ほんと凄い。このライ

スキ
11

CSSとJavaScriptで簡単なアニメーションを作ろう

はじめにこの記事では、CSSとJavaScriptを使って、Webページに簡単なアニメーションを実装する方法をご紹介します。 筆者が実際の案件で制作したコードをもとに解説します。 また、有料記事ではソースコードもダウンロードいただけますので、JavaScriptが得意ではない方でも、お使いいただけます。 成果物本記事では、下記のようにスクロールと連動してアニメーションを実行できる方法をご紹介します。 フェードイン 時間差フェードイン 上へスライドしつつフェードイン

スキ
4
有料
200

プログラミング初心者からthree.jsに慣れるまで

こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド+WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいい

スキ
747

PHP(Laravel) でエンドポイントをつくって、 Nuxt.js に渡す

ディレクトリ構成Nuxt.js, Laravel 別々にディレクトリを作成し、それぞれ個別のプロジェクトとして扱います - nuxt-project  # Nuxt.js - Nuxt のファイルたち- laravel-project  # Laravel - Laravel のファイルたち Laravel をさわるLaravel をインストール composer create-project laravel/laravel <project-name> Lara

スキ
12
  • 5本

CSSとJavaScriptで簡単なアニメーションを作ろう

はじめにこの記事では、CSSとJavaScriptを使って、Webページに簡単なアニメーションを実装する方法をご紹介します。 筆者が実際の案件で制作したコードをもとに解説します。 また、有料記事ではソースコードもダウンロードいただけますので、JavaScriptが得意ではない方でも、お使いいただけます。 成果物本記事では、下記のようにスクロールと連動してアニメーションを実行できる方法をご紹介します。 フェードイン 時間差フェードイン 上へスライドしつつフェードイン

スキ
4
有料
200

Webサイトのメインビジュアルの構図を集めて分析してみた。

初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で

スキ
1,848

暑くて外に出られない…そんなときにおすすめのiPadを使いこなしている海外クリエイターの動画まとめ

少しでも空いた時間があればiPadでなにか作っているのですが、その際に海外のクリエイターの制作動画を見て参考にしています。 ここ最近ハマって見ている海外のクリエイターの方をまとめてみました。 創作意欲が掻き立てられること間違いなし! 空いた時間があればぜひ見てみてください! 基本みなさん英語なのですが、言葉なし&BGMのみでひたすら制作過程を撮ってあるだけのものもあります。基本、絵を書いている様子なので英語わからなくても楽しめますよ! James Julier Art

スキ
81

Adobe XDプラグイン「Invisible Space」

Adobe XDのプラグインを作りましたXDでデザインシステムっぽく、ロゴやアイコン、Webコンポーネントなどのパーツ群を制作・管理するときに、ブランドガイドラインで定められたロゴのアイソレーションゾーンや、各種スタイルガイドで決まっているmarginやpaddingをお手軽に視覚化する、「Invisible Space」というプラグインを作りました。 まず、XDの「プラグインを見つける」から「Invisible Space」を検索するか、こちらのリンクからインストールしま

スキ
32