左から・右から・真ん中から画像が際立つ CSS アニメーションの紹介です。アイキャッチ画像や本文中の画像、ランディングページの画像など、いろいろな画像に使えます。 サンプルは、便宜上アニメーションの再生回数を無限にしています（提示している CSS のアニメーション回数は 1 回です）。 共通の HTML 。 <div class="img-wrap"> <img /> </div> 左から徐々に表示するアニメーション。 CSS 。 .img-wrap { overflow: hidden; position: relative; } .img-wrap::before { animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer

CSSのtransitionプロパティは、マウスオーバー時のアニメーションを指定できるプロパティです。 WEBデザインにちょっとしたアクセントを加えたい時に便利なCSSですが、何らかの原因で上手く機能しないことがあります。 しかし、その原因のほとんどは、コーディング上のほんの小さなミスだったりします。 今回は、transitionが効かない時の原因とその対処法についてまとめてみました。 transitionの基本的な使い方 まずtransitonの基本的な使い方を簡単におさらいしておきましょう。 transitionはマウスオーバー時の色や大きさ、位置などの変化に「時間」を設けるためのプロパティです。 マウスオーバー時の変化にはCSS疑似クラス:hoverを使いますが、transitionが指定されていない場合、変化前後の切り替わりが一瞬です。 transitionを追加することによって「

ボタンや画像にカーソルを乗せた時の反応って大事ですよね。リンクするエリアにカーソルを合わせた時に、カーソルが指のアイコンに変わったり、テキストの色が変わったりすれば、カーソルが乗ったという事が認識しやすくなります:)。 それに加えて、ちょっとしたエフェクトがあれば、温度や感触や、世界観まで伝えられるかも。 ふわっとする 下のサンプルみたく、:hoverを使ってスタイルを指定しておけば、カーソルが乗った時に、そのスタイルが適用されます。 けどそれだけだと、カチッと切り替わるだけ。 a:hover { color: #dc6688; text-decoration: inherit; } サイトの雰囲気にもよるけれど、もちょっとだけ柔らかい印象にしたいなって時には、ふわっとするとよいかもです。文字色の変わり方と、下線の消え方を滑らかにすることで、ふわっとした感じになります:)。 この切り替わり

CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

はじめに こんにちは！NNCの大土です。 今回の記事では、アニメーション表現で使用するCSSのtransition・animationプロパティについて、またCSSだけで実装できるアニメーション表現・作例をご紹介していきます。 WEBサイトでただ静的コンテンツが並んでいるだけではなく、表現に動きをつけてあげることによって、目を惹く・印象に残りやすいデザインを作ることができるアニメーション。 さまざまなWEBサイトがあるなかで、こういったアニメーション表現はそのサービスや企業オリジナルの雰囲気を演出し、差別化にも役立つため、もはや必須と言っても良い技術になっています！ また、動きの表現というとjavascriptを使用するイメージを持っている方も多いと思いますが、CSSだけで再現できるアニメーション・動きも実はたくさんあります。 紹介するものは全てHTML・CSSのコードを載せていますので、

タイトルの通りです:) 判定の考え方にも色々あるため（要素が1pxでも入っていればいいのか？画面の中央に来たくらいがいいのか？など）、そのあたりも網羅していきたいと思います。 色々な判定の組み合わせ一覧 画面の下部 × 要素の上部 要素が1pxでも画面に入ったら、という判定です。 var scroll; var winH = $(window).height(); var objTop = $('.obj').offset().top; $(window).on('scroll', function(){ scroll = $(window).scrollTop(); if(scroll >= objTop - winH){ //ここに処理 } }); var scroll; var winH = $(window).height(); var objH = $('.obj').outer

はじめに どうも、NNCの石上です。 前回に引き続き、ちょっと高度なアニメーション演出を紹介していきます。 スクロールと連動したサイズ変更 以下の動画をご覧ください。 最初は小さかった文字が、画面に入ってくるにつれて大きくなっていったのがわかると思います。このようにスクロールと連動して文字サイズを変更する演出を作ります。 <section class="l-section p-jon"> <ul class="p-jon__list"> <li class="p-jon__item">Twitter</li> <li class="p-jon__item">Facebook</li> <li class="p-jon__item">Instagram</li> </ul> </section> $('.p-jon__item').each(function(){ var $win = $(

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！ スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"

〒606-8172 京都府京都市左京区一乗寺河原田町48−３

transition-timing-functionプロパティは、トランジションの進行度（速度とタイミング）を指定します。CSS3におけるtransition-timing-functionプロパティの意味と使い方、値の指定方法、サンプルコード、使用例について解説します。

こんにちは、ナカムラです。 今回はCSSで角度が変わらない斜めの背景の作り方をご紹介します。 ウィンドウ幅いっぱいに、なおかつ斜めになっているデザインはよく使われます。 やり方はいろいろあると思いますが、今回はclip-pathを使ってみたいと思います。 clip-path - CSS: カスケーディングスタイルシート | MDN 実現したい条件 背景はウィンドウ幅いっぱいに表示する 斜めの角度は変わらないようにする コンテンツのボリュームが変わっても高さが変動するようにする DEMO See the Pen 角度が変わらない斜めの背景 by Nakamura (@takayo-nakamura) on CodePen. HTML .sectionの中には.section_backgroundと.section_innerの要素があります。 .section__backgroundは背景用

「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方を紹介しました。そして、実装編の前編となる記事では、HTMLメインで実装できるお手軽な実装方法を紹介しました。 実装編の後編となる本記事では、JavaScriptメインに実装する方法の基本事項、およびパフォーマンス考慮についてのポイントを紹介します。 「Lottie=軽い」と思っていませんか？　一般的にウェブサイトの「軽い」「重い」には、読み込みデータ量の大小を指す場合と、動作負荷でのもたつきを指す場合の2つの意味があります。確かにデータ量的にはLottieは軽いといえますが、実はLottieのアニメーションは表示や動作の負荷的に重くなりがちです。

みなさん、はじめまして！ デザイナー・モーショングラファーのよしつぐ峻平といいます。 今回軽い気持ちで執筆をお引き受けしましたが、他の参加クリエイターさんたちが豪華すぎて、ビビっております。 私...

以上です。 少し細かく見ていきましょう。 考え方 1ではscrollTop()を用いてスクロール量を取得して変数に代入しています。 2ではcssで指定している円のスケールの初期値（1）に、スクロール量を50で割ったものを足した値を出しています。（この値で円のスケールを変更します） 50で割る理由ですが、そのままスクロール量の値を足してしまうと円があっという間に何十倍もの大きさになってしまうためです。 例えば、10px分のスクロール量がそのまま初期値に足された場合、下の図のように.circle{transform:scale(11)}となってしまいますね。（1 + 10 = 11倍） 10px分のスクロール量を50で割ってから初期値に足した場合、下の図のように.circle{transform:scale(1.2)}となるという考え方です。（1 + 10 / 50 = 1.2倍） アニメーシ

Sample #7 | jQuery × CSSの合わせ技 最後に今回の集大成を作りましょう。先ほど作ったCSSのみのサンプルに、jQueryを駆使してよりリッチな動きを加えていきます。 まずはjQueryで各要素を操作しやすくするために、Sample #6のHTMLに以下のように追記していきます。 <section id="first" class="content"> <p class="logo sprite" data-speed="-1.5" data-offsety="100">jQUery x HTML5 x CSS3</p> <article> <h1>Parallax sample.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p> </article> </section

サイトコーディングをしていると、お客様やデザイナーさんから良く求められる「ふわっと出てくるやつにして！」なあの表現を今回はご紹介します。 いろいろなやり方がありますが、私が思う「一番簡単な方法」という点でまとめたので、まだ実装したことが無いという方はぜひトライしてみてください。 正確には、アクセス時には非表示にして、スクロールするに伴って可視領域に入ったものから表示させていく動きという感じでしょうか。 詳しいコードの前に、まずは完成形を見ていきましょう。 スクロールすると下左右から出現してくる 左右に画像と文字を配置して、交互に見せるよく見る感じのデザインですね！ 少し、要素を減らしてシンプルにしてみましょう。 良い感じですね！ 今回の記事ではこの「ふわっと出現」をマスターしていきましょう。 記事最後にコードをまとめているので、コードだけ知りたいという方は実装サンプルコード01へスクロール