Javascript 只有当我使用vivus.js到达底部时,svg动画才会开始
这是我的问题: 我有一个相当高的svg(1220px高度,在viewbox中设置) 如下所示:Javascript 只有当我使用vivus.js到达底部时,svg动画才会开始,javascript,jquery,css,svg,vivus,Javascript,Jquery,Css,Svg,Vivus,这是我的问题: 我有一个相当高的svg(1220px高度,在viewbox中设置) 如下所示: <svg version="1.1" id="one-diagonal" viewBox="0 0 1160 1220" > <g> <style type="text/css"> .st1{fill:none;stroke:#939598;stroke-width:1;stroke-miterlimit:10;} </style> <d
<svg version="1.1" id="one-diagonal" viewBox="0 0 1160 1220" >
<g>
<style type="text/css">
.st1{fill:none;stroke:#939598;stroke-width:1;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<line id="XMLID_64489_" class="st1" x1="710" y1="1" x2="0" y2="1212.9"/>
</svg>
}))
我遇到的问题是,由于viewbox设置为1220px高度,动画仅在我到达svg底部时开始
您可以在此处看到一个实例:
我可以使用viewport查看vivus.js脚本中的代码,但是如果我到处玩的话,它就不能工作了(如果这更清楚的话?)
/**
*如果页面视口中有元素,则回复
*
*要观察的@param{object}el元素
*@param{number}h高度百分比
*@return{boolean}
*/
Vivus.prototype.isInViewport=函数(el,h){
var scrolled=this.scrollY(),
已查看=已滚动+此.getViewportH(),
elBCR=el.getBoundingClientRect(),
elHeight=elBCR高度,
elTop=滚动+elBCR.top,
elBottom=elTop+elHeight;
//如果为0,则元素一进入视口即被视为。
//如果为1,则仅当元素完全位于内部时,才会在视口中考虑该元素
//以百分比表示的值(1>=h>=0)
h=h | | 0;
返回(elTop+elHeight*h)=滚动显示;
};
/**
*文档元素的别名
*
*@type{DOMelement}
*/
Vivus.prototype.docElem=window.document.documentElement;
/**
*获取视口高度(以像素为单位)
*
*@return{integer}视口高度
*/
Vivus.prototype.getViewportH=函数(){
var client=this.docElem.clientHeight,
内部=窗内高度;
如果(客户端<内部){
返回内部;
}
否则{
返回客户;
}
};
/**
*获取页面的Y偏移量
*
*@return{integer}页Y偏移量
*/
Vivus.prototype.scrollY=函数(){
return window.pageYOffset | | this.docElem.scrollTop;
};
它都是白色的,但是如果您在底部滚动,您将看到svg出现并开始动画
当我在svg顶部的视图上滚动时,有没有办法让动画开始,比如说100像素?还是就在它出现的时候
谢谢您的帮助,我对此感到头疼,任何highlite都会令人惊讶:)“如果您需要编辑此对象,可以在onReady回调中访问它”
onReady:function(myVivus){
//然后打电话
myVivus.play(3);
}
使用firefox进行检查:)
function easeOutBounce (x) {
var base = -Math.cos(x * (0.5 * Math.PI)) + 1;
var rate = Math.pow(base,1.5);
var rateR = Math.pow(1 - x, 2);
var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
return (1- rateR) + (progress * rateR);
}
var timing,
timingProps = {
type: 'delayed',
duration: 150,
start: 'autostart',
pathTimingFunction: Vivus.LINEAR,
animTimingFunction: Vivus.LINEAR
};
function timingTest (buttonEl, property, type) {
var activeSibling = buttonEl.parentNode.querySelector('button.active');
activeSibling.classList.remove('active');
buttonEl.classList.add('active');
timingProps.type = (property === 'type') ? type : timingProps.type;
timingProps.pathTimingFunction = (property === 'path') ? Vivus[type] : timingProps.pathTimingFunction;
timingProps.animTimingFunction = (property === 'anim') ? Vivus[type] : timingProps.animTimingFunction;
timing && timing.stop().destroy();
timing = new Vivus('timing-example', timingProps);
}
pola = new Vivus('one-diagonal', {type: 'delayed', duration: 50, forceRender: true, animTimingFunction: Vivus.EASE
/**
* Reply if an element is in the page viewport
*
* @param {object} el Element to observe
* @param {number} h Percentage of height
* @return {boolean}
*/
Vivus.prototype.isInViewport = function (el, h) {
var scrolled = this.scrollY(),
viewed = scrolled + this.getViewportH(),
elBCR = el.getBoundingClientRect(),
elHeight = elBCR.height,
elTop = scrolled + elBCR.top,
elBottom = elTop + elHeight;
// if 0, the element is considered in the viewport as soon as it enters.
// if 1, the element is considered in the viewport only when it's fully inside
// value in percentage (1 >= h >= 0)
h = h || 0;
return (elTop + elHeight * h) <= viewed && (elBottom) >= scrolled;
};
/**
* Alias for document element
*
* @type {DOMelement}
*/
Vivus.prototype.docElem = window.document.documentElement;
/**
* Get the viewport height in pixels
*
* @return {integer} Viewport height
*/
Vivus.prototype.getViewportH = function () {
var client = this.docElem.clientHeight,
inner = window.innerHeight;
if (client < inner) {
return inner;
}
else {
return client;
}
};
/**
* Get the page Y offset
*
* @return {integer} Page Y offset
*/
Vivus.prototype.scrollY = function () {
return window.pageYOffset || this.docElem.scrollTop;
};