スクロールで文字や写真をふわっとさせる
-2015年12月10日-
作成ページ
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で問い合わせ </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