【HTML 5.2】ダイアログボックスの使い方
恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。 今日はHTML 5.2から登場したダイアログボックスの使い方について説明します。 ダイアログタグを使うことでモーダルウィンドウを簡単に作成することができます。 普段はdisplay:noneの状態ですが、dialogタグにopen属性をつけることでダイアログボックスが可視化します。 また、ダイアログボックスの位置はデフォルトで上下中央の最前面に来るようになっています。 こちらがデフォルトのデモになります。 DEMO これにcssやjsでアニメーションや装飾を加えてあげると立派なモーダルウィンドウが完成します。 それでは今度はカスタマイズしたダイアログボックスを見てみましょう。 DEMO こんな感じですね。よくあるモーダルウィンドウが出来ていると思います。 ではコードを
JavaScriptは使わずに、CSSだけで複数の画像を一定間隔で自動的に切り替えていくCSSアニメーションの実装例です。 コピペで簡単に画像のフィードイン・フィードアウトが可能です。 完成コード See the Pen 複数画像を自動差し替えするCSSアニメーション by ゆゆう (@yuyuu-dev) on CodePen. コードの説明 HTMLの説明 <div> <h1>複数画像を自動差し替えするCSSアニメーション</h1> <div class="container"> <img class="image" src="https://drive.google.com/uc?export=view&id=1aFZSWIiplKxfVsOswYVL3oOwyFaOW3wf" /> <img class="image" src="https://drive.google.com/u
初めてIntersectionObserverを使ってみたのでnoteに残しておきたいと思います📝Vue.jsのコードですが、Vue.jsっぽい書き方していないので他のフレームワークでも一緒かと！ はじめてIntersection Observer使ってみた🙌 これ使うとjsのscrollイベント使わずに、要素と要素が交差するのを検知できる。意外と簡単にできた〜😊 scrollイベント使うと発火量やばいから、こっちのほうがパフォーマンスには良さそう...💭 pic.twitter.com/QWp12toBBW — 𝚜𝚞𝚖𝚒 (@su_mi1228) January 12, 2020 IntersectionObserverとは スクロールして可視範囲に入ったらアニメーションさせたいってありますよね？？ふわっとタイトルを表示させたり。 通常はJavaScriptのscroll
こんにちは、kz_moritaです。 最近はVue.js / Nuxt.js あたりで Web フロントを書いたりしています。 今回は、ページの最上部からある特定のDOMの位置座標を取得するのにちょっとつまづいたため、そのことについてまとめておきます。 試した方法 以下の二種類の方法を試しました。 HTMLElement.offsetTop Element.getBoundingClientRect().top + window.pageYOffset 結論から言うと、ページの最上部からの位置を取得する仕様は２つ目の方法で実現することができました。 HTMLElement.offetTop HTMLElement.offsetTopの仕様は以下のサイトに詳しく書いています。 https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/
今回は、CSSアニメーションを設定する際によく使うscale()を紹介します。 この機能を使うことで、要素を自由に拡大・縮小することができますので、是非参考にしてみてください。
CSSだけでマウスホバー時に画像などのHTML要素がクルッと裏返るフリップアニメーションのサンプルを紹介しています。 マウスホバーで裏返るCSSアニメーションフリップアニメーションを出来るだけシンプルに作成した動作サンプルとサンプルコードになります。 サンプルでは、要素にカーソルを合わせると180度回転して裏返ります。 See the Pen CSS | Mouse hover VS Display none ROUND 1 by yochans (@yochans) on CodePen. HTMLには裏返すアイテムとなる「.item」、その中に前面になる「.front」、背面になる「.back」を設置しています。 前面と背面のdivにてカスタマイズは簡単におこなう事が可能です。 <div class="item"> <div class="front"><p>FRONT</p></di
素早く制作できた！Web制作に役立つトレンドのツール一覧
作成：2014/12/22 Web制作 > 2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ CSS ツール １．CSS スニペット ２．CSSアニメーションサンプル ３．背景を様々な形に切り抜く ジェネレーター ４．SCSS/CSSに変換するツール ５．CSS フレームワークとチートシート ６．CSS3 アイコン ７．CSS / JS / HTML コード整形 ８．レスポンシブ モックアップ作成 ９．ブラウザ対応表 SVG / ロングシャドー / ポリゴン作成 １０．SVG ブラウザサポート状況確認表 １１．SVG ローディングアニメ作成 １２．SVG 背景作成ジェネレーター １３．SVG パターン背景
弧を描きながら移動するCSSアニメーションを作成する方法を紹介しています。 transformのtranslateだけでXY移動させようとすると斜めの直線移動になってしまいます。 検索からこのページにアクセスした方はおそらくそこで困っているのではないでしょうか。 弧を描いて移動するCSSアニメーションCSSのみで弧を描いて移動するアニメーションの動作サンプルとサンプルコードです。 動作サンプルでは半円に沿って弧を描くCSSアニメーションを各方向別に4種類設置しました。 各方向セットなのとアニメーションの終了後に逆再生を付けていますので、正直ちょっと弧を描いている感が伝わりにくいサンプルになったと反省、ひとつひとつを見ると弧を描いて移動している事がわかります。 See the Pen CSS Slide animation (basic) by yochans (@yochans) on C
久しぶりにフロントエンド周りです。 ボタンを押すとアコーディオンが開く、というよくある実装をCSSアニメーションを用いて実装します。 これが結末 .foo max-height: 0 padding: 0 20px transition: max-height 0.3s, padding 0.3s overflow: hidden &.is-open max-height: 100vh padding: 20px
CSSでアニメーションを作るには？CSSアニメーションの作り方（基礎編） | ビジネスとIT活用に役立つ情報（株式会社アーティス）
最近ではアニメーションを使用しているwebサイトが多くなりました。 要素の色や形を変化させたり、移動させたりすることで、動きのある華やかな印象を与え、より直感的に情報を伝えることが出来るアニメーション。 そんなアニメーションをCSSだけで表現する方法を、今回解説していきます。 CSSアニメーションの概要 CSSでアニメーションを表現するには2つの設定が必要となります。 1つ目は@keyframes、もうひとつはanimationプロパティです。 全体の流れとしては、@keyframesでアニメーションする要素の、アニメーション開始時の状態と終了時の状態を設定し、animationプロパティで詳細を設定します。 それではそれぞれの設定に関して具体的な説明をしていきます。 @keyframesの設定 @keyframesではアニメーションさせる要素の形状などの状態を記述していきます。 たとえば
CSSのみで作成した桜（サクラ）が舞い落ちるCSSアニメーションのサンプルコードになります。 「紙吹雪が舞う」や「雨が降る」のCSSアニメーションシリーズのひとつです。 サクラが舞うCSSアニメーションサクラが舞うCSSアニメーションの動作サンプルとサンプルコードです。 サンプルでは背景画像はいつもサンプルに使っているものを適当に使っていますが、サクラの雰囲気が出る背景をチョイスすれば良い感じになるかもしれません。 See the Pen CSS | Confetti Animation by yochans (@yochans) on CodePen. HTMLにはサクラの他、背景画像やテキストを格納するコンテナ要素をdivタグで作成しています。 サクラはdivタグの中にspanタグひとつを一枚の花びらとして設置、サンプルでは桜の花びらの数は50個としています。 <div class="
CSS | 3Dなサッカーボールの作り方 | 1 NOTES
CSSで立体感のあるサッカーボールを作成してクルクル回す方法を紹介しています。 See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen. （エセ）球体の作り方について以下の記事で紹介しています。 立体的なサッカーボールを作成する方法立体的なサッカーボールを作成してCSSアニメーションで回転させるサンプルコードです。 3D、立体と記述していますが、サッカーボール柄を移動させてそれっぽく見せているだけです。 <div class="soccer-ball"></div>テクスチャ画像として適当に作ったシームレスなサッカーボール柄を利用しています。 background: urlで画像ファイルのパスとrepeatを指定する事で繰り返し描画に設定します。 background-sizeで画像の表示サイズを調節しています。 .so
緊急事態宣言 - 私が歌川です
まずはこちらをご覧ください。 【速報 JUST IN 】東京に4回目の緊急事態宣言へ 政府方針 #nhk_news https://t.co/ZcN8uRXlcG— NHKニュース (@nhk_news) 2021年7月7日 この写真を再現したくなり、緊急事態宣言ジェネレーターを作る運びとなりました。 「緊急事態宣言」の文字が大きすぎて折り返されると、無料ジャバのダウンロード感が出てきてしまうので、できるだけ折り返されないように注意しました。vwやvhを駆使しています。スマホで見てもひどいことにはならないと思うけど、縦画面で見てもわけがわからないと思います。 ほんとうはスクランブル交差点の写真を使いたかったけど、権利的にクリーンにしたいので、去年撮影した大阪の写真をデフォルトで表示するようにしています。 好きな写真で緊急事態を宣言したくなった際にご利用ください。glitchで作って、rem
新しい CSS 型オブジェクト モデルを使用する | CSS and UI | Chrome for Developers
要約 JavaScript で値を操作するための適切なオブジェクト ベースの API が CSS に追加されました。 el.attributeStyleMap.set('padding', CSS.px(42)); const padding = el.attributeStyleMap.get('padding'); console.log(padding.value, padding.unit); // 42, 'px' 文字列を連結し、微妙なバグを連結する時代は終わりました。 はじめに 以前の CSSOM CSS には長年にわたってオブジェクト モデル（CSSOM）があります。実際、JavaScript で .style の読み取りや設定を行う際は、常にそれを使用しています。 // Element styles. el.style.opacity = 0.3; typeof el.s
Intersection Observerを使って画面内に要素が入ったらアニメーションさせる｜notes by SHARESL
はじめに 画面スクロール時に特定の要素が画面内に入ったら読み込んだり、アニメーションを適用して表示させたりしたい時に使えるAPIのメモ。 こういった実装はこれまでscrollイベントで実装されてきましたが、スクロールするたびにイベントが発生するので負荷がかなり大きく、画面が重くなる原因になりがちでした。そのためrequestAnimationFrameを使ってパフォーマンスを向上させる方法などがググるとたくさん紹介されています。それでもまだ重く感じたり負荷が気になっていたのですが、それを解決する「Intersection Observer API」というものがあることを知ってからはこちらで実装するようになりました。 Intersection Observer APIとは？ 直訳すると「交差点監視」という意味ですが、その名の通り「要素同士の交差を判定できる」APIです。指定した要素と要素が交
CSSでテキストや要素を拡大や縮小させるCSSアニメーションのサンプルコードです。 マウスホバーでの拡大・縮小、マウスクリックでの拡大・縮小、animationプロパティでの拡大・縮小などそれぞれの方法のCSSアニメーションの実装パターンを紹介しています。 scale()の使い方と、その他の方法このページでのサンプルは要素のサイズ変更にscale()を利用して紹介しています。 scale()にて指定できる値は横幅・縦幅の拡縮率を指定します。 transform: scale(2);横幅・縦幅の拡縮率はカンマで区切ることで、それぞれ別々に指定することも可能です。 transform: scale(2, 1);また、scaleX()、scaleY()といった書き方もできます。 transform: scaleX(2); transform: scaleY(2);scale()を使わない別の方法
サイトを動きのあるデザインにしたい時、アイキャッチ画像やタイトルを上下あるいは横からふわっとフェードインさせると、ページ全体にモダンな雰囲気が加わります。 これぐらいの処理であれば、HTMLとCSSで簡単に実装することができます。 上の見本ではフェードインが永遠と繰り返されていますが、一回のみ実行させたり、もっと時間をかけてスライド・フェードインさせたり…といった感じに自由自在な微調整が可能です。 今回はCSSアニメーションで上下・横からフェードインさせる方法をレクチャーしたいと思います。 １．CSSアニメーションで作るフェードインの基本 2章以降でご紹介するCSSは、コピー＆ペーストでスライド式のフェードインを実装できますが、自分なりに微調整したい場合にはCSSアニメーションの基本をおさえておくと良いでしょう。 手っ取り早くフェードインするCSSを知りたい人は、この章は読み飛ばしちゃって
SVG アイコンをアニメーションさせたい Web サイトのアイコンといえば、一昔前は PNG を CSS Sprite で表示する手法がメジャーでしたが、昨今の Web サイトでは高解像度環境やレスポンシブウェブ対応などもあり、ピクセルデータの PNG よりベクターデータの SVG が主流になっているかと思います。 ちょっと前まではカスタムフォントアイコンなどもありましたが、作成手順の面倒さや、多色表現ができなかったり、アクセシビリティの観点からも SVG に及ばず今は下火な印象です。 Web サイトには様々なアイコンがありますが、ローディング状態を示すアイコンはアニメーション表現することが前提になります。古くはアニメーション GIF、最近では APNG で実装していましたが、せっかくアイコンを SVG で統一しているのだから、アニメーションアイコンも SVG で実装したくなります。 ちょ
Page loaders are often used on websites to give the user something to watch while the content is loading in the background, as well as signaling to the user that something is happening rather than just watching a blank screen while the page loads. Creative designers have come up with a multitude of ways to make page loaders entertaining, interesting, engaging, and even fun, so as not to bore the u
ボタン要素をキランとさせる、 SVGアニメーション。 2022.06.14 「クリックせざるを得ない」デザイン。 SVGアニメーションのサンプル集です。 こんにちは、「ふ」です。 SVG画像って知ってますか？ SVGをあなたのwebに取り入れれば、どんなデバイスでも、どんなに拡大してもくっきり表示することができます。 またSVG形式のファイルは、「線」や「色」の情報を持っているので、CSSをはじめとするコーディングによってそれらを独自にカスタマイズすることもできます。 そして。 アニメーションさせましょう。webサイトに動きをつけることで、静止コンテンツの枠から飛び出した、素敵なページを演出できるでしょう。 SVGアニメーションの方法３つ。 web上でSVGをアニメーションさせるには、以下の３つの方法があります。 ① CSSアニメーションを利用。 SVGの要素には、CSSを使ってアクセスす
AnimatiSSは様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできるWebサイトです。 スクロールアップ/ダウン、回転、回転+拡大縮小、スィング、スライド、シャドウなどなど大量のアニメーションエフェクトをカテゴライズし、それぞれのページで個別に動作確認する事が可能です。 動作確認ページではアニメーションの時間を設定できるようになっており、コピーできるコードにも反映されます。CSSでアニメーションエフェクトを導入したい時にイメージしやすくてそのままコードもコピーできるので効率良いんじゃないでしょうか。 AnimatiSS
.img-box{ width: 100%; height: 46vw; overflow: hidden; position: relative; } .img-box>div{ position: absolute; top: 0; left: 0; width: 100%; height: 46vw; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 10; } /* 1枚目のスライド */ .img-box>div:first-of-type{ background-image: url(../img/img.jpg); } /* 2枚目のスライド */ .img-box>div:nth-of-type(2){ background-i
マウスホバー時にリストのテキストの下に下線がにょきっと広がるように伸びるCSSアニメーションを紹介しています。 マウスホバーでリストに下線が広がるCSSアニメーションサンプルでは、リストはリンクではありませんがヘッダーメニューやタブメニューなどでもそのまま利用可能です。 アニメーションは、リストのテキスト部分にマウスカーソルを置くと、ニョキッと中央から下線が広がり、マウスカーソルが離れると元に戻るようになっています。 See the Pen CSS | Afterimage animation by yochans (@yochans) on CodePen. HTMLはシンプルなリストタグを設置しています。 <ul> <li>PHP</li> <li>Python</li> <li>CSS</li> <li>JavaScript</li> </ul>本題とは直接関係ありませんが、リストは
【現役Vueフロントエンジニアおすすめ】実務で使えるCSSマテリアルデザイン８０選（完全オリジナル/解説付き） - Qiita
コピペだけで作れるマテリアルデザインを８０個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています CSSボタンアニメーション８０選 １. シンプルなスライダーマテリアルデザイン３選 そのまま使えるスライダーアニメーションのマテリアルデザインとなっています transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します [ ] ２. filterとopacityを使いこなすスライダーマテリアルデザイン３選 filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアル
はじめに Safariで、css filter(blur)をかけるとなぜか表示されなかったので対処法を書きます。 理由としては要素にハードウェアアクセラレーションが効いていないことが原因で、 要素にGPUレイヤーを作成すれば大丈夫なので、GPUレイヤーを作成するようSafariに促します。 対策1. will-changeプロパティを使う will-changeプロパティを設定することでGPUレイヤーを作成する事ができます。 .lp_hero__main::before, .lp_hero__main::after { filter: blur(100px); will-change: filter; } 実装後（after）の画像ではちゃんと薄い青色のブラーが適用されているのが確認できます。 なぜ、will-change・transformを設定することで解決できたのか。 「はじめに」で
※stepsは、指定した分割数によって段階的にアニメーションさせる値で、分割数はsteps(分割数,end)で指定可能。 分割数はアニメーション時間に比例します。 ※cubic-bezierは自身でアニメーション速度の挙動を制御でき、3次ベジェ曲線のP1とP2をcubic-bezier(x1, y1, x2, y2) という風に制御値を設定可能です。 伸縮バーでイージングアニメーションを比較伸縮バーアニメーションでイージングを比較した場合の動作サンプルになります。 See the Pen CSS animation iteration count by yochans (@yochans) on CodePen. アニメーション時間は3秒、繰り返しはinfinite（無制限）、widthにて横幅変更しています。 3秒のアニメーション完了のイージング毎による挙動の違いがわかります。 <div
Vue.js + WordPressでヘッドレスCMSを作る #4 | CBC | Webデザインやプログラミングの基礎学習
#1 vue.js + WordPressでヘッドレスCMSを作る まえおき ヘッドレスCMSについて WordPres（以下WP）は、それだけでWebサイトが作成できる素晴らしいCMSです。 データを保存するバックエンド（サーバサイド）も、画面に表示するフロント（クライアントサイド）もPHP言語を使って作成できます。 WPで使うPHP言語は、記事やページを登録することに関しては申し分のない機能をもっている反面、 表示はブラウザのみに限られおり、通常スマホアプリなどでは表示できません。 また、ページ遷移もいちいちページ全体を再度読み込むためにデータ通信量が増え、速度も遅くなりがちです。 そのあたりの弱点を解消するための新しい技術として、ヘッドレスCMSという考え方ができました。 Headlessヘッドレス CMS（Head=頭、less=すくない）とは、表示部分ヘッドの機能が無いCMSのこ
HTML全体のコードHTMLでは画像の設定をします。 今回は準備した画像になっていますが、お好みの画像で設定しても構いません。 画像の位置を決めるのにCSSでposition: relativeを設定しますのでdivにclass=”anime”の名前で囲っておきます。 お好みの画像を使用した場合は、画像名を変更するのを忘れないようにしてくださいね。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blog</title> <link rel="style
これは Wano Group Advent Calendar 2023、12/8(金)の記事です。 1つ前の記事は@iuchimさんの「Amazon Personalizeを試してみた時のメモ」ですね。いいですねレコメンド。Amazon Personalize、私もやりたい。 今回はブラウザのセッションリプレイという分野がおもしろかったので、その記事を書きます。 はじめに 運用している一部サービスで「セッションリプレイツール」の導入を試しています。 しばらく試験運用してみたらすごく良かったので、実際の導入に当たり考えるべきことと各SaaSの特徴をまとめ、ツール選定するまでの雑感をつらつら書いていきます。 (ブラウザ)セッションリプレイツールとは いわゆる「ブラウザ操作録画」です。 総じてサイトデザインとクリックや遷移の動きを保存し、動画などとして再現できます。 セッションリプレイ攻撃とかの
星空背景のCSSアニメーションサンプル | 1 NOTES
星空背景のCSSアニメーション夜空に浮かぶ星々のCSSアニメーション。 アニメーションは、それぞれの星の光がゆっくりと拡縮している感じにしてあります。 See the Pen CSS | stars by yochans (@yochans) on CodePen. 星の大きさ別に各10個、「s」「m」「l」と3種類で30個の星を表現しています。 <div class="container"> <div class="stars s"> <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p> </div> <div class="stars m"> <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p> </div> <
CSS | 3Dな地球儀の作り方 | 1 NOTES
CSSで立体感のある地球儀を作成する方法を紹介しています。 See the Pen CSS | Globe by yochans (@yochans) on CodePen. シンプルな球体の作り方について、以下記事でも紹介しています。 地球儀の作り方 HTML構造動作サンプルで紹介している地球儀に使っているHTML構造です。 <div class="globe"></div>円と地図円を作成して、背景に世界地図の画像ファイルを指定、地図の画像は2つ分繋げています。 background-sizeで「auto 100%」と指定して要素サイズに画像の高さを合わせます。 .globe { width: 150px; height: 150px; margin: 30px; border-radius: 50%; position: relative; background: url('http
かっこいいアニメーションを実装できるFramer Motionを触ってみた - KAYAC engineers' blog
この記事は Tech KAYAC Advent Calendar 2021 の 10 日目の記事です。 こんにちは! 今年の4月に入社した片岡です。普段は、クライアントワークの案件開発をするフロントエンドエンジニアをやっております。入社してまもなく1年ですがこれまでNext.jsをベースとしたwebサービスやwebサイトの開発をしてきました。 この記事では、Reactでかっこいいアニメーションを実装できるライブラリについて紹介します。 Framer Motion Framer Motionは、オープンソースで開発されているReact用のモーションライブラリです。ページ遷移時のアニメーションや、ユーザのジェスチャーに合わせたモーションを比較的簡単に実装することができるものです。 www.framer.com この記事を書きながら実際にアニメーションを作ってみます。公式ドキュメントを見ながらや
フリーランスのコーダーへ
弱小web制作会社で働いているコーダー増田です。 うちはコーダーがデザイナーの1/3もいないので外注コーダーさんに頼らないと回していけず、常に募集していい人を探している状態です。 フリーランスのコーダーという存在は、数だけなら結構います。ひとたび募集をかければどしどし応募がくるくらいいます。ただ1度仕事をしたら2度目がないことがほとんどです。 理由は ・実際の構築経験がないので全体の流れが分かっていない人が多い（実装部分は業務に入らないにしろ全体図を把握しているのといないのとではコーディングの質が全然違います） ・自分の実力に対して強気な価格設定すぎる ・引き受けてから納期を何度も引き延ばす（初稿を最終納品日に出して来たりする） などです。 納期についてはいろんな都合があるので前倒しも後ろ倒しも相談次第では、という感じ（正直webデザイン界隈じゃ日程通りにいくことのほうが少ないし）なんです
サムネイルなどの画像をふわっと拡大させるCSSアニメーションのサンプルコードの紹介です。 See the Pen CSS | Enlarge image animation by yochans (@yochans) on CodePen. 画像をふわっと拡大させるCSSで画像のドラッグを無効にするにはuser-dragプロパティにて「none」を指定します。 <div class="thumbnail-box"> <a href="https://1-notes.com/css-pixel-stars-animation/" target="_blank" rel="noopener"><img class="brightness" src="https://1-notes.com/wp-content/uploads/2020/01/%E3%82%AD%E3%83%A9%E3%82%A
ボタンタップで一時的に要素を量産する - Qiita
作ったもの インスタライブのような同期チャットにエモート機能を載せるということで JSとCSSアニメーションでひな形の挙動を作ってみました。 コード HTML <link rel="stylesheet" href="style.css"> <div class="contentsAll"> <!-- なにもないエリア(表示用) --> <div class="none-area"></div> <!-- エモートリスト --> <ul class="emotes"> <li class="emotes__box left"> <button class="emotes__box-select"></button> <div class="floatBox"> <span class="floatBox__item"></span> </div> </li> <li class="emot
.hero-slide__img { animation-duration: 15s; // 長さ15秒 animation-iteration-count: infinite; // 無限に再生を繰り返す animation-name: slideAnime; // アニメーション名 animation-timing-function: ease; // 開始と完了を滑らかにする opacity: 0; // 透過設定 }
![[CSS アニメーション] CSSのみで作るスライドショー](https://cdn-ak-scissors.b.st-hatena.com/image/square/c835154443eaadce64b0a2f3f3a6e39ac21ac2d2/height=288;version=1;width=512/https%3A%2F%2Fatelier-light.com%2Fblog%2Fwp-content%2Fuploads%2F2021%2F08%2Findex-hero02.jpg)
こんにちは。 最近、タピオカの記事、「[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●●」がタピオカランドを超える勢いでタピオカなので、負けてられないと、私は大好きなまなちゃん（ねこ）の愛らしさをCSSで表現しようと思う。 完成したまなちゃんはこちら See the Pen manachan by himeka223 (@himeka223) on CodePen. スリスリしてくるような愛らしさがなんとも、愛くるしい！！！！！！ 詳しく説明していく 長くなりそうなので、動かす説明は次回に、、、 [CSSアニメーション]CSSだけで、まなちゃん（ねこ）を作って動かす 〜動かす編〜 - Qiita 出会いは高校3年生の夏休み。 高校の近くのファミマの裏に捨てられているのを、友達が学校に連れてきたのがきっかけ。 まなちゃんが妹のうねこ（もちろんこの子も超絶愛してる）とダ
![[CSS/HTML]CSSだけで、まなちゃん（ねこ）を作って動かす 〜作る編〜 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/90b1126a7437e1936be3cfd5f9cc425386d610e7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQ1NTJTJGSFRNTCU1RENTUyVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBNyVFMyU4MCU4MSVFMyU4MSVCRSVFMyU4MSVBQSVFMyU4MSVBMSVFMyU4MiU4MyVFMyU4MiU5MyVFRiVCQyU4OCVFMyU4MSVBRCVFMyU4MSU5MyVFRiVCQyU4OSVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MSVBMyVFMyU4MSVBNiVFNSU4QiU5NSVFMyU4MSU4QiVFMyU4MSU5OSVFMyU4MCU4MCVFMyU4MCU5QyVFNCVCRCU5QyVFMyU4MiU4QiVFNyVCNyVBOCVFMyU4MCU5QyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ODY5ODBmMDNjNDM5N2JiZTY1MmMyZGMwNDcxNTc5YWU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdXBlci1tYW5hLWNoYW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFlNDlhODYxNzE0NTQ0ZjcxODg2MDI1NWZlMThlNzVl%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U09SSUNI%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D043a4161441d1df9b1abb45b6e073d03)
CSSの限界はどこにある。 - Qiita
前置き CSSって思ったより凄いよって記事です。 高校生の分際で一丁前にCSSを語るなと有識者諸兄に怒られそうなので先にお詫びしておきます。大変申し訳ございませんでした。 本題 謝ったので好きな事言えます。 CSSアニメーション まずは広く知られてるであろう所から。 CSSでアニメーションが記述できる。それだけの代物。 See the Pen ExgWJJY by HATO (@hatopoppo) on CodePen. 最近だとハンバーガーメニューとかで見かける。( transitionで実装してる物の方が多いけど ) これを頑張れば、 See the Pen mdrWZXY by HATO (@hatopoppo) on CodePen. こういう事もできる。 因みにコードはtransform-originでrotationの原点を関節の位置に変えて回してるだけ。 コードの行数と比例
【現役Vueフロントエンジニアおすすめ】実務で使えるCSSマテリアルデザイン８０選（完全オリジナル/解説付き） - Qiita
コピペだけで作れるマテリアルデザインを８０個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています CSSボタンアニメーション８０選 １. シンプルなスライダーマテリアルデザイン３選 そのまま使えるスライダーアニメーションのマテリアルデザインとなっています transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します [ ] ２. filterとopacityを使いこなすスライダーマテリアルデザイン３選 filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアル
『自慢したくなる』コピペ大歓迎のCSS画像アニメーション５５選！【完全オリジナルコード】 - Qiita
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため) プロジェクトに取り込んでより充実したデザインにしてもらえれば○ コードは全てリンク先に説明付きで記載してあります 【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選 動きは下の画像のような感じになります １. transform rotateX×scaleで【縦回転】CSS画像アニメーション ２. transform rotateY×scaleで【横回転】CSS画像アニメーション ３. transform rotateY/Z×scaleで【3D回転】画像アニメーション transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選 動きは下の画像のような感じになります １. クリックで右方
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【コピペで簡単！】複数画像を自動差し替えするCSSアニメーション【フィードイン・フィードアウト】｜ゆゆうブログ
IntersectionObserverを使って要素の交差を検知してアニメーションさせる｜sumi｜note
HTML/JavaScriptでページ最上部からの位置を取得する方法
【CSS】transform: scale()で要素を拡大・縮小する方法 | WebDev Tech
マウスホバーでクルッと裏返るCSSアニメーションサンプル | 1 NOTES
弧を描いて移動するCSSアニメーションサンプル | 1 NOTES
アコーディオンの開くアニメーションをCSSで表現する - Qiita
CSSのみでサクラが舞うアニメーションサンプル | 1 NOTES
要素を拡大・縮小させるCSSアニメーションサンプル | 1 NOTES
CSSで上下＆横からフェードインするアニメーションを作るには？ ｜ 向壁虚造
React でパフォーマンスに配慮した SVG アイコンの表示方法
20 Pure CSS Animated Page Loaders - 1stWebDesigner
SVGアニメーション 作り方。
様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできる・「AnimatiSS」
CSSアニメーションでフェードのスライドショーを作ろう！ - Global Web Design
マウスホバーで下線が広がるCSSアニメーションサンプル | 1 NOTES
CSSアニメーションを実装する上で気を付けたいパフォーマンスの話し - Qiita
CSS | アニメーションのイージングで指定可能な値と比較 | 1 NOTES
【初心者必見】コピペOK！CSSアニメーションで楽しくキャラクターを動かそう！ | WEBらぼ
セッションリプレイツールのススメと選定 - Qiita
サムネイル画像をふわっと拡大させるCSSアニメーションサンプル | 1 NOTES
[CSS アニメーション] CSSのみで作るスライドショー
[CSS/HTML]CSSだけで、まなちゃん（ねこ）を作って動かす 〜作る編〜 - Qiita