使用skrollr.js实现简单的滚动视差网站

前言

最近使用滚动视差建设广告页面成为了潮流。那么也让我紧跟这潮流fashion一下吧😄。
简单的放一下我的Demo和Github
Demo地址:http://parallaxdemo.kajie88.com/
github地址:https://github.com/kajiecy/myParallaxSite
skrollr.js作者的GitHub: https://github.com/Prinzhorn/skrollr

正文

废话不多说 直接切入正题吧,本片随笔使用skrollr.js来实现视差滚动。在决定选择使用它之前我也进行大量筛选与学习。最终根据文档的详细程度,语法的难易度等的对比选择使用skrollr.js了。

如何使用

首先 我们需要引入.js 文件 并对 skrollr对象进行初始化

<script type="text/javascript" src="../dist/skrollr.min.js"></script>
<script type="text/javascript">
    var s = skrollr.init();
</script>

一旦我们初始化成功 在html标签上会多出两个类 "skrollr skrollr-desktop"

基础语法

基础滚动

skrollr的使用是非常简单的这归功于作者的js实力
如果我们想让页面中的某个元素在滚动中 执行一些特效 我们只需要在div 上添加
data- 属性即可;
例:

    <div 
       data-0="background-color:rgb(0,0,255);" 
       data-500="background-color:rgb(255,0,0);"
       >测试文字</div>

其中:
data-0 滚动0时的样式
data-500 滚动500时的样式
实例:http://prinzhorn.github.io/skrollr/examples/docu/1.html

有了这两个样式:skrollr就会自动处理从0滚动到500的央视过渡,类似与CSS中的transtions属性;

过渡动画的抉择

更为强大的是:我们可以根据样式名后加特效名来指定过渡特效。
data-0="background-color[linear]:rgb(0,0,255);"
过渡特效在源码中存在一下集中类型分别是:

  • begin
  • end
  • linear
  • quadratic
  • cubic
  • swing
  • sqrt
  • outCubic
  • bounce
var easings = {
        begin: function() {
            return 0;
        },
        end: function() {
            return 1;
        },
        linear: function(p) {
            return p;
        },
        quadratic: function(p) {
            return p * p;
        },
        cubic: function(p) {
            return p * p * p;
        },
        swing: function(p) {
            return (-Math.cos(p * Math.PI) / 2) + 0.5;
        },
        sqrt: function(p) {
            return Math.sqrt(p);
        },
        outCubic: function(p) {
            return (Math.pow((p - 1), 3) + 1);
        },
        //see https://www.desmos.com/calculator/tbr20s8vd2 for how I did this
        bounce: function(p) {
            var a;

            if(p <= 0.5083) {
                a = 3;
            } else if(p <= 0.8489) {
                a = 9;
            } else if(p <= 0.96208) {
                a = 27;
            } else if(p <= 0.99981) {
                a = 91;
            } else {
                return 1;
            }

            return 1 - Math.abs(3 * Math.cos(p * a * 1.028) / a);
        }
    };

转换的方式我就不解释了直接丢个源码自己看吧😏
当然您要是感觉这些动画太low。您也可以通过初始化实力时自定义过渡动画

skrollr.init({
        easing: {
            sin: function(p) {
                return (Math.sin(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
            },
            cos: function(p) {
                return (Math.cos(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
            },
        }
    });

动画的禁用

我们可以使用 在样式前加!的方式来禁用动画了
如:

<div  data-0="background-image:!url(kitten1.jpg);" data-100="background-image:!url(kitten2.jpg)">
</div>

相对滚动模式

滚动特效除了指定滚动固定的px之外,还有相对模式的概念,
相对模式即为相对与某个锚点进行特效的变化
语法为:

  --选择的元素
  data-anchor-target="#bacons" 
  --目标元素 顶部 在可视范围 底部 时的样式
  data-bottom-top="transform: translate3d(0px, -80%, 0px);" 
  --目标元素 底部 在可视范围 顶部 时的样式
  data-top-bottom="transform: translate3d(0px, 80%, 0px);"

具体还有更多的类型作者也给出了图片说明:


滚动模式图解

以上就是 skrollr的最基本概念了,如果想了解更多请查阅作者文档。
现在我们就可以实现一个简单的滚动视差的效果了。

滚动视差的实现

实现思路

在正文区域我们先用div把想要显示图片的区域声明好。
overflow:hidden 将超出div的部分隐藏掉。


示例1.jpg
示例2.jpg

然后我们将图片放入到这个div中 top设置为-50%将图片位置调整到 div的中间。


示例3.jpg
示例4.jpg

最后 我们通过上面 提到的相对滚动 监听div#div-view的位置 来对图片进行处理


示例5.jpg
    <div class="" id="div-view" style='height: 50vh;width: 100%;background-color: #C6E746;overflow: hidden'>
        <img class="" src="images/kitteh1.jpg"
             style="position: relative;width: 100vw;height: 100vh;top: -50%" alt=""
        data-anchor-target="#div-view"
        data-bottom-top="transform:translate3d(0px, -60%, 0px)"
        data-top-bottom="transform:translate3d(0px, 60%, 0px)"
        />

动画效果为将图片的位置进行便宜就ok了。
(上传不了gif图 演示地址:http://qiniu.kajie88.com/jdfw.gif)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容