问说网 · 发表于 2015-03-29

文章13129 · 评论476

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

字数7943 · 浏览 1858 · 评论 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/

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

问说网手机版

躺着 站着 跪着轻松访问

更多 热门话题

APP界面

关注 APP界面

文章 41507 · 浏览 1183

APP欣赏

关注 APP欣赏

文章 41430 · 浏览 1072

APP手机界面

关注 APP手机界面

文章 41420 · 浏览 1101

图片素材

关注 图片素材

文章 29463 · 浏览 728

高清图片

关注 高清图片

文章 26225 · 浏览 860

更多 推荐作者

关注 秋末残雪

文章 99 · 评论 0

关注 秋天的孤寂

文章 97 · 评论 0

关注 惢碎葬爱

文章 91 · 评论 0

关注 怎麽继续

文章 88 · 评论 2

关注 倾听寂寞

文章 82 · 评论 0

关注 溫柔的溫柔

文章 86 · 评论 0

发布评论

顶部 反馈 评论 底部

意见反馈

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

您的反馈我们已收到!

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