Create interactive web experiences that differentiate, delight, and convert.
Build web animations visually with Webflow Interactions
Create interactive web experiences that differentiate, delight, and convert.
Headroom.js - Give your pages some headroom. Hide your header until you need it.
Headroom.js Give your pages some headroom. Hide your header until you need it. Or install via npm/yarn: npm install headroom.js --save yarn add headroom.js What's it all about? Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slid
CSS Number Scroll
download .ZIPdownload .TGZ Demostration Source Code HTML <span id="timestamp"></span> CSS .num { display:inline-block;position:relative;overflow:hidden;width:1em;font-size:28px;text-indent:-1.5em; } .num:before { content:attr(b);position:absolute;left:1.2em;top:-1.5em; } .num:after { content:attr(a);position:absolute;left:1.2em;top:0px; } .num.anim200:before { transition: top 0.2s; } .num.anim200:
Focus transition
Playground Placebo button Why? Keyboard navigation has a major downside: it’s not clear where the focus moves upon pressing the Tab key. Animation makes the transition more apparent. How? Flying Focus creates an element that is moving when the focus event happens. outline: 5px auto -webkit-focus-ring-color makes the element look like it has a focus. It only works in Safari and Chrome. Firefox does
カード状のドロップダウン
上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。 実際の動きは、下記ページでご覧ください。 CSS3 Card Deck Drop Down HTML 各アイテムはリスト要素でシンプルな実装です。 <div class="card-drop"> <a class='toggle' href="#"> <i class='icon-suitcase'></i> <span class='label-active'>Everyting</span> </a> <ul> <li class='active'><a data-label="Everyting" href="#"><i class='icon-suitcase'></i> Ev
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - maroslaw/rainyday.js: Simulating raindrops falling on a window
NProgress: slim progress bars in JavaScript
CodePen - Touch device jelly menu concept