0
Я создаю веб-страницу parallax, моя панель меню навигации работает хорошо, но она не содержит замедленного движения (например, медленно вверх или вниз). В любом случае я могу исправить эту проблему? Он работал некоторое время, и он просто исчез.Меню навигации Parallax slow effect
Вот мой код:
#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>
Я не уверен на 100% но мне интересно если это то, что вы пытаетесь сделать: http://www.jarallax.com/demo3/ – Andrew
да это! Но я хочу применить этот эффект, когда люди нажимают на панель меню (кружки) –
Ссылки наверху совпадают с вашим боковым меню. вам просто нужно использовать CSS, чтобы переместить их в сторону. – Andrew