私はこの種のことは初めてで、いくつかの問題があります。私はすでにこれで多くの髪の毛を失っているので、正しい方向に私を向けてくれることを願っています... :-)
URL： ここをクリック
私の問題：1）正確な「ビュー」（画面の一部-具体的にはテレビ画面）を定義する方法。アニメーションは画面のその部分でのみ表示されますか? たとえば、リンクは特定の位置から特定の位置までしか表示されないようにする必要があります。これにより、アニメーションの早すぎる実行に関する問題が解決すると思います。多分誰かが私を正しい方向に向けることができますか？
スクロールアニメーション用にスーパースクロールラマを実装しました。
2）「逆」プロパティが明示的にtrueに設定されていても、逆スクロールすると何もしません。なんで？
3) Firefox ではすべて正常に動作しているように見えますが、Chrome では div が表示される前でもアニメーションが完了しているように見えます。なんで？どうすればこれを修正できますか? IEでも同じ...
4)id "spin-it" の div を最初/左のゴールデン フレームにスピンさせたいのですが、正確な右スクロール位置を指定して & から正確な右位置にスクロールするにはどうすればよいですか?
これらのアニメーションは Superscrollorama を使用せずに行うべきではないでしょうか?
画面の解像度が 1366*768 であることも知っておくと便利です。すべてが稼働したら、他の解決策を修正/確認する予定です。
前もって感謝します！！敬具
編集: test.html
<body>
<script>
$(document).ready(function(){
$('#film').show(3000);
//Superscroll
var controller = $.superscrollorama({
triggerAtCenter: false,
playoutAnimations: true,
reverse: true,
});
if($("#film:visible")){
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), 5, {css:{opacity: 0}}));
controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), 10, {css:{left:'500px'}, ease:Quad.easeInOut}));
controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
}
});
</script>
<div class="container"></div>
<div class="content" style="background-color:#000000">
<img id="film" src="img/totaalaf_klein.jpg"/>
</div>
<div class="link1" id="fade-it">
<a href = "http://www.google.be">TEST LINK</a>
</div>
<div class="wieFlp" id="fly-it">
<div class="textkader" >
<p class="bigtext">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
</p>
</div>
</div>
<div class="test" id="spin-it">
<img src="img/testing.png"/>
</div>
</body>
</html>
何らかの理由でコードが表示されませんが、そこには JQuery プラグインや Superscrollorama などへの参照があります。
スタイル.css
html、ボディ、div、スパン、アプレット、オブジェクト、iframe、
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a、略語、頭字語、住所、ビッグ、引用、コード、
del、dfn、em、img、ins、kbd、q、s、samp、
スモール、ストライク、ストロング、サブ、サップ、TT、バール、
b、u、i、センター、
dl、dt、dd、ol、ul、li、
フィールドセット、フォーム、ラベル、凡例、
テーブル、キャプション、tbody、tfoot、thead、tr、th、td、
記事, 脇, キャンバス, 詳細, 埋め込み,
フィギュア、フィグキャプション、フッター、ヘッダー、hgroup、
メニュー、ナビゲーション、出力、ルビ、セクション、概要、
時間、マーク、オーディオ、ビデオ {
マージン: 0;
パディング: 0;
ボーダー: 0;
フォントサイズ: 100%;
フォント: 継承;
垂直整列: ベースライン;
}
/* 古いブラウザーの HTML5 表示ロールのリセット */
記事、さておき、詳細、figcaption、フィギュア、
フッター、ヘッダー、hgroup、メニュー、ナビゲーション、セクション {
表示ブロック;
}
体 {
行の高さ: 1;
}
オール、ウル{
リストスタイル: なし;
}
ブロッククオート, q {
引用符: なし;
}
blockquote:before, blockquote:after,
q:前、q:後{
コンテンツ： '';
内容: なし;
}
テーブル {
ボーダー崩壊:崩壊;
ボーダー間隔: 0;
}
body {font-family: sans-serif;}
＃映画{
表示:なし;
}
。コンテンツ {
境界線: 2px 単色の赤。
位置: 絶対;
左: 130px;
上: 50px;
幅: 150px;
右パディング: 10px;
パディング左: 10px;
背景色: #000000;
Z インデックス: 2;
幅: 900px;
/*高さ: 596px;*/高さ: 3000px;
}
.link1{
位置: 絶対;
パディングトップ: 45%;
パディング左: 20%;
Z インデックス: 4;
}
。容器{
位置: 固定;
高さ: 100%;
幅: 100%;
background: url('../img/bgtest2.png') no-repeat center center fixed;
背景サイズ: カバー;
-webkit-background-size: カバー;
Z インデックス: 3;
}
。下 {
位置: 固定;
Z インデックス: 4;
不透明度: 0.5;
}
.textkader{
幅: 200px;
背景: url('../img/classy_fabric.png');
色: 白;
フォントサイズ: 12px;
font-family: 'Happy Monkey'、筆記体。
テキストシャドウ:
1px 1px 0 透明、
2px 2px 0 #101010;
オーバーフロー: 非表示;
パディング: 15px;
}
.bigtext{
フォントサイズ: 15px;
フォントの太さ: 太字;
}
.wieFlp{
位置: 絶対;
パディングトップ: 110%;
// パディング左: 18.5%;
右: 867px;
/*z-index: 2;*/
z-index:2;
}