[COMLS]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】バージョン: 10.1.1
【お使いのブラウザ】chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

いろいろと試しましたがうまくいきません。

何が悪いのかわからないので一度見てもらっても宜しいでしょうか？

————————————————-

my-snow-monkey/app.js に記入↓

jQuery(window).scroll(function(){
	jQuery(".passing").each(function(){
		var imgPos =  jQuery(this).offset().top;
		var scroll =  jQueryy(window).scrollTop();
		var windowHeight =  jQuery(window).height();
		if (scroll > imgPos - windowHeight + windowHeight / 4){
			jQuery(this).addClass('move');
		}
	});
});

—————————————————

my-snow-monkey/style.css に記入↓

@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}

/* css */
.passing .passing-box {
	display: block;
	text-align: center;
}
.passing .passing-bar {
	position: relative;
	display: inline-block;

	/*　後ほど解説　*/
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;

	/* 任意の値 */
	background: #000;
}
.passing .passing-txt {
	opacity: 0;

	/* 後ほど解説 */
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	/* 任意の値 */
	font-size: 4.0rem;
	font-weight: bold;
	line-height: 1.5;
}
.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease .5s 1 normal forwards;
}

————————————————————

HTMLに記入↓

<div class="passing move">
	<div class="passing-box">
		<div class="passing-bar">
			<div class="passing-txt">
				左から右に現れて文字だけ残る<br>CSSアニメーション
			</div>
		</div>
	</div>
</div>

———————————————————————————

PHPには何も記入していません。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

いろいろと試しましたがうまくいきません。

このコードが適用されて実行されているページの URL と、どううまくいかないのか（どうなってほしいのか）を教えてください！

♥ 0

いいねをした人: 居ません

[COMLS]

北島様お

お世話になっています。コムラスです。

スクロールした際に特定の位置に来た時にアニメーションがスタートする様にしたいのが目的です。

ご確認よろしくお願いいたします。

参考サイト

左から右に現れて文字だけ残るCSSアニメーション

最近のWEBサイトのトレンドは動きのあるものが増えてきていますよね。 今回はその中でもよく見かける色付きのライ…

web.alfactory.co.jp

実際に運用するときはスクロールに合わせて動くように js もしくは jQuery を使って class を付与して、class が付いた時にanimation が動くようにするのが、実際の運用のポイントです。

今回のサンプルで言えば、js・jQuery で付与する class は「move」になります。もちろん任意の名前ですのでお好きなものを命名してください。

今回はjQueryのサンプルもご用意しました。

$(window).scroll(function(){
	$(".passing").each(function(){
		var imgPos = $(this).offset().top;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll > imgPos - windowHeight + windowHeight / 4){
			$(this).addClass('move');
		}
	});
});

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

このフォーラムは僕と1対1のやりとりをするだけの場所ではなく、他のユーザーの方も書き込みができるユーザー同士で解決し合う場所でもあります。

答える方が１から環境を用意して試して回答するのは難しいので、なるべく検証環境（不具合が確認できるページ/サイト）を用意して提示してもらえると、僕だけではなく他の方も答えやすくなるので何卒よろしくお願いします。

さて、2箇所間違いを見つけました。

まず、JS のコード中で jQuery となるべき場所が jQueryy となっています。また、スクロールしたときに move が付与されないといけないのに、HTML 中に最初から move が記載されています。

jQuery addClass example – JSFiddle – Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

♥ 0

いいねをした人: 居ません

[COMLS]

HTMLを書き換えたら

出来ました！

ありがとうございます！

♥ 1

いいねをした人: 居ません

[投稿者]

投稿