ネットアンサー55備忘録

作成ページ 1、文字を入れるだけでよい。 2、画像を入れるだけでよい。 3、背景画像を入れて、その画像の横縦幅を確保する。（width:100%設定は無理でした）

<li id="animation01"><img src="/img/problems_01.png" alt=""></li>

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

$('#animation01,#animation02,#animation03,#animation04,#animation05,#animation06,#animation07,#animation08,#animation09').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#animation01,#animation02,#animation03,#animation04,#animation05,#animation06,#animation07,#animation08,#animation09').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInDown");
  }
 });
});

※これが必要な時がある

#animation01 {
	visibility:hidden;
}

---

●横からスライドの時

<div class="r_box" id="animation12"><a href="#">WEBで問い合わせ&nbsp;</a></div>

.fadeInRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(40px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}

$('#animation11,#animation12,#animation13,#animation14,#animation15,#animation16,#animation17,#animation18,#animation19').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#animation11,#animation12,#animation13,#animation14,#animation15,#animation16,#animation17,#animation18,#animation19').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInRight");
  }
 });
});

UNORTHODOX WORKBOOK