独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ - ICS MEDIA
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。本記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて
こんなやり方が！フォトショップ時短テクニックや役立つヒント・裏技15個まとめ
こんなやり方が！フォトショップ時短テクニックや役立つヒント・裏技15個まとめ あまり知られていない、だれでも簡単な便利テクニックが集合 フォトショップをもっと使いこなしたい、と思っている人は多いでしょう。 しかし、フォトショップ経験が長くなってくると、いつも同じやり方ばかりで、新しい方法を取り入れていない、ということが結構あります。 そこでこの記事では、フォトショップを使う上で欠かせない、時短テクニックや役に立つヒント・裏技15個をご紹介します。 「こんなやり方があったのか」と思ってしまう、あまり知られていない、だれでも簡単な実用テクニックを中心にあつめました。 トーンカーブ二重使いの、直感的な写真レタッチ術 カンバスの向きをくるくる回転 ホットキーと隠しスライダーで不透明度を調整 スマートオブジェクトの調整はいつでも編集可能 選択したレイヤーのみ新規レイヤーに結合する方法 柔軟で思い通り
早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。 たとえばこんなときに 複数の単位で移動距離を指定 See the Pen Multiple Transform Functions 1 by dsktschy (@dsktschy) on CodePen. See the Pen Multiple Transform Funct
ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単＆実用的】
ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を
これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown
カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。 ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。 クイックフリップ 高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。 タイムスナップ タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。 サーバー同期 追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。 Tickエンジン Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。 対応ブラウザは、下記の通りです。 Chrome Firefox Edge Opera Safari 9+ iOS
コインのようにくるくる回転するフリップアニメーションを作ってみよう【いろんな動きを作ってみようシリーズ】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 今日は「スマホやタブレットで見たときだけ、コインがフリップでめくれるようなアニメーション」を作っていきたいと思います。 前回の記事と組み合わせると、LIGブログのメンバーページと同じ仕様になります。 画像を用意 前回同様、表と裏の画像を用意します。 HTML 前回のHTMLを少しだけ修正します。JSのトリガーとなるclassを追加します。 <div class="flip js-flip"><!-- js-flipを追加 --> <div class="flip-inner js-flip-inner"><!-- js-flip-innerを追加 --> <div class="front"> <img class="thumbnail" src="https://82mou.github.io/src/images/coin-omo
イラストレーター 線の束をランダムに回転させる方法 - by Takumi Hirashima
Adobe Illustrator で線の束をランダムに回転させる方法を紹介します。 例えば、ちょっと変わった格子模様などを作りたい時に便利な方法です。 線の束をランダムに回転させる方法 線の束をランダムに回転させる方法 線の束をランダムに回転させるには、対象のオブジェクト（今回は複数の線のオブジェクト）を選択後、 メニューバーの「オブジェクト」＞「変形」＞「個別に変形」を選択します。 「個別に変形」は、選択した複数のオブジェクトを個別に変形することができます。 今回はランダムに回転させたいので、回転させたい上限の角度を入力。 次に「ランダム」のチェックをオンにします。そのほかのチェックは適宜変更を加えてください。 例えば、90度+ランダムと入力すると、現在のオブジェクトの位置を0度として、0〜90度までをランダムに回転させることになります。 まとめ Adobe Illustrator で
Textyle.js - シンプルなテキストエフェクトライブラリ MOONGIFT
単純にテキストを表示しただけでは誰も気付きません。大事な文言であれば色やサイズを変えたりして、目立つ仕組みが必要です。それでももっと目立たせたい、ユーザの目に届けたいならばアニメーションしてみてはいかがでしょうか。 あまり派手なものは嫌われるかも知れませんので、シンプルなものが良いという方はTextyle.jsを使ってみましょう。 Textyle.jsの使い方 アニメーション例です。文字の色がグラデーションしています。 文字が回転したり、スライドしながら表示されるデモもあります。 Textyle.jsはシンプルなテキストエフェクトを実行できるJavaScriptライブラリです。jQuery依存なので注意してください。派手なアニメーションではなく、テキストをちょっとだけ目立たせたいと言った場合に使ってみると良さそうです。 Textyle.jsはjQuery/JavaScript製のオープンソ
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
コインのようにくるくる回転するホバーアニメーションを作ってみよう【いろんな動きを作ってみようシリーズ】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 今日は「コインがホバーで回転するアニメーション」を作っていきたいと思います。 LIGブログのメンバーページでも使われていますが、メンバーページのものはスマホでフリップした際のアニメーションもつけているので、ちょっと高度です。 今回紹介するものは、ホバーのみのアニメーションです。 画像を用意 表と裏の画像を用意します。とりあえず自分の画像を使うことにします。 コーディングの考え方 コインの表と裏をposition: absolute;で重なり合うようにする コインの裏は、めくったときに反転してしまうので、transform: rotateY(180deg);であらかじめ回転させておく .flip-innerにpreserve-3dをつけて、子要素に3Dの概念を適用する コイン両面にbackface-visibility: hidden;
CSS 画像を回転させる方法 - by Takumi Hirashima
CSS で画像を回転させる方法を紹介します。 例えば、画像を表示するときの演出で使用するのにおすすめのテクニックです。 CSS で画像を回転させる方法 CSS で画像をX軸回転させる方法 CSS で画像をY軸回転させる方法 CSS で画像をZ軸回転させる方法 画像の回転をアニメーションさせる方法 回転する画像を立体的（3D）にする方法 hover した時に画像を回転させる方法 CSS で画像を回転させる方法 画像を回転させる方法 CSS の transform プロパティ rotate() を使います。 例えば、画像を時計回りに45度回転させるには rotate(45deg) を指定します。 CSS の指定は次のようになります。 img { transform: rotate(45deg); } 指定できる数値は 0 から 360 の間でマイナスの指定も可能です、数値の最後には単位 deg
JS Cloudimage 360 View - 自由に360度させられる商品ビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 正面からの商品画像だけで購入を決めるのは難しい製品は多数あります。左右や後ろからの写真を見てはじめて自分の納得いくものかどうか判断するでしょう。しかしそのために動画を見るのは面倒です。 今回紹介するJS Cloudimage 360 Viewは様々な角度から撮影した商品画像を使って360度回転できるウィジェットを生成します。 JS Cloudimage 360 Viewの使い方 デモです。画像は72枚用意されています。 ルーペ機能もあります（デスクトップWebブラウザのみ）。 下に薄い線をつけたり、影をつけられます。 自動回転もできます。 JS Cloudimage 360 Viewを使うためには、まず画像を用意する必要があります。36枚程度であれば十分そうで、その場合は10度ごと
商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View
商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に
CSSだけで3Dなカルーセル
Result 数年前に見かけた懐かしい感じの3Dなカルーセルです。 CSSだけで出来る時代になりましたね。 css#slideshow {/*全体*/ margin: 0 auto; padding-top: 50px; height: 600px; width: 100%; background-color: #ddd; box-sizing: border-box; } .entire-content {/*カルーセルの見栄え。perspectiveで奥行きを設定する*/ margin: auto; width: 190px; perspective: 1000px; position: relative; padding-top: 80px; } .content-carrousel {/*各画像を包括、アニメーションを設定*/ width: 100%; position: abso
8 Best jQuery 360 Degree Image Rotation Plugins | SmashingApps.com
by Akhter · June 5, 2017 8 Best jQuery 360 Degree Image Rotation Plugins Another creative and awesome jQuery collection is posted only for you guys. In this, post we are presenting 8 best and very useful jQuery 360 degree image rotation plugins. There is no doubt that 360 degree images are more impressive and allow the user a complete or detailed analysis about the products or article. So, without
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
回転させたPDFを保存する方法
回転させたPDFを保存する方法を紹介します。 １．問題点 Adobe ReaderでPDFファイルを開き、向きが正しくなかったので90℃回転させ、正しい向きに直しました。 Adobe Acrobatであれば回転させた状態のものを保存することができますが、Adobe Readerでは回転させたPDFを保存することができません。 これではファイルを開くたびに回転させる必要があるので面倒です。 ということで、回転させたPDFを保存する方法を紹介します。 ２．回転させたPDFを保存する 回転させたPDFを保存するには、「Smallpdf」を利用します（後で気がつきましたが日本語ページもあるようです）。 Smallpdf 「Smallpdf」のサイトにアクセスして「Rotate PDF」をクリック。 回転させたいPDFをドラッグ＆ドロップするか「Choose file」をクリックしてファイルを選択し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 回転の基準点を変更する方法 - by Takumi Hirashima
CSSでこんな実装ができるとは！ 美しい光がきらり✨とボーダーに沿って回転するボタン -Button Shimmer Tricks
https://codepen.io/YusukeNakaya/pen/OGwmOV