Вот мой HTML:
<div id="intro-image">
<div id="intro-text">
<p class="intro-head">COLIN STEWART</p>
<p class="intro-body">logos - branding - web</p>
<a href="#work-anchor" class="smoothScroll"><div id="portfolio-button">PORTFOLIO</div></a>
</div>
<a href="#about-anchor" class="smoothScroll"><img src="images/arrow.png" id="arrow" class="animated bounce"></a>
</div>
CSS:
#intro-image {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/desk.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: repeat;
}
#intro-text {
width: 1200px;
max-width: 85%;
margin: 0 auto;
position: relative;
top: 55%;
transform: translateY(-50%);
}
.intro-head {
font-family: 'Montserrat', sans-serif;
font-size: 65px;
color: #fff;
font-weight: 700;
text-align: center;
margin: 0;
letter-spacing: 3px;
}
.intro-body {
font-family: 'Open Sans', sans-serif;
font-size: 24px;
color: #fff;
font-weight: 300;
text-align: center;
margin: 0;
letter-spacing: 0.5;
}
#portfolio-button {
margin: 50px auto 0 auto;
padding-top: 18px;
width: 185px;
height: 38px;
background-color: #ef3c5f;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: #fff;
font-weight: 400;
text-align: center;
letter-spacing: 2px;
transition: 0.6s;
transform-style: preserve-3d;
}
#portfolio-button:hover {
/*box-sizing: border-box;
border-bottom: 5px solid #c42c50;*/
transform: rotateX(360deg);
cursor: pointer;
}
Javascript:
/* Smooth Scroll */
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
/* Background Image Scroll Speed */
$(document).ready(function(){
var $win = $(window);
$('#intro-image').each(function(){
var scroll_speed = 2;
var $this = $(this);
$(window).scroll(function() {
var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
var bgPosition = 'center '+ bgScroll + 'px';
$this.css({ backgroundPosition: bgPosition });
});
});
});
Теперь я просто хочу, чтобы текст (# intro-text div) прокручивался медленнее. Как я могу достичь этого (как можно проще)?
Для записи я уже не знаю javascript / jQuery, я достигаю того, что до сих пор поддерживал добрые народы.
Заранее спасибо.
javascript,jquery,css,text,scroll,