映画の字幕っぽいCSSアニメーションサンプル | 1 NOTES
CSSのアニメーションを利用して映画の字幕表示のようにテキストを表示するCSSアニメーションサンプルの紹介です。 字幕っぽく下段中央に文章から一行ずつ順番に割とパッと、でもふわっと表示して消えるようにしています。 ※右下のRerunボタンでリロード再生できます。 See the Pen CSS filter: blur() by yochans (@yochans) on CodePen. HTMLには、コンテナとなるクラス「container」、テキストを格納しておくクラス「text」、imgタグで背景画像を作成しています。 <div class="container"> <img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" /> <div class="texts"> <p>吾
学習用にReact Transition Groupの内容を簡単にまとめなおしたものです。 全ての項目を網羅してはいません。 ソースはこちらです。 react-transition-group-sample デモサイト React Transition Group の概要 ReactでCSSアニメーションを扱う為のライブラリです。 具体的にフェードインやスライドインなどのアニメーションそのものは提供していません。 アニメーションの為のスタイルは自分で用意します。 その用意したスタイルを適切なタイミングでDOMに適用する為の、管理手法を提供しています。 インストール Transition コンポーネント 基本のコンポーネントです。 propsの変化や時間の経過に応じて、子コンポーネントを再レンダリングします。 完成図 ボタンまたはカード本体のクリックで反転アニメーションを開始します。 アニメ
文字や要素をスライド（横移動）表示するCSSアニメーションのパターンサンプル集です。 このページでは各アニメーションにanimationプロパティと@keyframes（キーフレーム）を使ったサンプルコードを紹介しています。 transformプロパティ translateX()についてCSSアニメーションでの横（x軸）移動はtransformプロパティでtranslateX()に移動距離の値を指定して実装します。 要素は初期位置から指定した移動距離値の分だけ移動しますが、これはpositionではないので注意です。 transform: translateX(移動距離);移動距離にはpxや相対値（%）での指定が可能です。 %での指定の場合はtranslateX()の仕組み上、そのままでは自身のwidth以上は移動できないので親要素なども対応させる必要があります。 要素のスライド（横移動）
今年もイブがやってきました。特にやることもないので 毎年 何かしら 作っています。 今回は「シュッ、クルッ、ピョン、フワッ…」みたいに書くとアニメーションになるというアイデアを温めていたので、それを作りました。 動いているところは動画から見てください。直感的としか言いようがないと思います。 tailwindにわずかに影響を受けたCSSフレームワーク作ってた pic.twitter.com/oNUvB70Y0R— hashrock (@hashedrock) 2020年12月24日 できた、直感的なCSSアニメーションフレームワークが pic.twitter.com/QyiAvKxo7A— hashrock (@hashedrock) 2020年12月24日 「直感的イコール素晴らしい」とは限らない、ということがよくわかります。 最近CSSフレームワークのTailwindを触っていて、インス
Web上でアニメーションを実現させるのはとても大変です。それだけに閲覧者にとっては大きなインパクトがあります。少しでも楽に実現させるために、ライブラリを使うのがいいでしょう。様々なライブラリを知っておけば、ぴったりの場面がありそうです。 今回紹介するwow.jsはスクロールによって出現するアニメーションライブラリになります。 wow.jsの使い方 デモです。下にスクロールするとアニメーションが開始されます。 こんな感じのアニメーションも。 wow.jsはCSSアニメーションを使っており、軽快に動作します。jQueryのような外部ライブラリは使っていません。遅延時間や回数、スタイルなどは自由に設定できます。サイズも3KB程度と軽量なので使いやすそうです。 wow.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 wow.js — Reveal Ani
CSSアニメーションの狂気
DIST.30の資料です。 狂気の方向に一歩差がつくCSSアニメーションテクニックを紹介しています。 CSSでもっと遊ぼうよ、ということを伝えたいです。
CSSでborderが伸縮させるアニメーションのパターンサンプル集です。 このページでは、テキストの下線として表示するborderとして紹介していますが、ボーダーのみの要素作成などの場合も基本は同じですので応用はしやすいかと思います。 また、幅と高さ、背景色を利用して要素そのものをボーダーとして表現する方法などもありますが、このページでは紹介していません。 borderの長さを調節する基本borderプロパティは、borderを指定した要素のwidthがその長さとなります。 例えば、displayプロパティがblockなどの要素では100％となり、displayプロパティがinlineの要素では他の要素がない限り0pxとなり表示されません。 borderの為に要素のwidthを可変すると、テキストなどの他の要素の表示領域にも影響するため、0または短い横幅を指定すると表示できなくなってしまい
【Day 128】 ポートフォリオサイト公開 / 何のアイデアもないまま作り始めたのに、気づいたら没頭しちゃってました。 たくさん足して、たくさん引きました。 1番気に入ってるのはフォントです、ホントです！ よかったら覗いてみてください↓https://t.co/0G6AE2dlQC#100DaysOfCode #Progate — 爆遅でも止まらない35歳ニート (@HEBOCHANS) 2018年12月28日 まずは私のポートフォリオサイトをご覧いただけるとイメージしやすいと思います。 とにかく「カンタンに実装できて動きのあるサイトを作る」がコンセプトでした。 この記事はこんな人にオススメ
CSSを使って一定間隔でぷるぷるっと震えるアニメーションのサンプルコードです。 See the Pen CSS | wobbling animation by yochans (@yochans) on CodePen. サンプルでは円のHTML要素を作成して、一定間隔でぷるぷると震わせるようなアニメーションを書いています。 <div class="circle"></div>.circle { width: 80px; height: 80px; background: #7fffbf; border-radius: 50%; animation: purupuru_anim 1s infinite alternate; } .circle { width: 80px; height: 80px; background: #7fffbf; border-radius: 50%; anim
【現役コーダー秘伝】簡単CSSアニメーションの種類や作り方 Web制作ハウツー Webデザイン フロントエンド(HTML/CSS) ちょっとアニメーションのついたサイトってかっこいいですよね。 どうやって動いているのか気になるところです。ソースコードを紐解いていくと、意外に小規模なところからアニメーションは実装できます。 しかし長年コーディングに携わっていると、条件や制約があるのではないかと疑ってしまいます。スマホでのアクセス数が増加する中、PCでの閲覧が無いわけでもありません。レスポンシブな組み込みが求められる中で、省コスト化（工数や予算など）を目指しながら実装は進めたいもの…。 今回は、ユーザビリティを向上させ、Webサイトやサービスの利用を手助けするCSSアニメーションを取り入れたWebサイト制作を試みます。 CSSアニメーションとは CSSアニメーションとは、CSSに関するプロパテ
CSSのアニメーションを利用した徐々に要素の背景色を徐々に変化していくサンプルコードです。 2色バージョンと5色バージョンで紹介しています。 徐々に背景色を変更するCSSアニメーション（2色）背景色を変更させるCSSアニメーションのサンプルコードの2色バージョンです。 See the Pen CSS gradually change background color animation 2 by yochans (@yochans) on CodePen. <div class="container"></div>animationプロパティには20秒（アニメーション時間）、linear（開始から完了まで一定のアニメーション速度）、infinite（アニメーションを繰り返す）を指定しています。 @keyframesではbackground-colorにて背景色を変更、2色目を50％に指定し
Reactで再レンダリングされた要素をCSSアニメーションを使用し視覚的に確認する方法 | hirakublog ヒラクブログ
Reactを書いていて、いつ再レンダリングが発生しているか知りたいときはありませんか？ 僕は知りたいです。特にパフォーマンスを改善したいとき。 今回はReactにおける再レンダリングを簡易的に視覚化する方法を紹介します。 初めに 今回紹介する方法はReact Developer Toolsでも再レンダリングの可視化はできます。 そのことを念頭において本記事を読み進めてください。 まずはデモでご確認ください。 CodeSandboxでデモを用意したので、まずは確認してみてください。 デモの内容はuseCallbackを使用した時の再レンダリングの発生を検証したものです。 カウントをプラスするボタンをクリックした時に、青色に光る部分があるかと思います。その部分が再レンダリングされています。 ※デモを作成するにあたって参考にさせて頂いた記事 【useCallback】React hookが便利す
｢うんこぉぉぉぉおおおおおおおおおおおおおおおおおおおお！！！｣ 叫び ｢叫び｣を表すのに丁度いいCSSアニメーション【5選】 縦揺れ 横揺れ 斜揺れ 時間差 ゆらゆら 適用方法 ｢叫び｣を表すのに丁度いいCSSアニメーション【5選】 普段は口に出して言い辛い言葉でも、文章にしたらスラスラ書けてしまうことってありますよね！ いつもの私生活で感じた不満や出来事をブログで爆発させている人も多いんじゃないですか？ 今回はそんなブログの叫びに使えるCSSアニメーションを用意しました ぜひその思いのたけを文章であらわして震わせてみましょう♪ 縦揺れ うわあああああああああああ！！！ .buru1{animation: buru1 .1s infinite;} @keyframes buru1{ 0%{transform: translate(0px, 0px) rotateZ(0deg);} 50%
スクロールダウンを指示する動きのあるデザインを探してましたが、ちょうど良いものが見つけられなかったので、CSSアニメーションの練習も兼ねて作成してみました。 ゴール（条件） ・コピー＆ペーストで使い回せるように、スクロールダウンアニメーションを複数個作る ・CSS Animationを使ってCSSアニメーションを作成する CSSアニメーションのサンプル See the Pen scroll arrow by yamaki (@yamaki0405) on CodePen. See the Pen scroll arrow2 by yamaki (@yamaki0405) on CodePen. See the Pen scroll arrow3 by yamaki (@yamaki0405) on CodePen. CSSアニメーション早見表 今回CSS Animationを使ってみて苦労
簡単なカウントダウンのCSSアニメーションサンプル簡単なカウントダウンのCSSアニメーションの動作サンプルとコードです。 フォントを変更すれば、見栄えも良くなるかもしれません。 ※右下のRerunボタンで再生できます。 See the Pen CSS Count Down Animation （normal） by yochans (@yochans) on CodePen. <div class="container"> <div class="count"> <p>10</p> <p>9</p> <p>8</p> <p>7</p> <p>6</p> <p>5</p> <p>4</p> <p>3</p> <p>2</p> <p>1</p> </div> </div>HTMLはカウントダウンの数字用のclass（count）を用意して10～1までの数値を作成しました。 カウントダウンの数字
風船が舞い上がるCSSアニメーションサンプル | 1 NOTES
CSSでいくつもの風船をふわふわ・ゆらゆらさながら舞い上がらせるCSSアニメーションサンプルです。 See the Pen CSS | wobbling animation by yochans (@yochans) on CodePen. HTMLはballoonsの中のdivタグがひとつの風船です。 今回は20個の風船を作成しています。 <div id="container"> <div class="balloons"> <div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div> <div></div><div>
波紋が広がるCSSアニメーションサンプル | 1 NOTES
CSSだけで作る波紋が広がる演出のアニメーションサンプルです。 複数の波紋アニメーションを同時に出現させるサンプルなども紹介しています。 波紋アニメーションSee the Pen CSS | balloons animation by yochans (@yochans) on CodePen. HTMLはripplesの中のdivタグが波紋となります。 入れ子にしているのは、複数の波紋を追加する予定のためですのでひとつで良い場合は入れ子にする必要はありません。 <div id="container"> <div class="ripples"> <div></div> </div> </div>コンテナ部分、風船を範囲より下に配置して、範囲より上に移動させてますので、「overflow: hidden」で範囲外を非表示にしています。 #container { position: rela
シームレスな背景画像を使って無限スクロールする背景を作成するCSSアニメーションのサンプルコードです。 背景の無限スクロールCSSだけで横スクロールアクションゲームのように背景を無限スクロールさせるアニメーションのサンプルコードです。 See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen. HTMLは背景画像を配置するコンテ用のdivタグを作成しています。 <div class="container"></div>サンプルに使う背景画像には以下のものを作成しました。 sample-bg.png (1333×889) 背景画像はCSSのbackground-imageのurl()で指定、今回は横スクロールですのでrepeat-xも指定しています。 background-sizeでサイズを調整する際、シームレスな画像ですが
ブラウザの表示領域の上部・範囲外・画面外から指定した要素が落下してくるCSSアニメーションのサンプルコードです。 昔のWEBサイトでマリオやクモが落下してくるWEBサイトやブログがありましたが、そんなイメージです。 上から落下してくるCSSアニメーションサンプルサンプルでは「item_container」という親要素内にて「item」という四角形が落下してきます。 See the Pen CSS Zoom in and out with mouse hover by yochans (@yochans) on CodePen. サンプル表示のため、親要素にしている「container」を「position: relative;」にて基準となる位置に指定しています。 サイト全体・ブラウザの表示領域上から落下してくるようにするには、親要素の「position: relative;」のはなくして
CSSで要素や画像、テキストをふわふわ・ゆらゆらさせるCSSアニメーションサンプルです。 See the Pen CSS | Text in a circle by yochans (@yochans) on CodePen. ふわふわ・ゆらゆらさせるCSSアニメーションHTML要素をふわふわ・ゆらゆらさせるCSSアニメーションサンプルです。 今回はひとつのdiv要素とpタグのテキストを使ってみました。 <div id="container"> <div class="circle"></div> <p class="text">FUWAYURA</p> </div>#container { position: relative; height: 200px; margin: 20px; } .circle { position: absolute; left: 20px; top: 0;
HTMLの書き方<div class="scroll-infinity"> <div class="scroll-infinity__wrap"> <ul class="scroll-infinity__list scroll-infinity__list--left"> <li class="scroll-infinity__item"><img src="sample.png" /></li> <li class="scroll-infinity__item"><img src="sample.png" /></li> <li class="scroll-infinity__item"><img src="sample.png" /></li> <li class="scroll-infinity__item"><img src="sample.png" /></li> <li cla
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Transition Group でCSSアニメーション - Qiita
要素をスライド（横移動）させるCSSアニメーションサンプル集 | 1 NOTES
地獄のCSSアニメーションフレームワークを作った - No Regrets in Bathing
wow.js - スクロールで開始するCSSアニメーションライブラリ MOONGIFT
borderの伸縮を使ったCSSアニメーションサンプル集 | 1 NOTES
jQuery／CSSアニメーション15選【コピペでサイト制作】
ぷるぷるっと震えるCSSアニメーションサンプル | 1 NOTES
【現役コーダー秘伝】簡単CSSアニメーションの種類や作り方 | 東京のWeb制作会社 株式会社クーシー
徐々に背景色を変更するCSSアニメーションサンプル | 1 NOTES
｢叫ぶ｣文章を魅力的に表現する！震えるCSSアニメーション【5選】 - ブログ
CSSアニメーションでスクロールダウンデザイン（サンプル付き） - Qiita
映画の上映開始っぽいカウントダウンのCSSアニメーションサンプル | 1 NOTES
無限スクロールする背景のCSSアニメーションサンプル | 1 NOTES
範囲外から落下してくるCSSアニメーションサンプル | 1 NOTES
ふわふわ・ゆらゆらさせるCSSアニメーションサンプル | 1 NOTES
【CSSアニメーション】画像が横スクロールし続ける無限ループの作り方 | Rita-plus.web