したがって、この質問はおそらく反対票を投じられるでしょうが、誰かが助けることができると思います.
私が探している効果は、風船のように上下に浮かんでいる青いブロックと、ブロックがループ上で上下するにつれて、その下で成長したり縮小したりする影です。
これをプログラムする方法についてのアイデアはありますか、または達成できるチュートリアル/プラグインを知っている人はいますか?
jQueryを使用するか、CSS3を使用して、呼び出しを行うことができます。両方を紹介します。
CSS3:
#box{
position:absolute;
top:100px;
left:0;
width:200px;
height:200px;
background:#6CB8E9;
-moz-animation:jump 2s infinite ease-in-out;
-webkit-animation:jump 2s infinite ease-in-out;
}
#shadow{
position:absolute;
top:290px;
height:20px;
border-radius:30px;
left: -200px;
background:transparent;
width:200px;
box-shadow:200px 0 10px 2px rgba(0,0,0,0.4);
margin-left:0;
opacity: 1;
-moz-animation:shadowSize 2s infinite ease-in-out;
-webkit-animation:shadowSize 2s infinite ease-in-out;
}
@-moz-keyframes jump {
0% { top:100px;}
50% { top:25px;}
100% { top:100px;}
}
@-webkit-keyframes jump {
0% { top:100px;}
50% { top:25px;}
100% { top:100px;}
}
@-moz-keyframes shadowSize {
0% { width:200px; margin-left:0px; opacity:1; box-shadow:200px 0 10px rgba(0,0,0,0.7);}
50% { width:150px; margin-left:25px;opacity:0.3; box-shadow:200px 0 30px rgba(0,0,0,0.3);}
100% { width:200px; margin-left:0px; opacity:1; box-shadow:200px 0 10px rgba(0,0,0,0.7);}
}
@-webkit-keyframes shadowSize {
0% { width:200px; margin-left:0px; opacity:1; box-shadow:200px 0 10px rgba(0,0,0,0.7);}
50% { width:150px; margin-left:25px;opacity:0.3; box-shadow:200px 0 30px rgba(0,0,0,0.3);}
100% { width:200px; margin-left:0px; opacity:1; box-shadow:200px 0 10px rgba(0,0,0,0.7);}
}
さて、私たちの親愛なるjQで...私の醜い代わりに影に.png画像を使用してくださいbox-shadow
:)
var li = 1; // a LoopIterations variable
function loop(){
li = ++li%2; // reset evenly to '0' // results in 0, 1, 0, 1, 0, ....
$('#shadow').animate({
width: !li ? 150:200 ,
marginLeft: !li ? 25:0 ,
opacity: !li ? 0.3:1
}, 2000);
$('#box').animate({
top: !li ? 25 : 100
},2000, loop); // THIS 'loop' callback will recall the loop() function creating ... a loop :D
}
loop(); // start loop
説明するために:すべての奇数の反復li
はに設定され0
、他のすべての反復は(モジュロ演算子)の1
おかげでに設定されます。Javascriptでは、として表すことができます。これは、2つのブール値をチェックする三項演算子の使用に最適です。例:
%
0
false
[true or false statement] ? [do this if true] : [do that if false] ;
!li ? 150:200
!li
(= 0 = false)を使用する場合は使用する、それ200
以外の場合は使用する150
さらに:
<div id="box"></div>
<div id="shadow"></div>
およびCSS:
#box{
position:absolute;
top:100px;
width:200px;
height:200px;
background:#6CB8E9;
}
#shadow{
position:absolute;
top:310px;
height:1px;
background:rgba(0,0,0,0.26);
width:200px;
box-shadow:0 0 14px 2px #000;
margin-left:0;
opacity: 1;
}