Figma でスライドを作る時に知っておくと便利なこと｜seya
Figma でスライドを作っている方、増えてきたのではないかと思います。私も最近は Figma で作っています。やはり自由度の高いツールでありながらもコンポーネントなどでスライド共通の装飾なども作れるので生産性も高く気に入っております。 そんな Figma でスライドを作る時にいくつか知っておくといいことを紹介していきます。 プロトタイプで共有よりは SpeakerDeck などのスライド共有サイトを使った方が多分いいなぜかと言うと、Figma のプロトタイプでシェアすると全部のFrameが読み込まれるまで表示がされないからです。せっかく読もうと思ってくれた人を少し待たせてしまいます。Speaker Deckなどでは最初の一スライドだけ読み込まれたらすぐ表示してくれるのでその点は大丈夫です。 例として猫ちゃんのスライドを作ってみました。ちょっと開くまでに時間がかかるのがみて取れると思います
jQueryを使わずにスライドメニューを実装しよう
2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など
ウェブサイト制作に欠かせない、アニメーション人気テクニック4つまとめ
機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。 今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。 進行状況（英: Progression） ローディング・アニメーション ウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。 シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなど
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
ファーストビューの動きが面白いWebサイト20
2019年1月13日 JavaScript, Webデザイン 近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、今回はWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介します。 ↑私が10年以上利用している会計ソフト！ JavaScriptライブラリー 実例紹介の前に、素敵アニメーションを利用するための便利なライブラリーをいくつか紹介します。 three.js ドキュメント｜サンプル集 揺れ動く布や、画面いっぱいに浮かぶ球体など、様々な3D表現を可能にするJavaScriptライブラリー。ホームでは実際に利用しているWebサイトが数多く紹介されています。豊富なサンプル集も必見です。 GreenSock ドキュメント｜サンプル集 ア
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
CSS だけでスライドショー | q-Az
jQuery、JavaScript を使ってスライドショーを作るのが昔は一般的でしたが今なら CSS だけでも十分スライドショーに見える仕組みを作ることが出来ます。 この記事ではシンプルにフェイドイン・フェイドアウトで画像が切り替わるスライドショー作ってみます。下の方にデモも作りましたので参考にしてみてください。 作り方制限を緩めて作ることも当然可能なのですが説明をシンプルにするために、画像の形は正方形限定です。サイズに関しては制限はないですが width、height 属性はあった方がいいのでそろえた方が楽に HTML をかけると思います。画像の枚数も制限を付けて8枚です。 HTML<div class="photo-show"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <im
CSSだけでブルブル震わせる | q-Az
CSS だけで文字や画像をブルブル震わせてみます。 複雑な感じにブルブル震わせることも CSS を細かく記述すれば出来るのですが、なるべく短いシンプルな記述でブルブル震えるよう見える感じにしてみました。 CSS だけでブルブルCSS の animation を使って永久アニメーションをさせます。 HTML<span class="buruburu">ブルブル</span>class 名が「buruburu」の要素を作ります。 .buruburu { display: inline-block; animation: hurueru .1s infinite; } @keyframes hurueru { 0% {transform: translate(0px, 0px) rotateZ(0deg)} 25% {transform: translate(2px, 2px) rotateZ(
CSSだけでwebページをバウンド表示させる方法 | q-Az
CSS だけで web ページをバウンドをしているように表示させてみます。現在このページでもバウンド表示を実装しているのでビヨンビヨンとバウンドしながら表示されたと思います。 web ページ全体をするというと若干好みが分かれそうな表示ですが、全体ではなく一部の要素だったりマウスがホバーした要素だけなどであれば、デザインによっては効果的なものになるかもしれません。 webページ全体をCSSだけでバウンドさせるCSS の animaion と transform の scale 値を使います。scale で拡大率を指定しています。 body { animation: bound 2.2s ease-in-out; transform-origin: 50% 50vh; } @keyframes bound { 0% {transform: scale(0.1)} 12.5% {transfor
【時々更新】興味なく適当・不本意にやったアニメ主題歌、プロレス入場曲、推理小説、出演作などが一番の人気作になったクリエーターの一覧。 - INVISIBLE Dojo. ーQUIET & COLORFUL PLACE-
SF番組のヒーローを演じて有名になったがその後大成できず、今はファン相手にイベントでお金を稼ぎながらも内心自分が演じたヒーローのことを嫌っている俳優達が、番組を観ていた宇宙人から"本物"だと勘違いされたのを切掛に誇りを取り戻していく「ギャラクシー・クエスト」、今観たら泣いちゃいそう。 pic.twitter.com/nmGS620L0d— でるた (@delta0401) April 6, 2021 以下、ランダムに。 平沢進 長州力入場曲「パワーホール」 http://dic.nicovideo.jp/a/%E3%83%91%E3%83%AF%E3%83%BC%E3%83%9B%E3%83%BC%E3%83%AB パワーホールとは、プロレスラー長州力の入場曲である。 概要 プロレスラーの入場曲でもっとも有名な曲の一つ。作曲は平沢進、異母犯抄名義。バージョンがいくつかある。 この曲を依頼さ
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。 デモではFont Awesomeのアイ
![[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e52b762682773fbeb81c27963f72395fbbf5fea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052611.png)
Particleground demo
Particleground A JavaScript plugin for snazzy background particle systems Download
あのサイトとはひと味違う！こだわりマウスオーバー20連発 (1/2)
サイトを彩る多彩なアニメーション フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。 ページトップにあるシンプルなボタンにマウスオーバーすると、上から矢印のアイコンがスライドして下りてくる。注目したいのは、マウスがボタンから離れたとき（マウスアウト時）の動きだ。 よくある:hoverで実装したマウスオーバーのアニメーションは、マウスオーバー時とアウト時の動きを別々に設定できないため、必ず逆の動きになる。マウスオーバー時に上からスライドしてきたら、マウスアウト時には上へ戻る、といった具合だ。 ところが、Omisenseのボタンは、マウスアウト時にそのまま下にスライドを続ける。細かな違いだが、最近ではこういったマウスオーバーのアニメー
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
[CSS]アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation
classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい動きをアニメーションで与えるスタイルシートを紹介します。 ベルはリンリン♪、いいねは上下に、スピナーはぐるぐる動きます。 Font Awesome Animation 左はアニメーションのトリガーをページのロード時、右はホバー時にしたものです。 Font Awesome Animationの使い方 Step 1: 外部ファイル Font Awesomeと当スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-animation.min.css"> Step 2: HTML まずは、Font
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」:phpspot開発日誌
CSSやSVGで実装するローディングアニメーション - NxWorld
