Parallax Navigationsmenü langsamen Effekt

Ich erstelle eine Parallax-Webseite, meine Navigation Menüleiste funktioniert gut, aber es enthält keine Zeitlupe (wie langsam nach oben oder nach unten Seite). Kann ich das Problem irgendwie beheben? Es funktionierte für eine Weile und es verschwand einfach.Parallax Navigationsmenü langsamen Effekt

Hier ist mein Code:

#fp-nav { 
 
position: fixed; 
 
z-index: 52; 
 
top: 50%; 
 
right: 15px; 
 
padding: 0 10px 0 0; 
 
-webkit-transition: opacity .3s 0s linear; 
 
-moz-transition: opacity .3s 0s linear; 
 
-ms-transition: opacity .3s 0s linear; 
 
-o-transition: opacity .3s 0s linear; 
 
transition: opacity .3s 0s linear; 
 
transform: translatez(0); 
 
-webkit-transform: translatez(0); 
 
-webkit-backface-visibility: hidden; 
 
} 
 

 
#fp-nav ul { 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#fp-nav ul li { 
 
margin: 0; 
 
padding: 10px 0 10px 15px; 
 
cursor: pointer; 
 
} 
 

 
.color-weight-light #fp-nav ul li.active a { 
 
background-color: transparent; 
 
border: solid 2px #000; 
 
} 
 

 
.color-weight-light #fp-nav ul li a { 
 
background color: #000; 
 
} 
 

 
#fp-nav ul li.active a { 
 
width: 8px; 
 
height: 8px; 
 
margin-left: -1px; 
 
} 
 

 
#fp-nav ul li a { 
 
width: 10px; 
 
height: 10px; 
 
display: block; 
 
text-decoration: none; 
 
-webkit-border-radius: 50%; 
 
border-radius: 50%; 
 
-webkit-transition: background color .1s linear,border color .1s linear; 
 
-moz-transition: background color .1s linear,border color .1s linear; 
 
-ms-transition: background color .1s linear,border color .1s linear; 
 
-o-transition: background color .1s linear,border color .1s linear; 
 
transition: background color .1s linear,border color .1s linear; 
 
    background color: #000; 
 
} 
 

 
.color-weight-light#fp-nav ul li .nav-title { 
 
color: #000; 
 
} 
 

 
.nav-title { 
 
    position: absolute; 
 
    right: 10px; 
 
    opacity: 0; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    white-space: nowrap; 
 
    font-family: "proxima-nova"; 
 
    letter-spacing: .1em; 
 
    font-weight: 500; 
 
    font-style: normal; 
 
    text-decoration: none; 
 
    margin-top: -11px; 
 
    padding: 0 0 5px 0; 
 
    -webkit-transition: all .3s cubic-bezier(.23,1,.32,1); 
 
    -moz-transition: all .3s cubic-bezier(.23,1,.32,1); 
 
    -ms-transition: all .3s cubic-bezier(.23,1,.32,1); 
 
    -o-transition: all .3s cubic-bezier(.23,1,.32,1); 
 
    transition: all .3s cubic-bezier(.23,1,.32,1); 
 
    line-height: 32px; 
 
    visibility: hidden; 
 
} 
 

 
li:hover .nav-title { 
 
opacity:1; 
 
} 
 

 
li a{ 
 
position:relative; 
 
}

<div class="parallax-block" id="home-block-one" data-url-id="home-block-one"> 
 
    <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 
 
</div> 
 

 
<div class="parallax-block" id="home-block-two" data-url-id="home-block-two"> 
 
    <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 
 
</div> 
 

 
<div class="parallax-block" id="home-block-three" data-url-id="home-block-three"> 
 
    <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 
 
</div> 
 

 
<div class="parallax-block" id="home-block-four" data-url-id="home-block-four"> 
 
    <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 
 
</div> 
 
<script src="https://use.fontawesome.com/5a33902e83.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
// fade in #back-top 
 
\t $(function() { 
 
\t \t $(window).scroll(function() { 
 
\t \t \t if ($(this).scrollTop() > 100) { 
 
\t \t \t \t $('#back-top').fadeIn(); 
 
\t \t \t } else { 
 
\t \t \t \t $('#back-top').fadeOut(); 
 
\t \t \t } 
 
\t \t }); 
 

 
\t \t // scroll body to 0px on click 
 
\t \t $('#back-top a').click(function() { 
 
\t \t \t $('body,html').animate({ 
 
\t \t \t \t scrollTop: 0 
 
\t \t \t }, 800); 
 
\t \t \t return false; 
 
\t \t }); 
 
\t }); 
 

 
}); 
 
</script> 
 

 

 
<div id="fp-nav" style="margin-top: -46px;" class="color-weight-light"> 
 
<ul> 
 
    <li> 
 
    <a href="#top"> 
 
    <i class="fa fa-circle" aria-hidden="true"></i> 
 
    <span class="nav-title">Home</span> 
 
    </a> 
 

 
    </li> 
 
    <li> 
 
    <a href="#content"> 
 
    <i class="fa fa-circle" aria-hidden="true"></i> 
 
    <span class="nav-title">Slim Products</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#home-block-one"> 
 
    <i class="fa fa-circle" aria-hidden="true"></i> 
 
    <span class="nav-title">Blogs</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#home-block-two"> 
 
    <i class="fa fa-circle" aria-hidden="true"></i> 
 
    <span class="nav-title">Heatlh Products</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#home-block-three"> 
 
    <i class="fa fa-circle" aria-hidden="true"></i> 
 
    <span class="nav-title">Video</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#home-block-four"> 
 
    <i class="fa fa-circle" aria-hidden="true"></i> 
 
    <span class="nav-title">Skin Products</span> 
 
    </a> 
 
    </li> 
 
</ul> 
 
</div> 
 
    </div>

Quelle

2016-07-11 Hee Sun Park

Ich bin nicht 100% sicher Aber ich frage mich Wenn das ist, was Sie versuchen zu tun: http://www.jarallax.com/demo3/ – Andrew

ja ist es! Aber ich möchte diesen Effekt setzen, wenn die Leute auf die seitliche Menüleiste klicken (Kreise) –

Die Links oben sind die gleichen wie Ihr Seitenmenü. Sie müssen nur CSS verwenden, um sie zur Seite zu verschieben. – Andrew

Kredit geht an How to scroll HTML page to given anchor using jQuery or Javascript? und wer sonst mit diesem Beitrag half

https://jsfiddle.net/kblau237/nsff4wb6/

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>DDIndex</title> 
    <style> 
     #fp-nav { 
      position: fixed; 
      z-index: 52; 
      top: 50%; 
      right: 15px; 
      padding: 0 10px 0 0; 
      -webkit-transition: opacity .3s 0s linear; 
      -moz-transition: opacity .3s 0s linear; 
      -ms-transition: opacity .3s 0s linear; 
      -o-transition: opacity .3s 0s linear; 
      transition: opacity .3s 0s linear; 
      transform: translatez(0); 
      -webkit-transform: translatez(0); 
      -webkit-backface-visibility: hidden; 
     } 

      #fp-nav ul { 
       list-style: none; 
       margin: 0; 
       padding: 0; 
      } 

       #fp-nav ul li { 
        margin: 0; 
        padding: 10px 0 10px 15px; 
        cursor: pointer; 
       } 

     .color-weight-light #fp-nav ul li.active a { 
      background-color: transparent; 
      border: solid 2px #000; 
     } 

     .color-weight-light #fp-nav ul li a { 
      background color: #000; 
     } 

     #fp-nav ul li.active a { 
      width: 8px; 
      height: 8px; 
      margin-left: -1px; 
     } 

     #fp-nav ul li a { 
      width: 10px; 
      height: 10px; 
      display: block; 
      text-decoration: none; 
      -webkit-border-radius: 50%; 
      border-radius: 50%; 
      -webkit-transition: background color .1s linear,border color .1s linear; 
      -moz-transition: background color .1s linear,border color .1s linear; 
      -ms-transition: background color .1s linear,border color .1s linear; 
      -o-transition: background color .1s linear,border color .1s linear; 
      transition: background color .1s linear,border color .1s linear; 
      background color: #000; 
     } 

     .color-weight-light#fp-nav ul li .nav-title { 
      color: #000; 
     } 

     .nav-title { 
      position: absolute; 
      right: 10px; 
      opacity: 0; 
      font-size: 13px; 
      text-transform: uppercase; 
      white-space: nowrap; 
      font-family: "proxima-nova"; 
      letter-spacing: .1em; 
      font-weight: 500; 
      font-style: normal; 
      text-decoration: none; 
      margin-top: -11px; 
      padding: 0 0 5px 0; 
      -webkit-transition: all .3s cubic-bezier(.23,1,.32,1); 
      -moz-transition: all .3s cubic-bezier(.23,1,.32,1); 
      -ms-transition: all .3s cubic-bezier(.23,1,.32,1); 
      -o-transition: all .3s cubic-bezier(.23,1,.32,1); 
      transition: all .3s cubic-bezier(.23,1,.32,1); 
      line-height: 32px; 
      /*took out hidden*/ 
      /*visibility: hidden;*/ 
     } 

     li:hover .nav-title { 
      opacity: 1; 
     } 

     li a { 
      position: relative; 
     } 

     /*added*/ 
     .parallax-block { 
      min-height: 400px; 
      background: transparent; 
      width: 70%; 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/jquery.parallax.js"></script> 
</head> 
<body> 
    <div class="parallax-block" id="top" data-url-id="top"> 
     <p>HomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHomeHome</p> 
     <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 
    </div> 
    <div class="parallax-block" id="content" data-url-id="content"> 
     <p>Slim ProductsSlim ProductsSlim ProductsSlim ProductsSlim ProductsSlim ProductsSlim Products</p> 
     <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 

    </div> 
    <div class="parallax-block" id="home-block-one" data-url-id="home-block-one"> 
     <p>BlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogsBlogs</p> 
     <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 

    </div> 

    <div class="parallax-block" id="home-block-two" data-url-id="home-block-two"> 
     <p>Heatlh ProductsHeatlh ProductsHeatlh ProductsHeatlh ProductsHeatlh ProductsHeatlh Products</p> 
     <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 

    </div> 

    <div class="parallax-block" id="home-block-three" data-url-id="home-block-three"> 
     <p>VideoVideoVideoVideoVideoVideoVideoVideoVideoVideoVideoVideoVideoVideoVideoVideoVideo</p> 
     <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 

    </div> 

    <div class="parallax-block" id="home-block-four" data-url-id="home-block-four"> 
     <p>Skin ProductsSkin ProductsSkin ProductsSkin ProductsSkin ProductsSkin ProductsSkin Products</p> 
     <p>La enfrente baterias director en amarillo mezquino no. Haber con nadie julio apago iba han armas oro. Se me al hombre delito mareos. Suya paro celo no sepa si seda masa. Del aborrecia ese impresion restantes etc vestibulo servicios. Fue molestarle mia actualidad los misteriosa pre. Testigos oro mediante eso amarillo facundia conviene. Volverse una victimas tio reaccion dictador paz cuestion. Impregnado rio dos secretario tan dio satisfecha. </p> 
    </div> 
    <script src="https://use.fontawesome.com/5a33902e83.js"></script> 

    <script> 
     $(document).ready(function() { 

      $("#fp-nav a").click(function (e) { 
       var href = $(this).attr('href'); 

       $('html, body').animate({ 
        'scrollTop': $(href).offset().top 
       }, 800); 

       return false; 
      }); 
     }); 

    </script> 

    <div id="fp-nav" style="margin-top: -46px;" class="color-weight-light"> 
     <ul> 
      <li> 
       <a href="#top"> 
        <i class="fa fa-circle" aria-hidden="true"></i> 
        <span class="nav-title">Home</span> 
       </a> 

      </li> 
      <li> 
       <a href="#content"> 
        <i class="fa fa-circle" aria-hidden="true"></i> 
        <span class="nav-title">Slim Products</span> 
       </a> 
      </li> 
      <li> 
       <a href="#home-block-one"> 
        <i class="fa fa-circle" aria-hidden="true"></i> 
        <span class="nav-title">Blogs</span> 
       </a> 
      </li> 
      <li> 
       <a href="#home-block-two"> 
        <i class="fa fa-circle" aria-hidden="true"></i> 
        <span class="nav-title">Heatlh Products</span> 
       </a> 
      </li> 
      <li> 
       <a href="#home-block-three"> 
        <i class="fa fa-circle" aria-hidden="true"></i> 
        <span class="nav-title">Video</span> 
       </a> 
      </li> 
      <li> 
       <a href="#home-block-four"> 
        <i class="fa fa-circle" aria-hidden="true"></i> 
        <span class="nav-title">Skin Products</span> 
       </a> 
      </li> 
     </ul> 
    </div> 

</body> 
</html>

Quelle

2016-07-11 20:46:13 kblau

Parallax Navigationsmenü langsamen Effekt

Antwort

Verwandte Themen