jquery svg_如何使用jQuery和SVG构建页面滚动进度指示器

最新推荐文章于 2023-11-07 14:28:31 发布

daique1908

最新推荐文章于 2023-11-07 14:28:31 发布

阅读量383

点赞数

文章标签： css js html java python ViewUI

jquery svg

今天，我们将研究一些技巧，这些技巧可用于显示正在阅读页面的用户的滚动进度。出于充分的原因，这种技术正在越来越多的站点上使用。它提供了对使用特定页面所需投资的上下文了解。当用户滚动时，会以不同格式向他们展示当前的进度。

今天，我们将介绍两种可用于显示滚动进度的特定技术，并为您提供创建自己的工具集。让我们开始吧！

设定文件

首先，我们将建立一个模拟文档，该文档将用作我们的帖子页面。我们将使用normalize.css和jQuery以及Google字体。空HTML文件应如下所示：

<!doctype html>
<html>
    <head>
        <title>Progress Indicator Animation</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- fake post content goes here -->
        <script src="js/jquery.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

接下来，我们将添加伪造的帖子内容：

<main>
    <article>
        <header>
            <h1>
                <div class="container">
                    How Should We Show Progress While Scrolling a Post?
                </div>
            </h1>
        </header>
        <div class="article-content">
                <h2 class="lead-in">
                    <div class="container">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </div>
                </h2>
            <div class="container">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                <!-- add your own additional lorem here -->
            </div>
        </div>
    </article>
    <footer>
        <h3 class="read-next"><small>Read Next:</small><br>How do I Implement a Foobar?</h3>
    </footer>
</main>

这为我们提供了足够的内容来测试我们的滚动行为。

基本样式

我们将使用一些基本的样式来使我们的帖子更具吸引力。

@import url(http://fonts.googleapis.com/css?family=Domine:400,700);
body {
    font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Domine", sans-serif;
}

h1 {
    font-size: 3.5em;
}

.lead-in {
    color: #fff;
    font-weight: 400;
    padding: 60px 0;
    background-color: #0082FF;
}

article header {
    border-top: 3px solid #777;
    padding: 80px 0;
}

.article-content {
    font-size: 1em;
    font-weight: 100;
    line-height: 2.4em;
}

p {
    margin: 4em 0;
}

.container {
    width: 700px;
    margin: 0 auto;
}


footer {
    text-align: center;
    background-color: #666;
    color: #fff;
    padding: 40px 0;
    margin-top: 60px;
}

.read-next {
    font-size: 2em;
}

滚动位置计算

要计算滚动位置，我们需要从概念上了解我们正在跟踪的内容。由于JavaScript只能跟踪顶部滚动值，因此我们需要将滚动值从0（顶部，未滚动）跟踪到最终滚动值。最终的滚动值将等于文档的总长度减去窗口本身的高度（因为文档将滚动直到文档的底部到达窗口的底部）。

我们将使用以下JavaScript计算此滚动位置。

(function(){
    var $w = $(window);
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
    });

}());

上面的代码设置了窗口的高度和主体的高度，并且当用户滚动时，它使用这些值来设置perc变量（百分数的缩写）。我们还利用Math.min和Math.max将值限制为0-100范围。

通过此百分比计算，我们可以驱动进度指示器。

圆圈指示器

我们将创建的第一个指标是SVG圆圈。我们将利用SVG stroke-dasharray和stroke-dashoffset属性来显示进度。首先，让我们将进度指示器添加到文档中。

<div class="progress-indicator">
    <svg>
        <g>
            <circle cx="0" cy="0" r="20" class="animated-circle" transform="translate(50,50) rotate(-90)"  />
        </g>
        <g>
            <circle cx="0" cy="0" r="38" transform="translate(50,50)"  />
        </g>
    </svg>
    <div class="progress-count"></div>
</div>

此标记为我们在SVG中提供了两个圆圈，以及一个包含div的数字以显示我们的百分比计数。我们还需要向这些元素添加样式，然后我们将解释这些圆圈的位置和动画设置。

.progress-indicator {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
}
.progress-count {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100px;
    color: #0082FF;
}

svg {
    position: absolute;
}
circle {
    fill: rgba(255,255,255,0.9);
}

svg .animated-circle {
    fill: transparent;
    stroke-width: 40px;
    stroke: #0A74DA;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
}

这些样式使我们可以设置圈子元素的动画。我们的进度应该总是可见的，因此我们使用定位和大小调整规则将位置固定在.progress-indicator类上。我们还将进度计数设置为在此div内垂直和水平居中。

通过对SVG元素本身进行变换，将圆放置在中心。我们使用变换开始我们的圆心。我们在这里使用一种技术，该技术允许我们从圆心应用旋转，以便在圆心（而不是圆心）的顶部开始动画。在SVG中，变换是从元素的左上方开始应用的。这就是为什么我们必须将圆以0, 0为中心，并使用translate(50, 50)将圆的中心移至SVG本身的中心。

使用stroke-dasharray和stroke-dashoffset

属性stroke-dasharray和stroke-dashoffset允许我们对SVG的笔触进行动画处理。 stroke-dasharray定义了stroke-dasharray的可见部分。 stroke-dashoffset移动stroke-dashoffset的开始。这些属性的组合使我们能够创建笔画“关键帧”过程。

在Scroll上更新stroke-dasharray

接下来，我们将使用前面显示的百分比进度添加一个函数来更新滚动中的笔触-dasharray。

(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    });

    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");
    }

}());

与我们的圆匹配的偏移量恰好约为126。需要注意的是，该偏移量不适用于所有圆，因为126大约是半径为20的圆的圆周。要计算给定的笔划偏移量圆，多以2PI为半径。在我们的情况下，确切的偏移量将为20 * 2PI = 125.66370614359172 。

水平进度变化

对于下一个示例，我们将在窗口顶部固定一个简单的水平条。为此，我们将使用一个空的进度指示器div。

<div class="progress-indicator-2"></div>

注意：我们添加了“ -2”，使我们可以将此示例包含在同一CSS文件中。

接下来，我们将为该元素添加样式。

.progress-indicator-2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background-color: #0A74DA;
}

最后，我们将在滚动条上设置进度条的宽度。

var $prog2 = $('.progress-indicator-2');
function updateProgress(perc){
    $prog2.css({width : perc*100 + '%'});
}

总之，我们的最终JavaScript应该如下所示：

(function(){
    var $w = $(window);
    var $circ = $('.animated-circle');
    var $progCount = $('.progress-count');
    var $prog2 = $('.progress-indicator-2');
    var wh = $w.height();
    var h = $('body').height();
    var sHeight = h - wh;
    $w.on('scroll', function(){
        var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        updateProgress(perc);
    });

    function updateProgress(perc){
        var circle_offset = 126 * perc;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
        $progCount.html(Math.round(perc * 100) + "%");

        $prog2.css({width : perc*100 + '%'});
    }

}());

进度条的其他想法

本文旨在为您提供设计自己的滚动进度解决方案的工具和灵感。进度条的其他想法可能包括对进度指示本身使用更具描述性或人性化的术语，例如“中途进站”或“刚刚入门”。一些实现（例如前面显示的ia.net示例）使用对文章阅读时间的估算。可以使用类似于以下内容的代码来估算：

var wordsPerMin = 300; // based on this article: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/
var wordsArray = $(".article-content").text().split(" ");
var wordCount = wordsArray.length;
var minCount = Math.round(wordCount / wordsPerMin);

然后，您可以将minCount与我们正在滚动更新的perc变量结合使用，以向读者显示他们剩余的阅读文章时间。这是此概念的非常基本的实现。

function updateProgress(perc){
    var minutesCompleted = Math.round(perc * minCount);
    var remaining = minCount - minutesCompleted;
    if (remaining){
        $(".progress-indicator").show().html(remaining + " minutes remaining");
    } else {
        $(".progress-indicator").hide();
    }
}

最后一件：自适应屏幕调整

为了确保进度指示器能够正常工作，我们应该确保数学在正确的时间计算正确的事物。为此，我们需要确保在用户调整窗口大小时重新计算高度并更新进度指示器。这是对JavaScript的一种修改，以实现这一目标：

(function(){
    var $w = $(window);
	var $circ = $('.animated-circle');
	var $progCount = $('.progress-count');
	var $prog2 = $('.progress-indicator-2');

	var wh, h, sHeight;

	function setSizes(){
		wh = $w.height();
		h = $('body').height();
		sHeight = h - wh;
	}

	setSizes();

	$w.on('scroll', function(){
		var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
		updateProgress(perc);
	}).on('resize', function(){
		setSizes();
		$w.trigger('scroll');
	});

	function updateProgress(perc){
		var circle_offset = 126 * perc;
		$circ.css({
			"stroke-dashoffset" : 126 - circle_offset
		});
		$progCount.html(Math.round(perc * 100) + "%");

		$prog2.css({width : perc*100 + '%'});
	}

}());

这段代码声明了一个函数，该函数设置我们需要在任何给定屏幕尺寸下计算进度的变量，并在调整大小时调用该函数。我们还重新触发滚动窗口调整大小，以便执行我们的updateProgress函数。

您已经到了尽头！

奠定了多种变体的基础之后，您能提出什么？您看到了哪些进度指示器可以起作用？不利于可用性的指标又如何呢？在评论中与我们分享您的经验！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-page-scroll-progress-indicator-with-jquery-and-svg--cms-20881

jquery svg

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery svg_如何使用jQuery和SVG构建页面滚动进度指示器

今天，我们将研究一些技巧，这些技巧可用于显示正在阅读页面的用户的滚动进度。出于充分的原因，这种技术正在越来越多的站点上使用。它提供了对使用特定页面所需投资的上下文了解。当用户滚动时，会以不同格式向他们展示当前的进度。今天，我们将介绍两种可用于显示滚动进度的特定技术，并为您提供创建自己的工具集。让我们开始吧！设定文件首先，我们将建立一个模拟文档，该文档将用作我们的帖子页面。...
复制链接

扫一扫