npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fullpage

v1.5.1

Published

A light JavaScript framework to build fullpage site in a simple way, write with pure JavaScript.

Downloads

119

Readme

fullpage

Build Status GitHub issues GitHub license

一个轻巧的fullpage框架,不依赖其他任何库,gzip 后不到1kb。 轻松创建炫酷的单页滑动网站。

一个简单的DEMO

功能

  • 触摸/键盘/鼠标滚轮控制
  • 垂直/水平翻页

兼容性

| Android 4.1+ | Safari 7.1+ | IE 11 | Opera | Chrome | firefox | | ------------ | ----------- | ----- | ----- | ------ | ------- |

使用方法

通过 npm 下载 fullpage 文件

npm install fullpage
  • 引入位于 build 目录下的 fullpage.min.js(或 fullpage.js 做为开发环境)
  • 引入 css 文件 fullpage.css
  • 按照下面格式书写html代码(其中 id 为 sectionContent 的为包裹层,你可以自定义修改其id)
<head>
  <link rel='stylesheet' href='fullpage.css'>
  <script src='fullpage.min.js'></script>
</head>
<body>
<div class="fp-wrap">
  <div id="sectionContent" class="fp-section-content">
    <div class="fp-section">
      <div class="fp-slide-wrap">
        <div class="fp-slide">1</div>
        <div class="fp-slide">2</div>
        <div class="fp-slide">3</div>
      </div>
      </div>
    <div class="fp-section">2</div>
    <div class="fp-section">3</div>
  </div>
</div>
</body>

初始化

简单使用,只要在页面加载完成后执行:

    fullpage.init('#sectionContent');

如果需要定制化,则需要如下方法:

    fullpage.init('#sectionContent',{
        threshold: 10,              // 触发滚动事件的阈值,越小越灵敏
        pageSpeed: 600,             // 滚屏速度,单位为毫秒 ms
        autoScroll: 0,              // 自动播放时间间隔,如果为 0 则不自动播放,单位 ms
        loopSection: true,          // Section循环滚动
        loopSlide: true,            // Slide循环滑动
        afterLoad: null,            // 页面载入事件,具体查看下面的 afterLoad 函数
        beforeLeave: null,          // 页面离开事件,具体查看下面的 beforeLeave 函数
        afterSlideLoad: null,       // slide 载入事件
        beforeSlideLeave: null      // slide 离开事件
    });

beforeLeave(leaveIndex,nowIndex)

离开当前页面时触发的事件,函数中 this 指向当前页面的 section,leaveIndex为要离开页面的 indexnowIndex 为要载入页面的 Index

afterLoad(afterIndex)

载入下一张页面后触发的事件,函数中 this 指向将要载入页面的 section, afterIndex 为要载入页面的 index

beforeSlideLeave(pageIndex, slideNow, slideAfter)

离开当前 Slide 时触发的事件,pageIndex当前sectionindexslideNow当前slideindexslideAfter是要载入slideindex

afterSlideLoad(pageIndex, slideIndex)

载入下一个slide后触发的事件,pageIndex当前sectionindexslideIndex是要载入slideindex

    fullpage.init('#sectionContent', {
      beforeLeave: function (leaveIndex, nowIndex) {        // 如果现在在第1个页面,向下滚动后
        if (nowIndex === 2) {                               // leaveIndex = 1,nowIndex = 2
          console.log('You will leave page 2')              // 这条语句会执行
        }
        console.log(this, leaveIndex, nowIndex)             // 这里的 this 指向将要离开的页面元素,即第一个页面
      },
      afterLoad: function (afterIndex) {                    // afterIndex = 2
        if (afterIndex === 2) {                             
          console.log('You will go to page 2')              // 这条语句会执行
        } 
        console.log(this, afterIndex)                       // 此处 this 指向当前载入的页面,即第二个页面
      },
      beforeSlideLeave: function (pageIndex, slideNow, slideAfter) {
        var _this = this;
        console.log(_this, 'beforeSlideLeave:', pageIndex, slideNow, slideAfter);
      },
      afterSlideLoad: function (pageIndex, slideIndex) {
        var _this = this;
        console.log(_this, 'afterSlideLoad:', pageIndex, slideIndex);
      }
    });

方法

init(el,options)

页面初始化,el为最外包裹层选择器,options是要定制的参数。具体同初始化

moveTo(index,slideIndex)

滚动到指定页面,index 为必选参数,slideIndex为可选参数

    fullpage.moveTo(1)      // 滚动到第一个页面
    fullpage.moveTo(3,2)    // 滚动到第三个页面的第二个slider

moveToNext(callback)

垂直滚动到下一个页面,callback为回掉函数,可选。

    fullpage.moveToNext();            // 滚动到下一个页面
    fullpage.moveToNext(callback)     // 滚动到下一个页面后,执行 callback
    fullpage.moveToNext(callback,params...)   // 滚动到下一个页面后,执行 callback,params为callback的参数,根据情况传入
    function foo(a,b){
        console.log(a,b)
    }
    fullpage.moveToNext(foo,1,2)              // 滚动到下一个页面,并输出 1,2

moveToPre(callback)

垂直滚动到上一个页面,用法同 moveToNext(callback)

slideToNext()

水平滚动到下一个页面(页面向左滚动)

slideToPre()

水平滚动到上一个页面(页面向右滚动)

LICENSE

The MIT License (MIT) Copyright (c) 2015-2016 抹桥

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.