DynCSS给您的网站添加简单CSS滚动动画前端框架

问说网 · 发布于 2015-03-29 · 字数7943 · 浏览 1905 · 评论 0

DynCSS解析你的CSS-dyn-(attribute)规则。这些规则是JavaScript表达式浏览器的事件像scrollresize。结果应用到CSS属性指定为后缀。

DynCSS给您的网站添加简单CSS滚动动画前端框架

例如,下面的代码将.header中心垂直动态变化,margin-top你是调整大小的窗口。

.header {
   -dyn-margin-top: '(@win-height - @el-height)/2.0';
}

在这里,@win-height高度动态的高度是当前元素的@el-height(在这种情况下的.header)。本页的标题被集中在这边。

你甚至可以创建视差的影响通过使用窗口的scrollTop和动态应用的CSS变换:

.header {
    -dyn-webkit-transform:   '"translate( 0px , #{-1*@win-scrollTop}px) "';
}

因为webkit-transform是一个字符串,上面的代码创建一个动态值通过插值#{..}

DynCSS特点

你可以做任何CSS属性动态提供,它是由jQuery写.css()方法。你这样做,通过附加-dyn-前缀和指定一个引用JavaScript表达式。

您可以使用占位符来访问文档的动态信息;列表在这里您可以使用内置的占位符:

Prefixes Description
@win-foo dynamically evaluates window.foo()
@el-foo dynamically evaluates $(current-selector).css(foo)
@jq-foo dynamically evaluates $(current-selector).foo()

语法应该由任何CSS预处理器是非常。例如,我用它与这个网站lessc

自定义函数

你可以介绍自定义函数在运行时进行评估,通过将它们添加到window.dynCss.lib。例如,以下是你可以介绍一个中心函数返回当前窗口的中心:

window.dynCss.lib.center = function() {
    return {x: window.width()/2, y: window.height()/2 };
}

使用这一规则,调用它的@前缀:

-dyn-margin-left: '@center().x';

模拟属性

为了使内容更加精确的定位,下面的动态性质的position=fixed的元素被引入:

property name affects
-dyn-fixed-vertical-center top
-dyn-fixed-horizontal-center left

他们含蓄地考虑元素的阶中心横向尺寸;例如:

.element {
    position: fixed;
    -dyn-fixed-vertical-center: '@fixedVerticalCenter(".element2")';
}

将垂直对齐从.element.element2(另一个固定元件)。

响应式布局

DynCSS 允许容易地计划你的CSS的响应。你定义了一个断点列表和动态变量表(通常是窗口的大小)。你可以在你的HTML脚本<script>这样做;这里的你如何设置两个断点在481和961上的窗口的宽度变宽的@win-width

<script> 
    window.dynCss.api.setBreakpoints([481,961],'@win-width');
</script>

现在,您可以定义每个属性的行为在下面的断点;例如,我们可以动态改变字体大小:

.header__title {
  -dyn-font-size: '@selectFrom(["3em", "4em", "5em"])';
}

selectFrom 是一个内置的函数返回一个输入列表的元素以指定setBreakpoints断点。在这里,字体大小将3em under 480px, 4em under 960px, and 5em above 960px。

自定义样式

DynCSS 允许添加一类动态的所有元素的一个给定的选择器,以在运行时进行评估的条件;这是建立滚动间谍有用。您可以指定要添加的类的名称-dyn-set-state-(class-name)

.to-be-highlighted {
 -dyn-set-state-highlight: '@isVerticallyVisible("#my-section")';
}

这里,我们添加一个 .highlight的class样式到所有的元素中 .to-be-highlighted 每当函数@isVerticallyVisible 返回true的时候。我们假设isVerticallyVisible接收选择器和检查,无论是在或不在视口。

这是自定义的定义 isVerticallyVisible 但你可以在LiveScript,当然写你自己的。

isVerticallyVisible = (el, threshold) ->
 r = jQuery(el)[0].getBoundingClientRect();
 w = jQuery(window)
 vp = {}
 vp.top = w.scrollTop()
 vp.bottom = w.scrollTop() + w.height()
 if not threshold?
 threshold := w.height()/3
 value =
 | r.top >= 0 and r.top < (threshold) => true
 | r.top < 0 and r.bottom > (threshold) => true
 | otherwise => false

return value

API文档

Here are some built-in functions you can use in your -dyn-* rules:

@shouldAppear

@shouldAppear({when: expr, isHigherThan: val})
Returns a value that approaches 1.0 when expr approaches val.

0
`expr` is lower than 0

expr/val
`expr` is higher than 0 but lower than `val`

1
`expr` is higher `val`

This snippet turns up element visibility when scrolling position (@win-scrollTop) is reaching a half of the window’s height:

.header {
 -dyn-opacity: '@shouldAppear({when: @win-scrollTop, isHigherThan: @win-height/2})';
}

Use isLowerThan instead of isHigherThan to make elements appear on scroll up.

@shouldDisappear

@shouldDisappear({when: expr, isHigherThan: val})
Returns a value that approaches 0.0 when expr approaches val.

1
`expr` is lower than 0

1 – (expr/val)
`expr` is higher than 0 but lower than `val`

0
`expr` is higher `val`

This snippet turns down opacity when scrolling position (@win-scrollTop) is reaching a fourth of the window’s height:

.header {
 -dyn-opacity: '@shouldDisappear({when: @win-scrollTop, isHigherThan: @win-height/4})';
}

Use isLowerThan instead of isHigherThan to make elements disappear on scroll up.

@selectFrom

@selectFrom(array)
Returns the element of `array` associated with the currently active breakpoint (i.e., the one with the same index).

Here, we set the font size to 3em under the first breakpoint, 4em under the second, and 5em above the second.

.header__title {
 -dyn-font-size: '@selectFrom(["3em", "4em", "5em"])';
}

Breakpoints should be set in Javascript by using the appropriate setBreakpoints method:

<script> 
 window.dynCss.api.setBreakpoints([321, 480],'@win-width');
</script>

sets two breakpoints at window’s width (@win-width) equal to 320 and 480 pixels.

@transitionToOne

@transitionToOne({when: expr, start: val, end: val}, power)
Returns a value that starts at 0, when `expr` is lower than `start`, and approaches 1.0, when `expr` approaches `end`.

0
`expr` is lower than `start`

(expr/val)^power
`expr` is higher than `start` but lower than `end`

1
`expr` is higher `end`

This snippet turns down opacity when scrolling position (@win-scrollTop) is reaching 400px. The transition follows an sqrt law (power=.5)

.header {
 -dyn-opacity: '1-@transitionToOne({when : @win-scrollTop , start: 0, stop: 400 }, .5)';
}

@if

@if(condition, v1, v2)
Returns v1 if condition is true, v2 otherwise.

Here, we remove the element when scroll-top is higher than its bottom.

.element-to-be-removed {
 -dyn-display: '@if(@win-scrollTop > @jq-offset.bottom, "none", "block")';
}

@morph

@morph(factor, v1, v2)
Returns the convex combination (1-factor)*v1 + factor*v2.

factor can be the state of a transition. This snippet resizes the width of .element by using the state returned by @transitionToOne.

.element {
 -dyn-width: '@morph(transitionToOne(...), 200, 300)';
}

项目地址:http://www.vittoriozaccaria.net/dyn-css/

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2016-09-24紫色背景扁平化iPhone5手机样机素材
  • 2016-10-03Blogify简约扁平化博客主题PSD模板
  • 2016-10-21多彩好看的淘宝销售标签箭头EPS素材
  • 2016-12-26恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
  • 2017-02-17问说网站长分享提升WordPress访问速度优化
  • 2017-04-01Wordpress固定链接伪静态的设置方法
  • 2017-04-04java中的Runable和Thread
  • 2017-04-05解决mysql无法远程访问的问题
  • 发布评论

    为您推荐

    紫色背景扁平化iPhone5手机样机素材
    问说网 · 发布于 2016-09-24

    紫色背景扁平化iPhone5手机样机素材

    紫色背景扁平化iPhone5手机样机素材,扁平化样机素材免费下载分享,iPhone5手机样机PSD素材设计,扁平化手机素材投影,倾斜的手机样机素材。

    Blogify简约扁平化博客主题PSD模板

    Blogify简约扁平化博客主题PSD模板,Blogify是博客风格的完美小主题。利用Blogify是干净的,审美和简单的功能,确保你的博客有别于简约精致的休息…

    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    问说网 · 发布于 2016-10-03 · 浏览 1083 · 评论 0
    多彩好看的淘宝销售标签箭头EPS素材
    问说网 · 发布于 2016-10-21

    多彩好看的淘宝销售标签箭头EPS素材

    恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
    问说网 · 发布于 2016-12-26

    恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送

    恒创这次跨年促销,活动力度大,活动产品多。国内/香港/韩国/美国所有节点,新购/续费多重福利,满390元送小米VR眼镜。还可以免费抽奖,蓝牙耳机,小米充电宝等。

    问说网 · 发布于 2017-02-17

    问说网站长分享提升WordPress访问速度优化

    问说网创建也有5年了,最开始并不是使用的WordPress,是使用国内的DedeCMS开源程序,中间被黑客入侵了就换成了WordPress一直用到现在,随着文章…

    问说网 · 发布于 2017-04-01

    WordPress固定链接伪静态的设置方法

    今天,想着在我机器上测试一下wordpress,虽然之前也有这个开源的程序,可是一直没有安装呢,再加上最近一直忙于其他的工作,也忽略了不少,突然想建立一个属于自…

    问说网 · 发布于 2017-04-04

    java中的Runable和Thread

    在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口;Thread类是在java.lang包中定义的。一个类只要继承了T…

    问说网 · 发布于 2017-04-05

    解决mysql无法远程访问的问题

    问题描述 1.windows 2003 server 32bit+IIS+护卫神+安全狗+navicat 2.root@%已配置 3.干掉护卫神,安全狗,防火墙…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13128 文章
    493 评论
    1931 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1809

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1743

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1750

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1249

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1447

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!