Question

我正在设计一个网站，当我向下滚动时我想要放大图像，当这种情况发生时，当我向下滚动底部时，图像将被推到屏幕的左侧或右侧（就像图像一样当我向下滚动时将离开屏幕）。我已经完成了滚动位的放大，但我真的不知道如何滚动时向左/向右移动。任何帮助将不胜感激。谢谢。

编辑：

到目前为止，我已经完成了关于我希望能够制作图像的内容。

HTML：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
     <img src="http://www.freepngimg.com/download/plants/6-2-plants-free-download-png.png" class = "zoom">

    <script>
        $(window).on("scroll", function() {
            var s = Math.min(400, $(document).scrollTop()) + 200;
            $(".zoom").width(s).height(s);
        });
    </script>
</body>

CSS：

body{

width: 100%;
height: 1200px;
}

img {
    position: fixed;
    width: 200px;
    left: 0;
    bottom: 0;
}

Answer 1

我做了一个例子。包括这个HTML

<div class="wrapper">
<img class="image" src="https://www.mozilla.org/media/img/firefox/home/switch-
to-firefox.fb1c114dfd84.png">
</div>

CSS

body{
height:2000px;
}
.wrapper{
}
.image{
 height:150px;
 width:150px;
 position:relative;
 left:0; 
 }

和javacsript

var oldScrollTop=0;
var newScrollTop;
$(window).scroll(function(e){

if($(window).scrollTop() <=150){ // you can manage the height of viewport of image here

newScrollTop = $(window).scrollTop()
var step = newScrollTop - oldScrollTop


var imageHeight = $('.image').css('height');
var imageWidth = $('.image').css('width');
 var imageLeft = $('.image').css('left');

var NewimageHeight = parseInt($('.image').css('height')) - step;
 var NewimageWidth = parseInt($('.image').css('width')) - step;
 var NewimageLeft =  parseInt($('.image').css('left')) -step;

$('.image').css({"height":NewimageHeight ,"width":NewimageWidth,  
"left":NewimageLeft});
oldScrollTop = newScrollTop;
}
})

这是链接

https://jsfiddle.net/mustkeom/xy3dy4nL/32/

Answer 2

CSS Transition将帮助您解决这个问题：

setTimeout(resizeAfterDelay, 1500)

function resizeAfterDelay() {
  $('div').addClass('move-left')
  
  setTimeout(moveAwayAfterDelay, 1500)
}

function moveAwayAfterDelay() {
  $('div').addClass('move-away')
}

div {
  width: 100%;
  height: 250px;
  background: lightcoral;
  transition: all .5s ease-in-out;
  transition-property: width, height, transform;
  transform: translateX(0);
}

div.move-left {
  width: 20%;
  height: 100px;
}

div.move-away {
  transform: translateX(-150px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

Answer 3

如果我理解你想要完成什么，也许这会有所帮助吗？

$(window).on("scroll", function() {
  var scrollTop = $(document).scrollTop()
  var zoomAmount = Math.min(400, scrollTop) + 200

  $(".zoom").css({
    width: zoomAmount,
    height: zoomAmount,
    left: -scrollTop * 2,
  })
})

我还格式化了一些你的代码;）

请告诉我这是否是您想要实现的目标。

当我向下滚动页面时，如何放大并将图像推到屏幕外？

3 个答案: