思わずスクロールしたくなるwebサイト参考14選｜アニメーションや仕掛けが超秀逸 | トゥモローゲート
こんにちは。 先日のオフサイトミーティングで新たな組織図が発表され、改めて自分がフロントエンドエンジニアだということを自覚したトゥモローゲート意匠制作部フロントエンドエンジニアのタカウマです。 2、3ヶ月前とはうって変わって最近はフロントエンドの業務が増え（デザイナーからコーダーに仕事が回ってくる時期）、頭の中がコードで埋め尽くされております。そういう時期は参考になるブックマークサイトを徘徊したりします（普段からしろよって意見は全部スルーしますのであしからず。） 僕はゴリゴリのシステムエンジニアではなく、フロント周りの実装やアニメーションなどの「表現」やサイトとしての「企画」が好きなので、注目するポイントもそっち寄りだったりします。 今回はそういったアニメーションや企画が秀逸な「うまい」webサイトをピックアップして紹介していきたいと思います（記事を書く時間がないからではないですよ）。「う
CSSのkeyframesとanimationをプレビューを見ながら簡単な操作で編集、調整できるOSS・「Animation Studio」 - かちびと.net
Animation StudioはCSSのkeyframesとanimationをプレビューを見ながら簡単な操作で編集、調整できるOSSのWebアプリです。 右ペインのメニュー、keyframesタブでn%及び変化の内容を設定し、animationタブでanimation-nameやduration、そのほかタイミングをベジェ曲線を使ったマウス操作でcubic-bezierを設定、TargetタブでCSSとHTMLを書いてアニメーションさせる要素を設定、Exportタブでコードをコピペする、という流れになります。 単純にアニメーションのセッティングが出来るだけでなく、ややこしいcubic-bezierを直感的な操作で設定出来たり任意のCSSとHTMLを指定出来たりと実践的なアプリという印象でした。 使い慣れるまでも特に学習コストはかかりませんし、導入も難しくないのでCSSアニメーション開発
アニメーションの実装が劇的に簡単になるFLIPテクニック - Katashin .info
2023年7月10日CSS,JavaScript,アニメーション,デザインパターンアニメーションの実装はややこしいからCSS Transitionでできなければ実装したくない、そう思っていませんか？FLIPというテクニックを使うことで、CSS Transitionだけでは実装できないケースでも簡単にアニメーションを実装することができます。 FLIPとは #FLIP とは First, Last, Invert, Play の頭文字から取られた用語であり、アニメーションをこの4つのステップに分割して行うテクニックです。例えば、以下のようなリストの項目に追加、削除、並べかえができるUIに対して、簡単にアニメーションを付けることができます。 上のデモで追加、削除、並べかえを行った時に、項目の座標移動がアニメーションすることがわかると思います。これは CSS Transition だけでは実装する
keyframesの中でeasingを設定する | cly7796.net
CSSのkeyframesでイージングを個別に設定できることを知らなかったので、方法をメモしておきます。 サンプルコード ボールがバウンドするようなアニメーションを実装してみます。 まずは対応前のコードです。 HTML <div class="ball"></div> CSS .ball { position: relative; top: 100px; left: 100px; width: 40px; height: 40px; border-radius: 20px; background: #000; animation: ball 2s linear infinite; } @keyframes ball { 0% { transform: translateY(-50px); } 20% { transform: translateY(0px); } 38% { transfo
君はなぜCSSスプライトアニメーションを使わないのか？ - Ticketnote
読み飛ばして良いまえがき Webサイトetc.で、ちょっとしたアニメーションを使おうとした時、おそらくアニメーションGIFやAPNGが真っ先に候補にあがり、これは確かに簡単に扱えて便利です。ただ、1回の再生のみ、開始と終了をちゃんと制御するという条件になると話は少々変わってきます。 アニメーションGIFの場合、ちゃんと再生開始を制御しようとすると、キャッシュが邪魔をする環境があるので、JavaScript etc.でキャッシュよけが必要になります。また、再生終了に関してもあらかじめ何かで取得していた再生時間から、おそらく終わったであろうタイミングで処理をさせるということになります。 また途中で一時停止や、その一時停止したタイミングからの再生etc.も難しいです。 さて一方、CSSスプライトで行うアニメーションは、外部ファイル自体は単なる静止画で、それをCSSを使って上手くパラパラまんがにす
トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Motion - A modern animation library for JavaScript and React
様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできる・「AnimatiSS」 - かちびと.net
Epic Spinners