2016-08-08 16 views
1

I [持っている/したい]のようなストーリーテリングのウェブサイトを作るために:jQueryの遅延と、より

http://www.bizbrain.org/coffee/

1)あなたたちは、CSSのすべてのオブジェクトをクリートまたはあなたはそれをPhotoshopでフレーム単位で行うだろうでしょうか?

2)遅延はなぜ機能しませんか? (はい、私は5000のような高遅延aswellテスト)(次のコードをライン

3)私はそれが\雑貨\スタイルのフォルダに移動する場合、私はstylesheet.cssファイルをバインドするにはどうすればよいですか? 私が試した:

<link rel="stylesheet" href="\misc\style\stylesheet.css"> 
 
<link rel="stylesheet" href=".\misc\style\stylesheet.css"> 
 
<link rel="stylesheet" href=".misc\style\stylesheet.css"> 
 

 
<link rel="stylesheet" href="/misc/style/stylesheet.css"> 
 
<link rel="stylesheet" href="./misc/style/stylesheet.css"> 
 
<link rel="stylesheet" href=".misc/style/stylesheet.css">

_________________________________________________________________________________ を^ ライン

test.js

$(document).ready(function(){ 
 
\t var n = 1; \t 
 
\t for(i = 1; i < 30; i++){ 
 
\t \t changePicture(); 
 
\t } 
 
\t function changePicture(){ 
 
\t \t n+=1; 
 
\t \t $('.p').delay(33).css('background-image', 'url("misc/bilder/'+n+'.png")'); \t \t 
 
\t } \t 
 
});
を3210

stylesheet.css

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t height: 1000%; 
 
} 
 
.p{ 
 
\t height: 100%; 
 
    width: 100%; 
 
\t position:relative; 
 
\t padding: 25%; 
 
\t background-size:cover; 
 
\t background-attachment:fixed; 
 
\t -webkit-transition: all 0.2s ease; 
 
\t -moz-transition: all 0.2s ease; 
 
\t transition: all 0.2s ease; 
 
\t background-image: url("misc/bilder/1.png");  
 
}

index.htmlを

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="\misc\style\stylesheet.css"> 
 
<title>Evolution des Menschen</title> 
 
</head> 
 
<body> 
 
\t <div class="p"></div> \t 
 
<script type="text/javascript" src="misc/js/jquery-3.1.0.min.js"></script> 
 
<script type="text/javascript" src="misc/js/test.js"></script> 
 
</body> 
 
</html>

あなたは私はウェブデザインの経験を持っていないコードからの事前の おかげ

答えて

1
$(document).ready(function(){ 
    var delay = 33; 
    changePicture(1, 30, 'misc/bilder', '.png') 

    function changePicture(next, last, path, extension){ 
    if (next <= last){ 
     setTimeout(function(){ 
     $('.p').css('background-image', 'url("' + path + '/' + next + extension + '")'); 
     next += 1; 
     changePicture(next, last, path, extension) 
     }, delay); 
    } 
    } 
}); 
1

1を言うことができるように)確認のためのCSS。フレーム単位のフレームはHTML5ではありません。ビデオだけです... CSSを使用すると、あらゆるオブジェクトのコントロールができ、デバイスの幅、その他の要素の位置、マウスの位置などに応じて、条件付きで複数の方法でそれらを移動できます。

2)jQueryのcss()のアニメーション依存ではないため、呼び出されたオブジェクトにただちに適用されます。 Using jQuery delay() with css()

3)開始ドットを削除する必要があります。css()には、delay()を使用してください。 index.htmlのファイルtest.jsのアドレスを確認してください。 stylesheet.cssと同じ操作を行います。

+1

1)あなたはcssオブジェクトを作成するためにphotoshop cs6のようなプログラムをお勧めしますか? (thats最初のPhotoshopは、私が思うにcssとして物を輸出することができます)3)私はあなたが書いておくべきものを正確に書くことができます投稿したすべての考えを試してみましたか? –

+0

'css objects'のようなものはありません。 HTML要素とCSSプロパティがあります。例えば、あなたが示したウェブサイトは、HTML要素のCSSを使って背景として設定された単純なpng画像( 'div'、' span'など)です。ウェブサイトを設計することについて何も知らない場合は、このような複雑な作業を行う前にHTMLについて少し学ぶことから始めるべきです。あなたがしなければ、あなたは解決できないであろう多くの問題に直面します。そして、あなたの 'stylesheet.css'問題のように、チュートリアルやGoogleのウェブサイトからコードをコピーして貼り付けるときに、あなたが何をしているのか分かります。 –

+1

2)そうしなければならない? 3秒間待つ。そのあとの最後の写真にジャンプします。http://pastebin.com/w120KXSs –