JavaScriptのアニメーション

Question

モノが右から表れて出現するアニメーションを作りたいです。どのようにコードを書くと良いでしょうか？

console.log("index.js: loaded");




const header = document.creatElement("header");

function header(){

	$("header").each(function(){ 
		var elemPos = $(this).offset().top-50;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){

		$(this).addClass("header");
		$(this).children("header");
}
}
}

Comments

[Zuishin]

だめだこりゃ。

[m.ts10806]

自分で書いたコードですよね？
現状のコードを他人に説明できますか？
そしてそもそもエラー出てるのを気づいてませんか？

いずれにしてもこのコードだけでは無理ですね。Javascriptだけでは何も動かない

[yambejp]

前回の回答は完全無視ですね。
参考にする気がないなら質問する必要もないと思いますが・・

[Strawberry-milk]

Zuishinさん、すみません。私としては、コードの書き方として回答そのものをいただけたらありがたく思いますが。。。

m.ts10806さん、JavaScriptだけを書いただけでは、このアニメーションは作れませんか。

yambejpさん、前回の回答ですか。確認してみますね。

[yambejp]

前回＝https://teratail.com/questions/249e62e4c5c5j7

念のため繰り返します
「header」が競合しています

> モノが右から表れて出現するアニメーション
仕様をはっきりしてください

[m.ts10806]

>JavaScriptだけを書いただけでは、このアニメーションは作れませんか。

Javascript単体で動くわけではなく、htmlから呼び出されて動くから。
それにjQueryも使ってるのにこのコードだけで動かないことは見ればわかる。
エラー確認しないの？

Answer 1

特段、回答という訳ではないですが・・・

どのようにコードを書くと良いでしょうか？

以下はドットインストールのレッスンの抜粋になります。
jQuery のレッスンを始めるのに必要な前提条件を抜き出したものになります。
この辺りを一通り学習し終えたころには jQuery が使われたコードが読めるようになるのでは、と思います。

■ 詳解HTML 基礎文法編(全22回)
https://dotinstall.com/lessons/basic_html_tags_v2

■ 詳解CSS 基礎文法編(全33回)
https://dotinstall.com/lessons/basic_css_styles_v2

■ 詳解CSS セレクター編(全12回)
https://dotinstall.com/lessons/basic_css_selectors

■ はじめてのJavaScript(全8回)
https://dotinstall.com/lessons/basic_javascript_v5

■ 詳解JavaScript 基礎文法編(全26回)
https://dotinstall.com/lessons/basic_javascript_grammer_v2

■ 詳解JavaScript オブジェクト編(全35回)
https://dotinstall.com/lessons/basic_javascript_objects_v2

■ 詳解JavaScript DOM編(全21回)
https://dotinstall.com/lessons/basic_javascript_dom_v2

■ jQuery入門(全13回)
https://dotinstall.com/lessons/basic_jquery_v3

Comments

[cx20]

> アニメーションを作りたい

JavaScript や CSS によるアニメーションの方法は１つではありません。
下記の記事を参考に実現したいイメージに近いサンプルを見つけて試してみるのが良いかと思います。
サンプルに書かれているコードが分からない場合は上記のレッスンを再度やり直してみて下さい。

■ 【JavaScript入門】要素に動きをつけよう！アニメーションの作り方
https://www.sejuku.net/blog/60724
■ CSS/JavaScriptで文字に動きを！テキストアニメーション30選
https://goworkship.com/magazine/text-effect-typography/

Answer 2

とりあえず、かっこの対応を取るところから始めてみましょう。
開いたかっこは必ず閉じなきゃいけないです。

ご提示のコードのかっこの部分だけ、抜き出してみます。

 (){

	()((){ 
		   ()()
		   ()()
		   ()()
		 (    ){

		()()
		()()
}
}
}

開いたかっこと閉じたかっこの数が合わないですよね？

コードエディタを使っていると思いますが、こちらで文法エラーが出なくなるまでひとまず頑張ってみましょう。

Comments

[Strawberry-milk]

ご回答ありがとうございます。ちなみにすみません、どこの開いたカッコと閉じたカッコの数が合わないかは分かったりはしますか？

[Lhankor_Mhy]

コードエディタを活用してみてはどうでしょうか。

たとえば、VSCodeであれば、対応するかっこにジャンプするショートカットがあります。
https://motamemo.com/vscode/vscode-tips/go-to-bracket/