jquery_interactive_bg.jsでバックグラウンド以外の要素が発生する

ウェブサイトのリンク先ページで視差効果を得ようとしていました。私はinteractive_bg.jsプラグインを使用し、demo tutorialから後ろ向きに作業していましたが、最終的に私が望む効果を望む写真を手に入れることができました。jquery_interactive_bg.jsでバックグラウンド以外の要素が発生する

これが私の現在のHTMLれる -

<body> 
    <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> 
     <div class="main"> 
      <h1>I am<span id="typed"></span></h1> 
      <h4 id="test">I create<span id="typed2"></span></h4> 
      <a id="but1" class="ghost-button-semi-transparent" href="#">Check me out!</a> 
    </div> 
    </div> 
</body>

はここ

html { 
    height: 100%; 
    } 
    body { 
    padding: 0; 
    text-align: center; 
    font-family: 'Roboto Condensed', sans-serif; 
    position: relative; 
    margin: 0; 
    height: 100%; 
    } 
    .wrapper { 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto; 
    overflow: hidden; 
    } 
    .main { 
    float: left; 
    width: 100%; 
    margin: 0 auto; 
    } 
    .bg { 
    position: absolute; 
    min-height: 100% !important; 
    width: 100%; 
    z-index: 0; 
    } 

    .ibg-bg { 
    position: absolute; 
    } 
    .main { 
    position: relative; 
    }

今wrapper bgのdivに背景を有するものである私のCSS-です。私がそのdivの後に置くものは、その下に来るか、または相対的な位置付けを使用するとその上に来ます。それを引っ張るために余白を追加すると、ウィンドウサイズが変更されたときに私のページがねじれます。

wrapper bg divの後ろに要素を挿入するにはどうすればよいですか？

出典

2017-08-04 YaddyVirus

私はあなたの質問を理解したら、クラスラッパーbgでdivの後に何かを入れたいと思う。このdivにはposition：absoluteがあります。したがって、相対位置を設定すると、このdivはページの上部にあり（高さ100％）、新しいdivを追加すると、必要に応じてラッパーdivの後ろに配置されます

出典

2017-08-04 07:54:46

ラッパーdivの位置を変更すると、interactive_bg.jsプラグインが正しく表示されなくなります。それは絶対的な位置でのみ動作します – YaddyVirus

Uhmmm、私はgithubからこの例を取ってくれました。私のためにこのソリューション、さらには背景アニメーションのスクリプト –

私はあなたを愛しています。それは私が言うことができるすべてです – YaddyVirus

変更位置：絶対;ポジション：相対;

身長を100％除去します。

。ラッパーセットの必要な高さ。

.bg { 
    position: relative; 
    min-height: 100% !important; 
    width: 100%; 
    z-index: 0; 
} 
body { 
    padding: 0; 
    text-align: center; 
    font-family: 'open sans'; 
    position: relative; 
    margin: 0; 
} 
.wrapper { 
    height: auto !important; 
    height: 300px; 
    margin: 0 auto; 
    overflow: hidden; 
}

出典

2017-08-04 08:04:21 Dhaarani

私は高さを100％にする必要があります。しかし、相対的に位置を設定することで問題は解決しました。 – YaddyVirus

jquery_interactive_bg.jsでバックグラウンド以外の要素が発生する

答えて

関連する問題