ページの読み込みが終わり、ローディング画面が消えてから、
アニメーションを実行したいのですが、
ローディングを下記のように設定し、
JavaScript
1$(function() { 2 var h = $(window).height(); 3 $('header,main,footer').css('display','none'); 4 $('#loader_bg ,#loader').height(h).css('display','block'); 5}); 6$(window).load(function () { 7 $('#loader_bg').delay(900).fadeOut(800); 8 $('#loader').delay(600).fadeOut(300); 9 $('header,main,footer').css('display', 'block'); 10});
アニメーションをTimelineMaxライブラリを使って下記のように記述すると
JavaScript
1var tlcp = new TimelineMax(); 2tlcp.from('.main_copy_img',2,{ease: Back.easeOut.config(1.7),y: '-20%',scale: 1.5, opacity:0}) 3 .from('.mein_copy_text', .8, {rotation: 20,y: '-20%',scale: 1.2, opacity:0},"-=1")
ローディングの最中にアニメーションが実行されてしまうため、どうしても思うように動きません。
TimelineMaxで遅延させるdelayなどを使用して調整したり試したのですが、アニメーションが変な所で止まった状態から開始されたりし、なかなか調整ができません。
ローディング画面が消えてから実行したいので、ローディングのJSを簡易にし、下記のように
TimelineMax内で実行することで、なんとかやりたい形には近づけたのですが、
簡易のため、ローディングの動きが少し単調になってしまいます。
JavaScript
1$(window).load(function () { 2var tlcp = new TimelineMax(); 3tlcp.to('#loader_bg', 2,{display:'none'}) 4 .from('.main_copy_img',2,{ease: Back.easeOut.config(1.7),y: '-20%',scale: 1.5, opacity:0}) 5 .from('.mein_copy_text', .8, {rotation: 20,y: '-20%',scale: 1.2, opacity:0}); 6});
処理後に実行したいので、.when()、.done()というのも使ってみましたが、うまく動きませんでした。
他に良い方法がございましたらご教示いただけないでしょうか。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/13 01:16