calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

JavaScript無し!CSSで簡単に動きを実装するテクニックまとめ

JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。

PR
IT/WEB業界への転職なら
Sponsored Link

メタ言語でなく、CSSで見たい方は「View Compiled CSS」でコンパイルして見てください。

※CodepenのURLの末尾に「?editors=1100」を付与するとhtml/cssのみの編集画面で閲覧できるので、今回は全てのURL末尾に付与してます。

モーダルウィンドウ

チェックボックスを使わないタイプ。擬似クラスである:targetを使い、アンカーリンク(#シャープ)にスタイルを適用しモーダルウィンドウを表示しています。

.foo:target {
  color: red;
}

:target擬似クラスを利用すれば、JavaScriptを使わずライトボックス・タブや画像の切り替えなどが行えます。

:target 擬似クラスはある要素の表示・非表示の切り替えにも便利です。この方法で JavaScript を使わず、CSS だけで lightbox を作れます。:target - CSS | MDN

フリップ

こちらも:target擬似クラスを利用して、要素を回転表示させるrotate()を適用し、クリック時に奥側にフリップ(弾かれるような)回転するような動きを出してます。

.foo:target {
  transform: rotateX(90deg);
}

:target擬似クラスとCSSアニメーションを組み合わせれば、様々なエフェクトを作り出すことができます。

3d flip button

フルスクリーン スライド

vhはviewport heightの略で、親要素ではなく、ビューポートの高さに対する割合を示します。モバイルの向きなど気にせずに背景画像をブラウザにフィットさせることが出来ます。

全体を以下のように縦横をフィットさせています。

{
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

Ken Burns Effect fullscreen

スクロールと画像

sectionごとに背景画像を指定し、スクロールで背景画像を変化させるエフェクト。色は要素を重ねた時の見え方を変更できるmix-blend-modeを使ってオーバーレイさせてます。

section {
  background-size: cover;
  mix-blend-mode: overlay;
  background-attachment: fixed;
}

Smooth hue rotation on scroll

Gooey

粘性のあるようなエフェクトもCSSのみで表現可能。チェックボックス(type="checkbox")を利用。ユーザが要素をクリックすると変化する擬似クラスの:checkedに対して、要素の表示位置を移動させるtranslate()を適用して動かしてます。

Gooey Menu

グリッチ

アニメーションの流れを制御する@keyframesを使って動かしてます。transformプロパティのskew()でじょじょに傾斜変形させてユニークな動きを演出。

Glitch Effect

squiggly

殴り書きのような曲がりくねったフォントが、クネクネと永続的に動きます。こちらも上と同じく@keyframesによって動かしてます。

Squiggly Text

フロートラベル

フォーカスするとテキストボックスの中にあるラベルが消えず、浮くように上部に移動します。ソース内で使われている:validは擬似クラスでバリデーションの状態を示します。

:valid CSS 疑似クラス は、その内容がバリデーションにより type 属性の設定に従い正しく入力されている任意のinput要素にマッチします。これは入力内容の書式が正しい場合にその要素に異なるスタイルを適用し、ユーザに誤りがない事を伝えるのに役立ちます。:valid - CSS | MDN

Floating labels

マップマーカー

こちらはマップに使えそうなマーカー。繰り返し回数を設定するanimation-iteration-countプロパティにinfiniteを指定し、無限に動かしてます。

Map marker

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.