前提・実現したいこと
ここに質問の内容を詳しく書いてください。
「質問内容」
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー