仅在网站中到达该部分时显示效果

Question

我有一个使用d3.js制作的图表：

图表代码

我已将此图表放在网站中。

网站

问题是在上述网站中，当您滚动浏览页面到“ teamchart”部分时，我看不到图表的效果。 刷新页面时，您可以看到图表角色的效果。

我希望图表发挥作用并显示效果，当我到达页面的该部分或使用导航栏时，单击“ teamchart”并到达该部分。

我使用了以下JavaScript代码，但是它会不断重复：

 $(document).scroll(function() { //Basically your position in the page var x = $(this).scrollTop(); //How far down (in pixels) you want the user to be when the effect to starts, eg. 500 var y = 500; if (x > y) { //Put your effect functions in here. } }); 

与网站有关的小提琴：

我与网站有关的代码 （此处为实验）

Answer 1

据我了解，您的问题是动画不断播放的部分。

这是因为每次滚动页面到大于500的值时，您实际上都在重复代码。

简单的解决方案：放置一个标志以表示“ alreadyAnimated”

var g_pieChartAnimated=false;

$(document).scroll(function() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (!g_pieChartAnimated && (x > y)) {
      g_pieChartAnimated = true;
      //Put your effect functions in here.
  }
});

第二种解决方案（速度更快）：
是在事件处理程序完成您想要的操作后将其分离。

function onScroll_AnimateChart() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (!g_pieChartAnimated && (x > y)) {
      $(document).off('scroll', onScroll_AnimateChart); // remove myself from the event handlers, so it won't be called again.
      //Put your effect functions in here.
  }
}

$(document).on('scroll', onScroll_AnimateChart);

Answer 2

编辑我错过了您说动画重复的地方-@Tomer W解决方案是正确的。

与@Tomer W发布的内容类似，但是在您的scroll handler运行chart函数（或chart触发动画的任何函数）：

var chartInit = false;
var handler = function() {
  var y = 500;
  var x = $(this).scrollTop();
  if (x > y && !charInit) {
   charInit = true;
   someD3ChartStuff();
  }
};

$(document).scroll(handler);

Answer 3

对于您的问题，我有以下两种解决方案，希望对您有所帮助！

1-纯CSS + jQuery解决方案

$(window).on('scroll' , function(){
    scroll_pos = $(window).scrollTop() + $(window).height();
    element_pos = $(".chart-wrapper").offset().top + $(".chart-wrapper").height() ;
    if (scroll_pos > element_pos) {
        $(".chart-wrapper").addClass('animation');
    };
})

然后在类animation中操纵您的animation

2-Wow.JS库

1-在这里下载脚本
2-在此处下载animate.css
3-以该代码段为例，了解其工作原理

<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="css/animate.css">
<script>
new WOW().init();
</script>


<div class="wow bounceInLeft animated">
              <h2>animated heading</h2>
</div>

Obs .:这个库+ animate.css可以使用很多动画，只需使用下面的任何类，并让类wow

这是清单

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp