僅使用CSS的基於滾動的動畫

Question

只是想知道當您滾動到它們時是否可以爲圖像添加動畫。這就像當您向下滾動並進入頁面的某個部分時，圖像就會出現。有沒有可能只使用CSS？先謝謝了！

Answer 1

確定這是可能的只要使用這個jQuery插件。

OW JS

實施例源LINK

Answer 2

嘗試這種情況： -

/* 
 
*Styling 
 
*/ 
 

 
html,body { 
 
     width: 100%; 
 
     height: 100%; 
 
     position: relative; 
 
} 
 
body { 
 
    overflow: hidden; 
 
} 
 

 
header { 
 
    background: #fff; 
 
    position: fixed; 
 
    left: 0; top: 0; 
 
    width:100%; 
 
    height: 3.5rem; 
 
    z-index: 10; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    padding-top: 0.5rem; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    width: inherit; 
 
    margin: 0; 
 
} 
 

 

 
ul li:nth-child(3n + 1), #main .panel:nth-child(3n + 1) { 
 
    background: rgb(0, 180, 255); 
 
} 
 

 
ul li:nth-child(3n + 2), #main .panel:nth-child(3n + 2) { 
 
    background: rgb(255, 65, 180); 
 
} 
 

 
ul li:nth-child(3n + 3), #main .panel:nth-child(3n + 3) { 
 
    background: rgb(0, 255, 180); 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    margin: 0 8px; 
 
    margin: 0 0.5rem; 
 
    padding: 5px 8px; 
 
    padding: 0.3rem 0.5rem; 
 
    border-radius: 2px; 
 
    line-height: 1.5; 
 
} 
 

 
ul li a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.panel { 
 
    width: 100%; 
 
    height: 500px; 
 
    z-index:0; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-transition: -webkit-transform 0.6s ease-in-out; 
 
    transition: transform 0.6s ease-in-out; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 

 
} 
 

 
.panel h1 { 
 
    font-family: sans-serif; 
 
    font-size: 64px; 
 
    font-size: 4rem; 
 
    color: #fff; 
 
    position:relative; 
 
    line-height: 200px; 
 
    top: 33%; 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 

 
/* 
 
*Scrolling 
 
*/ 
 

 
a[ id= "servicios" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
} 
 

 
a[ id= "galeria" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(-500px); 
 
    transform: translateY(-500px); 
 
} 
 
a[ id= "contacto" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(-1000px); 
 
    transform: translateY(-1000px); 
 
}

<a id="servicios"></a> 
 
    <a id="galeria"></a> 
 
    <a id="contacto"></a> 
 
    <header class="nav"> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="#servicios"> Servicios </a> </li> 
 
       <li><a href="#galeria"> Galeria </a> </li> 
 
       <li><a href="#contacto">Contacta nos </a> </li> 
 
      </ul> 
 
     </nav> 
 
    </header> 
 

 
    <section id="main"> 
 
     <article class="panel" id="servicios"> 
 
      <h1> Nuestros Servicios</h1> 
 
     </article> 
 

 
     <article class="panel" id="galeria"> 
 
      <h1> Mustra de nuestro trabajos</h1> 
 
     </article> 
 

 
     <article class="panel" id="contacto"> 
 
      <h1> Pongamonos en contacto</h1> 
 
     </article> 
 
    </section>

或

/* ============================================================ 
 
    PRIMARY STRUCTURE 
 
============================================================ */ 
 
.container { 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 
/* ============================================================ 
 
    SECTIONS 
 
============================================================ */ 
 
section.module:last-child { 
 
    margin-bottom: 0; 
 
} 
 
section.module h2 { 
 
    margin-bottom: 40px; 
 
    font-family: "Roboto Slab", serif; 
 
    font-size: 30px; 
 
} 
 
section.module p { 
 
    margin-bottom: 40px; 
 
    font-size: 16px; 
 
    font-weight: 300; 
 
} 
 
section.module p:last-child { 
 
    margin-bottom: 0; 
 
} 
 
section.module.content { 
 
    padding: 40px 0; 
 
} 
 
section.module.parallax { 
 
    height: 600px; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
} 
 
section.module.parallax h1 { 
 
    color: rgba(255, 255, 255, 0.8); 
 
    font-size: 48px; 
 
    line-height: 600px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
 
} 
 
section.module.parallax-1 { 
 
    background-image: url("http://labs.qnimate.com/slider/1.jpg"); 
 
} 
 
section.module.parallax-2 { 
 
    background-image: url("http://labs.qnimate.com/slider/2.jpg"); 
 
} 
 
section.module.parallax-3 { 
 
    background-image: url("http://labs.qnimate.com/slider/3.jpg"); 
 
} 
 

 
@media all and (min-width: 600px) { 
 
    section.module h2 { 
 
    font-size: 42px; 
 
    } 
 
    section.module p { 
 
    font-size: 20px; 
 
    } 
 
    section.module.parallax h1 { 
 
    font-size: 96px; 
 
    } 
 
} 
 
@media all and (min-width: 960px) { 
 
    section.module.parallax h1 { 
 
    font-size: 160px; 
 
    } 
 
}

<section class="module parallax parallax-1"> 
 
    <div class="container"> 
 
    <h1>Serene</h1> 
 
    </div> 
 
</section> 
 

 
<section class="module content"> 
 
    <div class="container"> 
 
    <h2>Lorem Ipsum Dolor</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
 
    </div> 
 
</section> 
 

 
<section class="module parallax parallax-2"> 
 
    <div class="container"> 
 
    <h1>Rise</h1> 
 
    </div> 
 
</section> 
 

 
<section class="module content"> 
 
    <div class="container"> 
 
    <h2>Lorem Ipsum Dolor</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
 
    </div> 
 
</section> 
 

 
<section class="module parallax parallax-3"> 
 
    <div class="container"> 
 
    <h1>Calm</h1> 
 
    </div> 
 
</section> 
 

 
<section class="module content"> 
 
    <div class="container"> 
 
    <h2>Lorem Ipsum Dolor</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
 
    </div> 
 
</section>