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

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

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

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

Q&A

解決済

1回答

320閲覧

jQueryのアニメーションで解決できないこと

r.baagio10

総合スコア19

jQuery

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

0グッド

0クリップ

投稿2018/08/24 03:07

編集2018/08/24 04:37

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
「質問内容」
http://www.pointedge.work/

こちらのサイトのスクロールしてから右から左にコンテンツが表示されるアニメーションのことで
お聞きしたいのですが、どのように作られているのでしょうか?

フロントエンジニアもしくはバックエンドの方で詳しい方どうか教えていただけませんでしょうか?
どうぞ宜しくお願い致します。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

私が作ったjQueryなのですが同じアニメーションが繰り返されます。
スクロールしたら左端に隠れアニメーションが実行されたら右にスライドしたい
イメージの実装にしたいです。

一度実行されたら表示するようにしたいです。

エラーメッセージ

該当のソースコード

ソースコード

私がjQueryで作ったコードになります。
/* jQuery */
$(function(){
$(window).scroll(function(){
$('.message-wrap').toggleClass('open');
var top = $(this).offset().top;
if(scrollTop() > 500) {
console.log('once');
used = true;
}
});
})

/* css */
こちらのcssでコンテンツを左端に隠し
.message-wrap {
background: url(../img/about/m-bg.png);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
height: 440px;
margin-top: 150px;
position: relative;
top: 0;
left: -100%;
}

         こちらのcssのアニメーションで右にスライドします
.message-wrap.open {
transform: translateX(100%);
transition: 1.2s;
}

試したこと

ここに問題に対して試したことを記載してください。

原因を調べネットで色々と試行錯誤したんで原因がわかりませんでした。
どうか原因を教えてください。
どうぞ宜しくお願い致します。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2018/08/24 04:09

質問テンプレート部分の文言が多く残っています。質問内容や意図を読み取る上ではノイズにしかなりませんので、自身の質問に関係のある文章(およびソースコード)のみ残すか、きちんと残りのテンプレート部分を埋めてください。
m.ts10806

2018/08/24 04:09

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
guest

回答1

0

ベストアンサー

すべてを回答した方が良いのですが、全体のソースが見えないのでなんとも言えないです。

Animationは一応サンプルを作成しました。
【サンプル】
jsfiddle-Animationのみ

記載されていたWEBサイトはTweenMaxを使用しているので、同じライブラリを使用しています。
tweenmax

css

1transform: scaleX(0); 2transform-origin: 0% 50%;

transformの数値を変更してアニメーションを行っています。

あとは、scroll位置によってアニメーションを発火させる処理ですが、scrollmagicなどを使用すると簡単に実装できると思いますので、一度確認してみて下さい。
scrollmagic

投稿2018/08/24 05:10

LanHma

総合スコア192

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

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

r.baagio10

2018/08/24 05:25

回答して頂きありがとうございます。 質問内容が間違えておりました。 すみませんでした。 http://www.pointedge.work/ ↑こちらのサイトのFOR PROJECT OWNERSのコンテンツの スクロールしてからアニメーションで右から左にスライドする実装になります。 教えていただけませんでしょうか?
LanHma

2018/08/24 05:31

それは失礼しました。 右から左へスライドするアニメーションも同じで transform-originを変更すると出来ますよ! http://jsfiddle.net/xpvt214o/671190/ 更新しましたので確認して下さい。
r.baagio10

2018/08/24 13:13 編集

何度も回答していただきありがとうございます。 一度問題点を見て頂けませんでしょうか? ↓今、制作していますWebサイトになります。 このサイトの中に TOP MESSAGE のコンテンツがあります。 このコンテンツをスクロールしてから左端によせアニメーションで右にスライドするイメージに したいのです。 原因を教えていただきませんでしょうか?
r.baagio10

2018/08/24 05:53

追記です。 index.htmlの中にある TOP MESSAGE になります。 どうぞ宜しくお願い致します。
LanHma

2018/08/24 05:56 編集

確認しました! scrollするたびにtoggleClassが発火しているので、 toggleClass→addClassにしてみてはどうでしょうか?
r.baagio10

2018/08/24 06:07

ありがとうございます。 もう一点だけすみません。 http://www.pointedge.work/ こちらのサイトのように FOR PROJECT OWNERS のグレーの背景画像がスライドするにはcssで作るのでしょうか?
LanHma

2018/08/24 06:51 編集

グレーの背景画像がスライドするには先程伝えたリンクを参考にして下さい! 参考サイト(http://www.pointedge.work/)の方法を利用するなら、 ・message-wrapの子要素にグレーの背景(span等)を追加し、見せたい要素にかぶさるようにabsoluteで配置。 ・グレーの背景のscaleX(0)にし、はじめは見えないように。見せたい要素もopacityなどで消しておく。 ・scaleX(1)でアニメーションを行う。 ・かぶさっている間に見せたい要素を表示する ・再度グレーの背景をscaleX(0)して背景を消す みたいな感じでしょうか。
LanHma

2018/08/24 06:55

添付されたファイルはローカル上で削除しておきますので。 r.baagioさんもアップしたurlは削除しておいた方が良いかと思います!
r.baagio10

2018/08/24 07:12

教えていただき誠にありがとうございました。 作ってみます。 すいません。 もう一点だけjQueryで下にスクロールしてから複数で左から右に同じようなアニメーション にするにはどうすればいいのでしょうか? ↓このコードでは下にスクロールしてから同じアニメーションが出来ません。 $(function(){ $(window).scroll(function(){ $('.message-wrap,.clerical-wrap,.person-wrap').addClass('open'); var top = $(this).offset().top; if(scrollTop() > 800) { console.log('once'); used = true; } }); })
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問