コインのようにくるくる回転するホバーアニメーションを作ってみよう【いろんな動きを作ってみようシリーズ】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 今日は「コインがホバーで回転するアニメーション」を作っていきたいと思います。 LIGブログのメンバーページでも使われていますが、メンバーページのものはスマホでフリップした際のアニメーションもつけているので、ちょっと高度です。 今回紹介するものは、ホバーのみのアニメーションです。 画像を用意 表と裏の画像を用意します。とりあえず自分の画像を使うことにします。 コーディングの考え方 コインの表と裏をposition: absolute;で重なり合うようにする コインの裏は、めくったときに反転してしまうので、transform: rotateY(180deg);であらかじめ回転させておく .flip-innerにpreserve-3dをつけて、子要素に3Dの概念を適用する コイン両面にbackface-visibility: hidden;
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
【CSS】画像をマウスオーバーしたときに効果を与えるメモ4つ | web屋tM
昔はjavascriptでやってた画像をマウスオーバーしたときに、何らかのアクションを与える効果。それが今ではCSSだけでできるようになりました。このブログでも使ってる効果を紹介します。 画像をマウスオーバーしたときに「半透明」にする img { transition: 0.5s; } img:hover { opacity: 0.6; transition: 0.5s; } 半透明にするプロパティopacityを使って、マウスオーバーしたときに半透明にします。時間効果を与えるtransitionもつけて、ふんわりと変化。 画像をマウスオーバーしたときに「拡大」する <div class="img-block"> <img src="" alt="" /> </div> 画像を固定のブロックで囲みます。 .img-block { width: 300px; height: 300px;
[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック
ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Serviсes</a> <a href="#">Contacts</a> </nav> CSS ナビゲーションの各アイテムはflexboxで配置し、くるくるっとしたアニメーションはtransformで設定します。 body { font-family: "Open Sans Condensed" sans-serif; display: -webkit-flex; display: -ms-fle
![[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a1595bf6696cf508a760fed6fa8ed736c886b2b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015010802.gif)
[CSS]シャドウもくるっと！ふわりと浮かせた画像をくるっと回転させるスタイルシート
HTML 画像とキャプションのテキストをfigure要素で配置し、divで内包します。 <div class="flip-3d"> <figure> <img src="yacht.jpg" alt=""> <figcaption>Yacht</figcaption> </figure> </div> <div class="flip-3d"> <figure> <img src="bee.jpg" alt=""> <figcaption>Bee</figcaption> </figure> </div> シャドウ用の余分なマークアップは、必要ありません。 CSS まずはfigure要素を3Dにし、各画像をfloatで配置します。 div.flip-3d { perspective: 1200px; width: 30%; float: left; } div.flip-3d figure
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
画像のズームと、ドラッグによる連続表示を使った360度ビューが可能なECサイト向けjQueryプラグイン・Dopeless
ECサイトに良さそうなjQuewryの プラグイン・Dopelessのご紹介 です。画像のズームと、ドラッグ 操作で360度ビューを再現できる というもの。タッチデバイスに も対応しているようです。 ライセンスが非商用CCで、商用はライセンス購入のプラグインですが、ズーム機能と360度ビューがセットになっているのは素敵です。 画像をドラッグで動かすと、四方八方から撮影されたプロダクトを連続表示し、360度ビューを可能にしています。また、ズーム機能も付いていて、タッチイベントにも対応しているとの事。画像はPHPで自動ロードする仕様です。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text
[JS]動画もFlashも使わずに、商品をぐるぐるとアニメーションで回転させるスクリプト - fc.tape
CSSスプライトを使って、映画のフィルムを再生するように画像をアニメ化するjQueryのプラグインを紹介します。 操作は下記キャプチャのようにボタンをはじめ、ドラッグにも対応しており、アニメーション再生のスムーズ機能も備えています。 デモで使用している画像の一部 この画像をCSSスプライトで表示し、アニメーションをコントロールします。 画像の作成には「ImageMagickを使用すると、フォルダ内の全ての画像からスプライト用の一枚の画像を生成できます。 実装の基本 アニメーションを配置するdiv要素、サイズなどを指定するスタイルシート、コントロールするスクリプトが基本構成です。 HTML <div class="tape"></div> CSS .tape { width: 420px; height: 315px; background: url(tape.png) 0px 0px no
[CSS]パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート
ホバー時：回転完了 実装 HTML パネルは、通常時の一枚画像、ホバー時のインフォメーションをdiv要素で内包します。 <div class="wrapper"> <div class="item"> <img src="images/contact.png"> <span class="information"> <strong>Contact Form</strong> The easiest way to add a contact form to your shop. </span> </div> </div> 実装のイメージは下記のようになります。 通常時は「front side」の画像が表示され、ホバー時に「bottom side」のインフォメーションが表示されます。 CSS まずは、ラッパーのスタイルです。 perspectiveを使用して3Dの奥行きを与え、transfor
[CSS]ホバー時にアイコンをくるっと回転させるCSS3アニメーションのテクニック
アイコンをマウスホバーすると、くるっと360度回転させて、ユーザーの目を引きつけるCSS3アニメーションのテクニックを紹介します。 デモページ 実装 HTML HTMLは非常にシンプルで、各ソーシャルメディアのリンクをdivタグで内包しているだけです。 <div class="spinning_icons"> <a href="http://www.twitter.com/paulund_" class="twitter" title="twitter">Twitter</a> <a href="http://www.twitter.com/paulund_" class="delicious" title="delicious">Delicious</a> <a href="http://www.twitter.com/paulund_" class="digg" title="digg
[jQuery] iPod のクリック ホイール コントローラを模倣する jQuery プラグイン
[jQuery] iPod のクリック ホイール コントローラを模倣する jQuery プラグイン Permalink URL http://www.magicvox.net/archive/2010/04202045/ Posted by ぴろり Posted at 2010/04/20 20:45 Trackbacks 関連記事 (0) Post Comment コメントできます Category 誰もが知っている iPod のぐりぐりスクロールできてポチポチクリックできるアレです。とりあえず、動作デモを見てもらった方が早いと思います。jQuery のプラグインとして実装されており、ホイールの画像を用意するだけで、簡単にクリック ホイール コントローラを模倣することができます。 目次 使い方 動作環境など
![[jQuery] iPod のクリック ホイール コントローラを模倣する jQuery プラグイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/26568084e9850c769c1be7fcfdcc9f0398b026f2/height=288;version=1;width=512/http%3A%2F%2Fwww.magicvox.net%2Farchive%2F2010%2F04202045%2Fcover.jpg)
[JS]画像の商品をドラッグとホイールで360度回転させるスクリプト -Reel
img要素で配置した画像をマウスのドラッグとホイール操作で、商品や風景をぐるっと360度回転させるスクリプトをPetr Vostřelから紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/YusukeNakaya/pen/OGwmOV
ThreeSixty
alessandroferrini.it