Question

我是创建新网站的html新手。这也是我在该网站上的第一篇文章，所以希望我能正确发表。

我制作了一个视差页面，然后跟随了这个Github页面：http://pixelcog.github.io/parallax.js/

页面看起来很棒，直到您单击href来访问另一页面，然后单击浏览器上的后退箭头按钮以返回。多次执行后退按钮后，它会失去对齐状态。

Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>

<p>Short volumetric 3D light rays intro video I created with Adobe After Effects.  Composition set at 1280 x 720px. Frame rate is 23.976. Render resolution is 500 (littler lower quality, but render faster). Created with all built-in plug-ins.  Effects and Presets used were CC Radial Fast Blur and Bevel Alpha... </p>

<button><a href="/pages/photoshop/land-of-the-book.html" input type="button" class="button">View Project</a></button>
</article>

<div id="picture-perfect" class="parallax-img" data-parallax="scroll" data-z-index="1" data-image-src="./images/photoshop/picture-perfect.png"></div>

<article class="photoshop-parallax-item">
  <h1 class="project-heading">Picture Perfect</h1>
  <p class="parallax-text">Short volumetric 3D light rays intro video I created with Adobe After Effects.  Composition set at 1280 x 720px. Frame rate is 23.976. Render resolution is 500 (littler lower quality, but render faster). Created with all built-in plug-ins.  Effects and Presets used were CC Radial Fast Blur and Bevel Alpha....</p>

.parallax-img {
    min-height: 100vh;
    background: transparent;
    margin-top: 30px;
 }
.photoshop-parallax-item {
    display: flex;
    flex-flow: column;
    border:  0px solid black;
    border-radius: 0rem;
    padding-top: 50px;
    background: black;
 }
 .photoshop-parallax-item > p {
    margin: 0em 1rem;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: normal;
    font-size: 1.0em;
 }
 .photoshop-parallax-item > button {
    margin: 0px auto;
    background: #009688;
    padding: 0.5rem;
    border: none;
    border-radius: 1rem;
    font-size: 1.3rem;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
 }
 .parallax-text {
    padding: 0 80 50 80px;
    color: #009688;
 }
 h1 .project-heading{
    text-align: center;
    color: #009688;
    font-size: 45px;
    font-family: Lemon;
    margin-top: 100px;
}

通过“后退”按钮返回到页面后对齐关闭的视差页面

0 个答案: