[英]Change scrolling speed of a div
這是我的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,我通過善良的人幫助實現了我迄今為止所擁有的。
提前致謝。
與預期一樣,更改scroll_speed值工作正常。
見上文: https : //jsfiddle.net/ojsrfy1r/2/
/* Background Image Scroll Speed */
$(document).ready(function(){
var $win = $(window);
$('#intro-image').each(function(){
var scroll_speed = 0.2; // modified value
var $this = $(this);
$(window).scroll(function() {
var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
var bgPosition = 'center '+ bgScroll + 'px';
$this.css({ backgroundPosition: bgPosition });
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.