質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3404閲覧

[クリエイティビティなWeb制作 Javascript] かっこいいエフェクトの追加方法について

ogasannnnn

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

2クリップ

投稿2017/01/24 15:26

お世話になります。

趣味でweb制作をしているのですが、
サイトに訪れた瞬間にメッセージや動き(アニメーション)があり、
すごくかっこいいなと思い、自分でも制作できないかと模索しておりました。

具体的には、下記サイトのようなエフェクトを追加し、
時間差でロードがされたり、パーツが動くようにしてみたいと思っています。

https://sonikpass.com/
https://recruit.abematv.co.jp/

質問者である私のレベルは、下記サイトを一人で自作できるくらいです。
(仕事の合間に勉強をはじめて半年くらいと言ったところでしょうか・・)

一通り、jQueryの使い方などは把握しております。

http://kakehashi-tech.com

みなさま恐れ入りますが、宜しくお願いします。

nnahito👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ScrollMagicTweenMaxVelocity.jsanime.js で検索!

(検索例↓)

【TweenMaxとScrollMagicで自由自在にスクロールアニメーション - Qiita】
http://qiita.com/ikuwow/items/aab66cf92eb85197746e

【カンタン・便利! ScrollMagicのパララックスサンプルを解説。 | ネクストページブログ】
http://nxpg.net/blog/?p=4634

【Javascriptのアニメーション処理を高速化するプラグインVelocity.jsの使い方 | Tips Note by TAM】
http://www.tam-tam.co.jp/tipsnote/javascript/post6746.html

【アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装! - Qiita】
http://qiita.com/kyota/items/c46f44340a384e059a5e

【軽量・簡単なのにいきいきしたアニメーションが付けられる!anime.jsを触ってみた | それいけ!フロントエンド】
https://liginc.co.jp/302886

投稿2017/01/24 16:35

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ogasannnnn

2017/01/29 04:20

遅くなってしまって申し訳ありません。ありがとうございました。よく色々なサイトで使用されているTweenMaxが何なのかずっと思っておりましたが、少しだけ明瞭になった感覚です。早速、anime.jsを実装して、サイトに使いました。他のライブラリも徐々に実装していきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問