※ ChatGPTを利用し、要約された質問です（原文：時間差で要素が出てくるエフェクトを導入）
時間差で要素が出てくるエフェクトを導入できない
このQ&Aのポイント
時間差で要素が出てくるエフェクトを導入したいがうまくいかない
スクロールによる要素の表示もうまく再現できていない
要素が一度に表示されるため、時間差をつけて表示したい
http://ziyudom.com/js-delay/を参考に時間差で要素が出てくるエフェクトを導入したかったのですが、うまくいきません。
いっぺんに時間差なく行われてしまいます。
一つ終わって次という形にしたいです。
ないしはほんの少し差をつけたいです。
スクロールがカキはできないのですかね。うまく再現できていませんがソースはわかると思います。スクロールの仕方があれば教えてください。
http://codepen.io/anon/pen/WGqjZZ
・css
.js-translate3d-lower-right,.js-translate3d-lower-right-2,.js-translate3d-lower-right-3 {
opacity : 0;/* 対象の要素の初期の不透明度 */
transform: translate3d(-1rem,-2rem,-1rem);
/*transform : translate(5rem, 0);横からスライド*/
transition : all 500ms;
}
・動くがいっぺんに動いてしまう。
var $deferredAnim = $.Deferred( function( deferredAnim ){
//thenでファンクション名を繋げる
deferredAnim.then(anim_01)
.then(anim_02)
.then(anim_03)
});
//実行
$deferredAnim.resolve();
function anim_01 (){
$(function(){
$(window).scroll(function (){
$('.js-translate3d-lower-right').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 350){
$(this).addClass('scrollin');
}
});
});
});
}
function anim_02 (){
$(function(){
$(window).scroll(function (){
$('.js-translate3d-lower-right-2').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 350){
$(this).addClass('scrollin');
}
});
});
});
}
function anim_03 (){
$(function(){
$(window).scroll(function (){
$('.js-translate3d-lower-right-3').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 350){
$(this).addClass('scrollin');
}
});
});
});
}
・こちらだと動かない最後の｝にエラーと出る
$(function(){
$(window).scroll(function (){
$('.js-translate3d-lower-right').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 350){
$(this).addClass('scrollin');
}
});
});
}
function anim_02 (){
$(window).scroll(function (){
$('.js-translate3d-lower-right').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 350){
$(this).addClass('scrollin');
}
});
});
}
function anim_03 (){
$(window).scroll(function (){
$('.js-translate3d-lower-right').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 350){
$(this).addClass('scrollin');
}
});
});
}
お礼
できましたありがとうございました。