1

このフラッシュ アニメーションを HTML/CSS に再作成しようとしていますが、行き詰まりました。

これが実際のアニメーションです。背景が暗い最初の画像がフェードインし、次の画像が下にスライドします

http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/

これが私がこれまでに得たものです... 2番目の画像をスライドダウンに追加するにはどうすればよいですか?

http://jsfiddle.net/tetonline/QZNut/2/

HTML

<img onload="this.style.opacity='1';" src="https://tchuatocolearner.eppi.com/temp/graphinglab/images/blur.png" />

CSS

img {
    opacity:0;
    -moz-transition: opacity 3s;
    /* Firefox 4 */
    -webkit-transition: opacity 3s;
    /* Safari and Chrome */
    -o-transition: opacity 3s;
    transition: opacity 3s;
}
4

1 に答える 1

1

私は、CSS3 アニメーションと 2 つの JavaScript 関数を使用して、アニメーション クラスを追加/削除するだけで作業できる大まかなバージョンを作成しました。ここでチェックしてください

これは、完全な javascript/jQuery バージョンよりも優れたパフォーマンスを発揮します。

また、スライド ダウン要素を ではdivなくimgs にすることをお勧めします。これにより、追加したボタンのように、その中にコンテンツを含めることができます。

ここに関連するコードがあります

<div id='firstDiv' class='overlay moveDown'>
  <button onclick='firstAction()'></button>
</div>
<div id='secondDiv' class='overlay'>
  <button onclick='secondAction()'></button>
</div> 
<div id='content' class='fadeMe'>...Content...</div>

// CSS
.overlay {
    position:absolute;
    left:50%;
    top:-500px;
    margin-top:-200px;
    margin-left:-250px;
    width:500px;
    height:400px;
    background-repeat: no-repeat;
    background-size: 100%; 
    z-index:3;
}
@keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}
@-webkit-keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}
@-moz-keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}
@-ms-keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}
@-o-keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}

@keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
@-webkit-keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
@-moz-keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
@-ms-keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
@-o-keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
#firstDiv {
    background-image: url(http://img2.timeinc.net/people/i/2013/pets/news/130304/kitten-3-600.jpg);
}
#secondDiv {
    background-image: url(http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg);
} 
.moveDown {
  -webkit-animation: movedown 2s linear forwards;
  -moz-animation: movedown 2s linear forwards;
  -ms-animation: movedown 2s linear forwards;
  -o-animation: movedown 2s linear forwards;
  animation: movedown 2s linear forwards;
  <!--
  animation-name:"movedown";
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  -->
}
.moveUp {
  -webkit-animation: moveup 2s linear forwards;
  -moz-animation: moveup 2s linear forwards;
  -ms-animation: moveup 2s linear forwards;
  -o-animation: moveup 2s linear forwards;
  animation: moveup 2s linear forwards;
  <!--
  animation-name:"moveup";
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  -->
}
#content {
  padding:40px;
  margin:0 auto;
  width:75%;
  height:75%;
  opacity:1;
  transition:2s opacity;
}
#content.fadeMe {
  opacity:.4;
  z-index:-1;
}

// Javascript
function firstAction() {
  var elem = document.getElementById('firstDiv'),
      elemTwo = document.getElementById('secondDiv');
  elem.className = 'overlay moveUp';
  elemTwo.className = "overlay moveDown";
} 

function secondAction() {
  var elem = document.getElementById('secondDiv'),
      main = document.getElementById('content');
  elem.className = 'overlay moveUp';
  main.className = '';
}

ブラウザの接頭辞を追加するために編集

どうやらSafariはピクセルとパーセントの混合を好まないため、再度編集

于 2013-08-20T00:55:09.503 に答える