Question

我想创建一个滚动效果，当我向下滚动到某个点时，图像从左侧滑入。但是现在我发现javascript部分无法正常工作。我试图在循环中输入“alert”，但它也没有反馈。这是javascript：

var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
console.log("top = "+ window_top_position, "bottom = "+ window_bottom_position);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
alert("dd");
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
 (element_top_position <= window_top_position)) {
  $element.addClass('in-view');

} 
  //else {
  //$element.removeClass('in-view');
//}
});
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

这是html中的一张幻灯片：

                <div class="left">
                  <img src="img/bcg_slide-1.png" />
                </div>

                <div class="right">
                  <h3>Johnathon Richard Smith</h3>
                  <h4>CEO / Manager - Auto Incorporated</h4>
                </div>

              </div>
              <div class="content"><i class="fa fa-quote-left"></i> When I started using their service I was skeptical. They promised me a 300% return on my initial investment. However they came through on their word and now my business is flourishing.. 
              </div>
            </div>

这是相应的css .animation-element { 不透明度：0; 位置：相对; } / 动画元素向左滑动 /

 .animation-element.slide-left {
   opacity: 0.5;
  -moz-transition: all 500ms linear;
 -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-500px, 0px, 0px);
  -webkit-transform: translate3d(-500px, 0px, 0px);
  -o-transform: translate(-500px, 0px);
  -ms-transform: translate(-500px, 0px);
  transform: translate3d(-500px, 0px, 0px);
  }

  .animation-element.in-view {
   opacity: 1;
   -moz-transform: translate3d(0px, 0px, 0px);
   -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  }
   /*animation slide left styled for testimonials*/

 .animation-element.slide-left.testimonial {
  float: left;
  width: 47%;
  margin: 0% 1.5% 3% 1.5%;
  background: #F5F5F5;
  padding: 15px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
   }

对象出现在某些点滚动

0 个答案: