GSAPを使って複雑なオープニングアニメーションを作ってみよう | 東京のホームページ制作 / WEB制作会社 BRISK
アニメーション。 それはWEBサイトには欠かせない演出です。 最近のWEBサイトはアニメーションがかなり複雑になってきている印象です。 ただ、アニメーションって結構難しいですよね。 簡単なアニメーションならcssでちょちょっと書けばできますが、いくつものアニメーションが連動しているものになってくると難易度があがります。 とはいえ、そんな複雑なアニメーションでも、GSAPを使えばわりと簡単にできちゃいます。 この記事で実装する完成デモ この記事で実装するアニメーションの完成デモページは以下になります。 デモページを見る 結構複雑そうですよね。 でも、GSAPを使えば簡単に実装できます！ GSAPとは? GSAPとはアニメーションを実装するために特化したライブラリです。 公式サイト GSAPには2つのライセンスがあります。 1つは「Standard License」。 もう1つが「Busine
GSAPの基本的な記述をまとめる
はじめに JavaScriptのアニメーションライブラリ「GSAP」の基本的な記述や、よく使う機能をまとめたいと思います。 GSAPはとても高機能で基本の部分となる記述を抑えるだけでも、工夫次第でいろんな表現ができます。当記事では触れませんがSVGやcanvasなどと組み合わせるとアニメーションの幅が一気に広がります。また、scrollTriggerやMotionPathPluginなどプラグインもとても充実しています。 基本的な動きを組み合わせたイントロアニメーション ループやリピート制御を組み合わせたエフェクト 連続的な処理 応用：canvasと組み合わせたイントロアニメーション GSAPのインストール
SvelteKit + Svelte を1年間くらい使ってみた知見など
前置きと自己紹介 今回はKINTOテクノロジーズでフロントエンドを担当しているイケダがお送り致します。最近はKINTO ONEの開発運用や新規サービス・プロジェクトの立ち上げなどをしています。 自己紹介もそこそこに前置きへ。 前置き 昨今、React / Vue.js / AngularJS / Preact / Ember など様々なJSフレームワークが台頭しています。ここ最近ですとSvelteとSolidの勢いがありますね。(個人的にMithril.jsにもっと伸びてほしい)もっと知りたい方はこちらへ https://mithril.js.org/ その中でも今回はKINTOのコーポレートサイト、KINTOテクノロジーズのコーポレートサイト、そして現在進行しているプロダクトでも採用しているSvelteを使用してみての所感、そして簡単なSGまでのコードを紹介したいと思います。 本記事で紹
配信背景をTypeScript(Processing)で書いてみた
以下のような画像を生成できるWebサイトを作ったのでその紹介です。 リポジトリ: https://github.com/tamayura-souki/live-backgrounds 作ったWebサイト: https://tamayura-souki.github.io/live-backgrounds/ 本記事はProcessing Advent Calendar 2021の13日目の記事です。 この記事は何か 画像・アニメーションを生成できるWebサイトを作ったので紹介 どうやって作ったか、工夫したところとか雑に説明 "クリエイティブコーディング × 配信用画像素材作成"はいいぞ!! サイトの使い方 サイトURL: https://tamayura-souki.github.io/live-backgrounds/ サイトにアクセスすると、私の作った素材へのリンク一覧が出る。 例えば、
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
【JavaScript】デザインパターンを知ってみる。ファクトリ編 | バシャログ。
つい最近、横山光輝『三国志』を全60巻読破したminamiです。 今回はJavaScriptで書くファクトリ（Factory）について調べてみました。Factoryはそのまま「工場」の意味です。 なぜ使うのか？ ファクトリの目的はその名の通り、オブジェクトを作成することです。 ポイントとは、共通の親オブジェクトを継承し、個別の機能を専門の静的メソッドに実装する点です。 言葉ではわかりにくいので車のオブジェクトをを作るファクトリを実装してみます。 // 親オブジェクトのコンストラクタ var CarMaker = function() { }; // 親オブジェクトのメソッド CarMaker.prototype.drive = function() { // 走るとガソリンが減る this.gas = this.gas - 20; if(this.gas > 0) { console.lo
PhotoShopの自動処理スクリプト JSXを作成するときの参考リンクをまとめておく - 1ft-seabass.jp.MEMO
PhotoShopの自動処理スクリプト JSXを作成するときの参考リンクをまとめておく Posted on 2013-06-09 ここのところ、PhotoShopの自動処理スクリプト(JSX)を日々の業務のなかで作ることがあり、役に立つリンクがストックできてきました。 というわけで、何度も調べて同じ記事にたどり着いてしまう、自分のためにまとめておきます。 以前はJSXのリファレンス探すにしても、ソフトと同梱のPDF見なきゃいけなかったりで苦労したんですが、最近は良くなってきましたね！ では、早速。 最も参考にしているサイト いま最も参考にしているサイトといえばやはり古籏一浩さんのサイト。メールマガジン、デジタルクリエイターズで、自動処理のススメ的な記事を数多く執筆されていて、そのナレッジを余すところ無く、サイトに貯めていただいています。 Adobe Photoshop CS6自動化作戦 も
PhotoshopExtensionのつくりかたとか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? PhotoshopExtensionを作ろうと思った時まとまった情報が少なくて困ったのでまとめました。 こちらのブログ大変参考になりました！ありがとうございます。 http://rarihoma.xvs.jp/2014/08/23/1/ 作り方 PhotoshopExtensionには様々な形式があります。 ExtensionScript JSからPhotoshopのAPIを利用して動作する。ちなみにExtensionScriptが記述されたファイルの拡張子は.jsx。 PhotoshopのScriptsディレクトリ以下にExtensi
Creative Cloud - Illustrator
Unleash the full potential of Illustrator to your usersExtend and enhance Adobe Illustrator to give users power and control over their design projects: create custom filters and effects, organize layers, optimize point data, and automate tasks. Import and export custom file formats and process images in bulk. Code the way you knowBuild panels in HTML, CSS and JavaScript. Build plug-ins in C++ in y
電子書籍風Webアプリケーションを作るのに使えるJavaScriptライブラリまとめ
電子書籍コンテンツはここ数年で一気に増えています。Eコマースサイトで販売されるものだけでなく、スマートフォンアプリでも提供されています。さらにコンテンツさえ作れば業務システムのヘルプなどで提供するのも良いでしょう。 今回はそんな電子書籍風のUIを実現できるJavaScriptライブラリを紹介します。 Laker compendium 動画を埋め込んだり、タップアクションなどのイベントも使えるので、かなりインタラクティブな電子書籍が作成できます。単なる書籍の置き換えではなく、電子書籍ならではの価値が提供できそうです。 Laker compendium – Designing digital publications in HTML5 Turn.js ページをめくったり、拡大/縮小する機能が備わっています。ページの形もカスタマイズできるので、書籍風以外でも使えるようになっています。 blast
Popmotion 8 | A functional, flexible JavaScript animation library
A functional, flexible JavaScript motion library
【無料】チャート/グラフ作成用JavaScriptライブラリを比較！おすすめ5選 | まろりかの自由帳
チャート/グラフ作成のJavaScriptライブラリおすすめ5選 以下の観点でオススメの5つとして絞り込みをしました。 GithubのStar数が多い 有名企業が携わっている たくさんの人に利用されている 無料かつ商用利用可 個人的にオススメのものから紹介していきます。 １：Chart.js 概要 Chart.jsはシンプルでデザイン性が高くレスポンシブなチャート/グラフを作成可能とするJavaScriptライブラリです。 Chart.jsではHTML5のCanvas要素にチャート/グラフが動的に作成されます。 グラフのデータ描画にはデフォルトで簡単なアニメーションがついているので、見た目がオシャレになります。 基本的な8つの種類のグラフ/チャートを作成することができるので、Chart.jsさえあればほとんどのケースで事足りるはずです。 描けるグラフ/チャートの種類は以下の8つです。 線グ
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
OpenCV + Node.js で画像からぬりえ用の線画をつくる - ほんじゃーねっと
画像処理で遊びたいな、と思い立ったので、 以前PythonとOpenCVで作成した画像線画化スクリプトを Node.jsで作成しなおしてみました。 blog.honjala.net OpenCVはPythonと使うのがやはり一番使いやすいのですが、 Javascript用APIも提供されているので、 Webページ上のJavascriptやNode.jsからでも利用することができます。 docs.opencv.org しかし試してみるとNode.jsから生でOpenCV.jsを使うのはcanvasを利用することを 前提にしていたりしてなかなか手強く、うまくいかなかったので、 「opencv4nodejs」というライブラリを使うことにしました。 www.npmjs.com こちらはOpenCVの関数をNode.jsからいい感じで使えるようにしてくれていて、 Pythonで書いた処理をNode.
ブロックチェーン入門 ─ JavaScriptで学ぶブロックチェーンとBitcoinウォレットの仕組みと実装 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
ブロックチェーン入門 ─ JavaScriptで学ぶブロックチェーンとBitcoinウォレットの仕組みと実装 本記事ではブロックチェーンのプログラミングを、実践とともに学びます。ブロックチェーンとは、分散環境の新しいデータ構造であり分散合意のアルゴリズムですが、Node.jsでブロックチェーンおよびBitcoinウォレットを実装し、その仕組みを理解していきましょう。 フリーランスでエンジニアとライティングなどをゆるゆる行っているerukitiと申します。 個人のサークル「東京ラビットハウス」から「Modern JavaScript」「簡単JavaScript AST入門」「JavaScriptで覚える暗号通貨入門#1 Bitcoin完全に理解した」といったJavaScript関連の技術同人誌を単著で発行しています。 この記事では、ブロックチェーンの仕組みを解説し、実際にブロックチェーンやB
JavaScriptとオブジェクト指向プログラミング | POSTD
本稿は、オブジェクト指向プログラミング（OOP）について予備知識のないJavaScriptの学習者向けに書かれています。OOP の中でJavaScriptに関連する部分にのみ焦点を当て、OOPの概要については説明しません。ポリモーフィズムについては、静的型付け言語の方が適しているため省きます。 なぜOOPを知る必要があるか？ あなたは初めてのプログラム言語にJavaScriptを選びましたか？ あなたはコードが10万行以上にわたる巨大企業のシステムを扱う腕利きの開発者になりたいですか？ オブジェクト指向プログラミングを最大限活用できるように学ばなければ、到底無理でしょう。 様々な考え方 サッカーでは、安全に守りを固めることもできますし、サイドからの高いボールに飛びつくこともできます。また、先など考えずに攻撃することも可能です。これらの戦略は全て同じ目的を持っています。それは試合に勝つことで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Editor.js
GitHub - lhartikk/naivechain: A blockchain implementation in 200 lines of code
https://www.dropzonejs.com/
Chart.js
