JavaScriptでスクロール終了時に処理を実行する方法
2017/08/05 JavaScriptで、スクロールを終了したタイミングで処理を実行したい時は、scrollイベントとsetTimeout()を利用しましょう。 サンプルコード下記は、スクロールを停止して500ms経った時に終了判定として処理を実行する例です。用途により、500の部分を調整しましょう。 var timeoutId ; window.addEventListener( "scroll", function () { // スクロールを停止して500ms後に終了とする clearTimeout( timeoutId ) ; timeoutId = setTimeout( function () { // 処理内容 }, 500 ) ; } ) ;デモスクロールを停止した時に、カウントが増加するのを確認して下さい。 var timeoutId ; var count = 0
jQuery でスクロール終了イベントを取得する : まだプログラマーですが何か？
jQuery を使うと、スクロールイベントを簡単に取得したり、スクロールイベントに対するハンドリング処理を実現できます： $(window).scroll( function(){ var scroll_top = $(this).scrollTop(); //. スクロール位置 : （スクロール時の処理） console.log( 'top = ' + top ); : }); ただ、少し取扱が難しい面もあります。上記の内容のままだとスクロールを感知する毎にイベントが発生し、その全てをハンドリングすることになります。要するに一回のスクロールの中で何度もこの処理を繰り返すことになります。 これを「スクロールが一段落したらハンドリング処理を行う」ように改良してみます。考え方として一定時間（以下の例では 200 ミリ秒）スクロールイベントが発生しなかったらハンドリングする、という考え方で擬似的
FigmaのVariants入門 - さらにコンポーネントを使いこなそう - ICS MEDIA
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
デザインの管理と効率化が行える FigmaのComponents入門 - ICS MEDIA
ウェブ制作の現場で接する機会が増えてきているデザインツール「Figma」。前回の記事『FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう』では、デザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」機能を紹介しました。 本記事ではデザインパーツの管理や柔軟な変更が可能になる「Components」について詳しく紹介します。Componentsを使い、何度も出てくる要素を管理すると、制作が効率よく進められます。 この記事は、次のような方々にオススメの内容となっています。 デザイナー 同じグラフィックをいつもコピペで複製している方 Components機能の使い方やルールに不安のある方 エンジニア デザイナーから受け取ったデザインにComponents機能が使われいて、参照方法がわからない方 コーディングで、Componentsのル
FigmaのAuto layoutはspace betweenもできるよっていう話｜unotovive（おとべ）
こんにちは、おとべです。ゆめみでデザイナーに社内転職して気づけば半年が経過しました。 さて、Figmaヘビーユーザーのみなさま、Auto layoutはもちろん使っていると思うのですが、Auto layoutのココ、いじったことありますか？ あります。使いこなしています。という方はこの記事をTwitterに共有してそっと閉じてください。 無い！というかそんな選択しあったんか！！っていう方に向けてAuto layoutの「Space between」について紹介していきたいと思います。 Auto layoutおさらいSpace betweenの前に普通の（Packed）Auto layoutをおさらいしましょう。 FigmaのAuto layoutはフレーム内の子要素を縦横一定の向きに同じ隙間を開けて並べる機能です。その際の親要素の大きさは固定、もしくは中身の大きさに依存して可変となります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
