【JavaScript】jQuery不要で動く［wow.js］でスクロール連動型アニメーションを実装。
【JavaScript】jQuery不要で動く［wow.js］でスクロール連動型アニメーションを実装。 最近はjQuery不要でも動くスクリプトが流行りのように感じていますが、気のせいでしょうか？ 今日紹介する［wow.js］も、jQuery要らずで実装可能な優良スクリプト。 容量も8KBと軽量で、別途配布されている「Animate.css」との組み合わせで様々なアニメーション効果を付与することができます。 アニメーションが開始されるスイッチはウィンドウのスクロールに依存しており、いくつかのオプションを設定することでタイミングやアニメーションの持続時間、繰り返される回数などを指定できます。 実際に［wow.js］を使ったサンプルサイトを用意しましたので、まずはコチラをご覧ください。 wow.js：サンプルサイト 画面をスクロールさせると、それに合わせてコンテンツがアニメーションするのが確認
現場で使えるアニメーション系JSライブラリまとめ（2022年版） - GSAP, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ（2022年版） GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジ
scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介（脱jQuery）
当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。もともとこの機能をJavaScript（jQuery）で独自に実装していました。今回のこのサイドバー固定/解除機能をCSSの「position: sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。今回CSSの「position: sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。今回はこの「position: sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。 はじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています
【CSS】position: stickyでスクロールに追従する要素を作る | misoblog
当ブログの右側のサイドバーと下部のシェアボタンは、スクロールしても固定されて付いてくるようになってます。 これまでは、この手の仕組みはjQueryで実装してましたが、今回はCSS3で新たに追加された「position: sticky」を使って実装してみました。 position: stickyとはpositionプロパティの新しい値です。 「position: sticky」と位置（top, right, bottom, left）を指定して、固定したい要素が指定した位置にくると「fixed」のように振る舞い、それ以外だと「relative」になる、という感じです。 一応、以下に簡単なデモを作ってみました。 See the Pen position: sticky by miso (@misodtm) on CodePen. このブログでは下記のように指定してます。 HTML <div c
[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js
画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb）スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他のファイルには一切依存しません。 レスポンシブ対応、ブレイクポイントは簡単にカスタマイズできます。 HTMLは非常にシンプルな構造です。 CSSトランジションで動作します。 シンプルなイベントAPIを備えています。 Macy.jsのデモ 実際の動作は、デモページで楽しめます。 動作は非常に軽快で、快適です。
![[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4215e0c2d56437668b0e944846344e0e97841024/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017081801-01.png)
รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง
7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับไม่ได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่เรามีให้เฉพาะสม
HTMLとCSSだけ！要素の表示・非表示を切り替える方法
今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思います。デモ スクリプト <script src="jquery.min.js" type="text/javascript"> <script src="jquery.leanModal.min.js" type="text/javascript"> <a rel="leanModal" href="#div787">Edit</a> <div id="div787"><<モーダルウィンドウ内に表示する要素>></div> <script type="text/javascript"> $(function() { $( 'a[rel*=leanModal]').leanModal({ top:
[JS]スマホにも対応！ページをスクロールした際、要素をアニメーションで表示する軽量スクリプト -t-scroll
スマホやタブレットに対応、もちろんデスクトップにも対応、ページをスクロールした際に、要素にさまざまなアニメーションを簡単に適用できる単体で動作する軽量(4KB)のスクリプトを紹介します。 jQueryなど、他のスクリプトやスタイルシートは一切不要です。 カスタマイズ性 45種類の豊富なオプションが用意されており、初心者にも簡単、上級者には強力。 jQueryは無し ECMAScript6で実装された単体のライブラリ。 SASS/CSS3 Sassも揃っており、コンパイルされたCSSですぐに使い始めることができます。 Gulp Gulpによって構築されています。 サポートブラウザ クロスブラウザ対応（IE10+, Firefox, Safari, Opera, Chromeなど） npm node.jsで簡単にt-scrollを設定可能。 t-scrollのデモ デモは豊富に用意されており、
![[JS]スマホにも対応！ページをスクロールした際、要素をアニメーションで表示する軽量スクリプト -t-scroll](https://cdn-ak-scissors.b.st-hatena.com/image/square/19cccebb836cb072e66fe90dfa650befa0a80b2c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017060501-01.png)
フロントエンドエンジニアなら押さえておきたい！最近登場した注目のJavaScript＆CSSライブラリ8選
Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。 なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。 しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。 今回は、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきます。 中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。 最近登場した注目のJavaScript＆CSSフレームワーク 1. AOS https://michalsnik.github.io/aos/ AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふ
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい！
テーブル（表組み）をかっこよく、使いやすく表示するJavaScriptライブラリーはたくさんありますが、決定版になりそうなのが「Tabulator」です。JSONデータを簡単に読み込めるので、更新が必要なサイトやアプリにおすすめ。 標準HTMLのテーブル（table）は、複数の基本的なデータをレイアウトするのにとても便利ですが、テーブルにもっとほかの使い道がないでしょうか。外部APIからデータを取得したり、テーブルをソートあるいは編集可能にしたりする必要があるなら、もう少し気の利いたものが必要です。 思い当たることがあるなら、Tabulatorはおすすめのライブラリーです。Tabulatorは複雑なインタラクティブなテーブルの構築を簡単にするために設計された軽量なjQuery UIプラグインです。数行のJavaScriptで、ほぼすべてのデータソースをきれいにフォーマットされたインタラクテ
Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順） アクセシビリティ （英: Accessibility） Accessibility Plu
リッチなタイポグラフィを実現するjQueryプラグイン10選
jQuery プラグインを使うことで、高度なアニメーションや、魅力的なデザインを簡単に実現することができます。今回は Web サイトの表現をよりリッチなものにするテキスト系の jQuery プラグインを紹介します。 FitText 親要素のサイズによってフォントサイズをフレキシブルに変更できるプラグインです。デモサイトでは、画面のサイズの拡大・縮小によってフォントサイズが変更されることが確認できます。オプションでテキストの最小・最大サイズなどを設定することも可能です。 DOWNLOAD / DEMO CircleType.js テキストをカーブさせたり、円形にしたりできるプラグインです。RAIDUS を設定することができ、ウィンドウサイズによって動的に RADIUS を変化させることもできます。CircleType.js のファイルサイズは 2KB しかないので、非常に軽量なプラグインです
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
【くるくる】カルーセルを実装できる評価が高いjQueryプラグイン5選
「なんかあのくるくる横にスライドしていく機能を付けたい！」という要望は制作案件には頻出です。 さて、カルーセルを実装するjQueryプラグインはいくつもありますが、今回はJavaScriptに特化した検索サイトJavascripting.comから評価が高いものを紹介します。 参考：【入門】jQueryの導入方法から使い方まで！わかりやすく解説します カルーセルとは カルーセルとは、遊園地の回転木馬や回転式コンベアなどの意味を持つ英語の名詞です。（cf.carousel）Webのくるくる回転するような動きをするパーツに対しても使われます。 ただ、Web技術に詳しくない人にはカルーセルと呼ぶよりもスライダーと呼んだ方が通じます。実際、カルーセル系のjQueryプラグインにはsliderと名前が付くものもたくさんあり、呼び方はどっちでもいいのかもしれません。 評価が高いカルーセルjQueryプ
CSS初心者にも簡単に使える！スクロールに連動するさまざまなエフェクトを実装できるスクリプト -AOS
スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。 jQueryは不要で、非常に軽量のライブラリです。 実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
脱jQueryのためにしたこと - Qiita
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
Web制作の実装や勉強に役立つ便利なチートシートのまとめ
