無限ループするニュースティッカー -『javascript』
- uto usui
- ／／
- javascript
- UI
ニュースとかを表示させるような、無限ループするティッカーのコンポーネントです。
const ticker = (target, margin = 0) => {
let $target = $(target),
$inner = $target.children(),
containerWidth = 0,
left = 0,
width = 0;
const size = () => {
containerWidth = $target.width();
left = containerWidth;
$target.find('.js-item').each(function() {
width = width + $(this).outerWidth() + margin;
});
};
size();
let tick = () => {
if (--left < -width) {
left = containerWidth;
}
$inner.css({
'transform': 'translateX(' + left + 'px)'
});
setTimeout(tick, 16);
};
tick();
};
ticker('#js-ticker', 30);
share
ー
tag
ー
-
previous
ー画像を埋め込んで画面をスクロールできるiPhone6のアウトラインのモックアップをCSSだけでつくる -『CSS』
-
next
ー簡単なTODOアプリケーション -『Vue.js』
