0

そこで、一部のセクションの背景に JavaScript アニメーションを使用するサイトに取り組んできました。現在、問題のセクションは次のように分類されています。

    <section id="intro">
        <div class="info">
            <div class="container">
                <div class="row">
                    <div class="col-full"><h1>My Name</h1></div>
                </div>
                <div class="row"><div class="col-1-4 centered line"></div></div>
                <div class="row">
                    <div class="col-full"><h4>Video<span class="cool">s</span> and stuff</h4></div>
                </div>
            </div>
        </div>

        <nav id="nav">
            <!-- The content between <span> </span> tags will be hidden on mobile version -->
            <ul class="clearfix">
                <li><a href="#profile">Pro<span>file</span></a></li>
                <li><a href="#skills">Ski<span>lls</span></a></li>
                <li><a href="#experience">Exp<span>erience</span></a></li>
                <li><a href="#education">Edu<span>cation</span></a></li>
                <li><a href="#portfolio">Por<span>tfolio</span></a></li>
                <li><a href="#contact">Con<span>tact</span></a></li>
            </ul>
        </nav>
    </section>

もともと、セクション全体の背景を

    dataUrl = canvas.toDataURL();
    document.getElementById("intro")[0].style.background='url('+dataUrl+')'

しかし、それはうまくいかなかったので、結局

    dataUrl = canvas.toDataURL();
    document.getElementsByClassName("info")[0].style.background='url('+dataUrl+')'

した。ただし、Nav バーはページを下に移動するとスクロールし、下にスクロールするためのスクリプトが開始されるとすぐに、背景はデフォルトの青色に戻ります。

私の最初の考えは、単に追加することでした

document.getElementById("nav")[0].style.background='url('+dataUrl+')'

しかし、それはうまくいきませんでした。私はいくつかの成功を収めました

document.getElementByClassName("clearfix")[0].style.background='url('+dataUrl+')'

ただし、テキストのすぐ周囲の領域のみがアニメーションの背景を使用していました。残りはまだ青でした。

したがって、 getElementById に問題があるのか​​ 、それとも style.background を<section>andで使用できないのかはわかりません<nav>。

誰にも考えはありますか？

4

1 に答える 1