Javascript的滚动大小调整ID与最小值首先应用

Javascript on scroll resize ID with a minimum value applied first

本文关键字：最小值 应用 ID 调整 滚动 Javascript      更新时间：2023-09-26

我有一个元素，当我向下滚动时，我将元素的X值向上缩放，这完全没问题。

问题是，虽然默认情况下SCALE是0，所以一旦它被应用，当我想从1开始时，它从0开始。

我已经设置了一个滚动最大位置为200px和最大规模2.0的CSS与一个重要的标签，这似乎工作。

如果有人能帮助解决这个问题，你的努力将会非常有帮助。

function parallaxy()
{
offset2 = +(scrollVal * 0.009);
layer2.style.webkitTransform = "scale(" + offset2 + ")";
layer2.style.MozTransform = "scale(" + offset2 + ")";
layer2.style.msTransform = "scale(" + offset2 + ")";
layer2.style.OTransform = "scale(" + offset2 + ")";
layer2.style.transform = "scale(" + offset2 + ")";  
}


var body = document.body;
var container = document.getElementById("parallax");
var isTouchscreen;
var scrollVal = 1;
var offset2;
var maxoffset = 10;
var layer2 = document.getElementById("layer-2");
function setup() {
  /*var platform = navigator.platform.toLowerCase();
  var userAgent = navigator.userAgent.toLowerCase();
	
  if ( platform.indexOf('ipad') != -1  ||  platform.indexOf('iphone') != -1 ) 
  { 
  	isTouchscreen = 1; 
  	container.setAttribute("class", "touch");
  	body.style.backgroundImage = 'none';
  }
  else if (platform.indexOf('win32') != -1 || platform.indexOf('linux') != -1)
  {
  	isTouchscreen = 0;
  					
  	if ($.browser.webkit)
  	{
  		$.srSmoothscroll();
  	}
  }
	
  else
  {
  	isTouchscreen = 0;
  }*/
}
function parallaxy() {
  //var elem = document.getElementById("layer1");
  //elem.style.transform = "10px";
//console.log(scrollVal);
  offset2 = +(scrollVal * 0.01);
 if (offset2 > maxoffset) {
    offset2 = maxoffset;
  } else {
    offset2 = +(scrollVal * 0.01);
  }
  layer2.style.webkitTransform = "scale(" + offset2 + ")";
  layer2.style.MozTransform = "scale(" + offset2 + ")";
  layer2.style.msTransform = "scale(" + offset2 + ")";
  layer2.style.OTransform = "scale(" + offset2 + ")";
  layer2.style.transform = "scale(" + offset2 + ")";
  //console.log(offset2);
}
function scrollHandler(e) {
  scrollVal = Math.max(window.pageYOffset, 0)+100;
  console.log(offset2);
  /* UNCOMMENT THESE LINES TO ABORT PARALLAX STUFF */
  /*
  	isTouchscreen = 1;
  	container.setAttribute("class", "touch");
  	body.style.backgroundImage = 'none';
  */
  if (isTouchscreen != 1) {
    parallaxy();
  }
}
body.onload = setup();
document.addEventListener('scroll', scrollHandler, false);
#container .container {
  z-index: 999;
  position: relative;
}
#parallax {
  position: relative;
  z-index: 10;
  top: 50px !important;
  width: 100%;
  height: 1080px;
  overflow: hidden;
}
.parallax_layer {
  width: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#container.touch .parallax_layer {
  position: absolute;
}
#layer-2 {
  z-index: 999;
  width: 100%;
  height: 1080px;
  position: absolute;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#layer-2 {
  background: url("http://www.staples.co.uk/content/images/product/GenesisExtraLarge/45/56/asset.1714556.jpg") transparent center top no-repeat;
  z-index: 1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parallax">
  <div class="parallax_layer" id="layer-2"></div>
</div>

相关文章：