Help us understand the problem. What is going on with this article?

【現役Vueエンジニア厳選】完全オリジナルの画像エフェクト"総まとめ23選"(コピペOK)

スクリーンショット 2020-07-07 18.05.39.png

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
*動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ

Webデザイナーに興味のある方はこちらも合わせてどうぞ↓
スクリーンショット 2020-08-08 16.41.27.png


clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション3選

動きは下の画像のような感じになります

1. 【ぼやけるアニメーション】clip path : polygon+filter : blur

clip-path-image-animation1.png

2. 【美しいアニメーション】clip path : polygon+filter : grayscale contrast saturate

clip-path-image-animation2.png

3. 【オーロラアニメーション】clip path : polygon+filter : grayscale saturate hue-rotate

clip-path-image-animation3.png

:point_down:コードを確認する

スクリーンショット 2020-07-07 17.37.32.png


【解説付き】マテリアルデザインをコピペで実装!CSSスライダーアニメーション6選(filter編)

動きは下の画像のような感じになります

1. hoverで画像が半透明に?超便利なスライダーアニメーション

click-animation-sliders-filter-opacity.png

2. hoverで画像の色が暴れ出すスライダーアニメーション

click-animation-sliders-filter-hue-rotate.png

3. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション

click-animation-sliders-filter-grayscale.png

:point_down:コードを確認する

スクリーンショット 2020-07-07 17.42.27.png


絶対失敗しないナビゲーションメニューサンプル3選

動きは下の画像のような感じになります

1. シンプルだけど洗練されたスライダーアニメーション

click-animation-sliders.png

2. blurでぼやけながらスライドするスライダーアニメーション

click-animation-sliders2.png

3. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション

click-animation-sliders3.png

:point_down:コードを確認する

スクリーンショット 2020-07-07 17.43.47.png


hoverで画像の色が暴れ出す!filter: hue-rotateとtransitionでCSSエフェクト3選

動きは下の画像のような感じになります

1. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト

css-effects-hover-filter-hue-rotate-spin.png

2. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト

css-effects-hover-filter-hue-rotate-spin2.png

3. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト

css-effects-hover-filter-hue-rotate-blur.png

:point_down:コードを確認する

スクリーンショット 2020-07-07 17.48.16.png

CSSだけ!hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

動きは下の画像のような感じになります

1. 階段のように背景が現れるhoverエフェクト

animation-image-1.png

2. 上からブロックが落ちてくるように背景が現れるhoverエフェクト

animation-image2.png

3. 斜め上からスクリーンのように背景が現れるhoverエフェクト

animation-image3.png

4. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト

animation-image4.png

:point_down:コードを確認する

スクリーンショット 2020-07-07 17.53.25.png

hoverとtransitionでオシャレなCSS画像エフェクト4選!(背景がスっと表示される)

動きは下の画像のような感じになります

1. フワッと背景が現れるhoverアニメーション

hover-animation-image-fadein.png

2. 背景が徐々に画像全体へ広がるhoverアニメーション

hover-animation-image-box.png

3. 扉が閉まるように背景が現れるhoverアニメーション

hover-animation-image-door.png

4. 丸い背景が徐々に画像全体に広がるhoverアニメーション

hover-animation-image-squere.png

:point_down:コードを確認する

スクリーンショット 2020-07-07 17.56.56.png

twinzvlog_yk
フロントエンドメイン/Vue.js/CSS/Rails/駆け出しエンジニアに向けてコピペだけで実装できるおもしろデザインメモ/気に入ったら使ってください/批判反論その他心ない行為を発見した場合は即座にブロックします
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした