【发布时间】：2019-03-12 00:51:16
【问题描述】：
我有一个小问题 我尝试在滚动时为 div 设置动画 但看起来我在某个地方犯了一个错误 一开始，当加载页面时，定位不会发生在窗口的中心，正如我所指出的那样，而是向左偏移 这是我的代码 如果有人知道或看到什么问题将不胜感激
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".image-1").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
//Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
//"-webkit-filter": "blur(" + (scroll/200) + "px)",
//filter: "blur(" + (scroll/200) + "px)"
});
});
$(document).ready(function () {
var img = $('.image-1');
$(window).scroll(function(){
if ($(window).scrollTop() > 400) {
img.fadeOut();
} else {
img.fadeIn();
}
});
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".image-2").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
//Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
//"-webkit-filter": "blur(" + (scroll/200) + "px)",
//filter: "blur(" + (scroll/200) + "px)"
});
});
$(document).ready(function () {
var img = $('.image-2');
$(window).scroll(function(){
if ($(window).scrollTop() > 1200) {
img.fadeOut();
} else {
img.fadeIn();
}
});
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".image-3").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
//Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
//"-webkit-filter": "blur(" + (scroll/200) + "px)",
//filter: "blur(" + (scroll/200) + "px)"
});
});
$(document).ready(function () {
var img = $('.image-3');
$(window).scroll(function(){
if ($(window).scrollTop() > 800) {
img.fadeOut();
} else {
img.fadeIn();
}
});
});body{
height: 6000px;
width: 80%;
}
.image-4, .image-5, .image-6, .image-7{
width: 450px;
height: 300px;
}
.image-2{
position: fixed;
top: 30%;
left: 60%;
width: 20%;
height: 25%;
}
.image-3{
position: fixed;
top: 30%;
left: 40%;
width: 20%;
height: 25%;
}
.container{
display: flex;
}
.image-1{
position: fixed;
top: 30%;
left: 50%;
width: 30%;
height: 35%;
transform: translate(-50% -50%);
-webkit-transform: translate(-50% -50%);
-moz-transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
-o-transform: translate(-50% -50%);
}
.first-block{
position: relative;
z-index: 20;
}
.second-block{
position: relative;
z-index: 15;
}
.image-4{
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div class="first-block">
<img class="image-1" src="https://image.freepik.com/free-photo/pro-photography-equipment_1426-1771.jpg" alt="">
</div>
<div class="second-block">
<img class="image-2" src="https://image.freepik.com/free-photo/smiling-young-woman-holding-flower-bouquet-hand_23-2148066878.jpg" alt="">
<img class="image-3" src="https://image.freepik.com/free-photo/portrait-cheerful-young-woman_23-2148066871.jpg" alt="">
</div>
</div>
</body>
</html>【问题讨论】：
标签： jquery animation scroll onscroll translate3d