サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Hey fellowcreators, Let's learn how toswitch images when using a dark/light mode. If you prefer to watch the video version,it's right here : 1. How to handle the dark mode. You only need to add a media query so that, when you change the mode from light to dark in your computer settings, the theme of your app changes from light to dark. Here's how to doit: Now, there are two ways to change imag
ScrollTriggerを使えるようにする ScrollTriggerを使用するには、GSAPの本体とScrollTrigger.jsを読み込む必要があります。GreenSockの公式サイトにあるインストールページから「CDN」タブを選択、さらに「ScrollTrigger」を選択します。「Browser code」に表示されたスクリプトタグをコピーして貼り付けます。 <!-- bodyの閉じタグ辺りに貼り付けます --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script><!--GSAP本体 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.
はじめにJavaScriptのアニメーションライブラリ「GSAP」の基本的な記述や、よく使う機能をまとめたいと思います。GSAPはとても高機能で基本の部分となる記述を抑えるだけでも、工夫次第でいろんな表現ができます。当記事では触れませんがSVGやcanvasなどと組み合わせるとアニメーションの幅が一気に広がります。また、scrollTriggerやMotionPathPluginなどプラグインもとても充実しています。 基本的な動きを組み合わせたイントロアニメーション ループやリピート制御を組み合わせたエフェクト 連続的な処理 応用：canvasと組み合わせたイントロアニメーションGSAPのインストール
はじめに こんにちは！プラコレのアドベントカレンダー2日目です！！ 10月からプラコレでお世話になっている森下です。 私は9月まで看護師をしていました 日々業務を行いながら勉強という感じですが、 今回は最近教えていただいたcssでのアニメーションについてお話しようと思います〜！ どうかお手柔らかにお願い致しますCSSだけでアニメーションを作る方法って？ アニメーションというと、JavaScriptやjQueryを思い浮かべ、 難しそうというイメージを持つ方もいるかと思います。 ここではCSSで簡単にアニメーションを実装させる方法をサンプルを一緒にご紹介しようと思いますCSS3 でアニメーションを実装する方法は大きく分けて以下の2種類があります。 ・transition プロパティでの定義 ・animation プロパティでの定義 【Transition】 ・始めと終わりのみ指定可能
イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。適切なイージングを設定することで、演出としての印象がかわります。UI体験をデザインするうえでイージングは欠かせない要素です。 しかし、イージングは多くの種類があり、それぞれを把握し的確に使い分けるのは少し難易度が高いかもしれません。本記事はイージングの選定に役立つ、お手本的な使い分け方を紹介します。 この記事の要約 「イーズイン」は徐々に加速、「イーズアウト」は徐々に減速。 「イーズアウト」は多くの場面で「変化の余韻が残りやすい印象」でオススメ。CSSのease-outとease-inとease-in-outは緩急が弱いので、easeを使うか、こだわる場合はcubic-bezier()を使うのがよい。 イージングの性格 イージングは「最初はゆっくりで、徐々に早く変化させる」といった動きの「性
動作の仕組み的にも構造的にも微妙だとは思いますが、形にはなったのでメモ的に。 なお、表示は重いかもしれません。 実現したいこと 実現したいことは以下の通り。 スクロールに連動して足跡を付ける jQueryは使わない 当ブログのデザインリニューアルの際にやってみたかったことの一つで、jsの練習も兼ねて試作した次第です。 IEではチェックしておらず、それ以外のブラウザに関しても動作の保証はできません。 また、スマホサイズでは邪魔にしかならなそうなので、当ブログではjsの読み込み自体をさせておらず、こちらも未チェックです。 コード(jsのみ) 別ページの「JavaScriptでスクロールに連動した足跡をつける(試作版):メモ」に記載している試作コードを経て、現在当サイトで実装しているコードが以下のものです。 足跡の動作自体は別ページの試作コード2(Lodash使用)の方が良いのですが、jsライブ
CSSによるグラデーションの色の位置を指定できる性質を応用することで、ストライプのような幾何学模様を作成することができます。ストライプ、チェック柄、ドットなど定番の柄の作り方をまとめました。 ストライプCSSのrepeating-linear-gradient()を利用してストライプを作成します。repeating-linear-gradient() は、反復線形グラデーションを生成できる関数です。 SAMPLE body{ background: repeating-linear-gradient(#c2a8cc, #c2a8cc 20px, #fff 20px, #fff 40px); } サンプルでは、「#c2a8cc（紫色）」と「#fff（白色）」の横方向のストライプを作成しました。0〜20pxを「#c2a8cc」、20〜40pxを「#fff」と設定し、これがループされることで、
In perhaps in thetop 5 most annoying things a website can do is this. You’re trying to read something (or click something!) and all the sudden the page shift underneath you (or you mis-click!). There is aCSS property that can help fix that. Plus, we can exploitit to do something that was previously exclusively in the realm ofJavaScript. The overflow-anchor property inCSS is relatively new, fi
Envato: Get every type of asset for any type of project, and a full stack ofAI tools From $16.50/m
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
この記事は enechain Advent Calendar2023 の18日目の記事です。昨日は okp さんの「経験が裏目に？！大手IT企業出身PdMが3カ月で学んだこと」でした！ はじめに なぜ、今ダークモードか ダークモードおさらい ダークモードの歴史 ダークモードって意味あるの？ 省電力の効果について 文字が見やすい＆目への負担が少ない ダークモードの利用率 各サービスのダークモードの実際2023版 X Gmail ミュージック & App Store Instagram iSPEED ダークモード未対応のアプリ＆ダークモードのみのアプリ ダークモード未対応のアプリ ペイ系 ショッピング系 ダークモードのみのアプリ ダークモードの行方 まとめ はじめに 私はenechainのプロダクトデザイナーで、デザインマネージャーの近藤です。今年の10月に入社しており、もうすぐ3ヶ月が経
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。2023年、CSSの現状調査をおこなった結果をまとめた「State ofCSS2023」を紹介します。今年は例年より早いですね。 State ofCSS2023 State ofCSS2023は、State ofCSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意したSVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。SVG Icon Component をどう作るか アイコン画像を背景画像ではなくSVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のようにCSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
