スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
スクロール連動アニメーションの実装例 – TAKLOG
スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
Chromeのリモートデバッギング / Virtual boxのローカル開発環境にあるアプリを確認する
Virtual Boxのローカル開発環境で動くアプリを、Google Chromeを通してAndroidの実機で見る&デバッグする方法。なんかややこしい…ので適当にイメージ図にしました。個人的にはVagrant使ってますが、使ってなくても同じです。 すでにVirtual boxで開発環境が構築されていて、アプリがブラウザで確認できる状態を前提としています。 また、Mac/PCとAndroidが同じWifiに接続されている必要があります。 また、開発中のアプリへは dev.your-app.com で接続すると過程します。 で、こんなことができて便利。 USB接続 普通にMac/PCとAndroidを繋ぎます。 パソコンのChromeを立ち上げて、chrome://inspect/#devicesにいきます。 AndroidのChromeも立ち上げると、下のようになってるはず。 プロキシの設
iPadをPCやMacの外付けディスプレイにできる「Duet Display」を使ってみた
手持ちのiPadやiPhoneをUSBケーブルで接続するだけでWindows PCやMacの外付けディスプレイとして活用できるアプリが「Duet Display」です。2014年にMac版がリリースされて以来、登場が待たれていたWindows版もついにリリースされたので、この機会に使ってみることにしました。 Duet Display - Ex-Apple Engineers Turn Your iPad into a Second Display for your Mac http://www.duetdisplay.com/ Duet Display on the App Store on iTunes https://itunes.apple.com/us/app/duet-display/id935754064 というわけで、編集部で使っているWindowsノートPCとiPad Ai
IEDiagnosticsAdapter - IEのデバッグにGoogle ChromeのDevToolsを使おう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のWebブラウザではデバッグツールが標準搭載されています。一番使いやすいと思うのはGoogle ChromeのDevToolsでしょうか。その他FirefoxもFirebugの流れがあって使いやすいです。正直デバッガーが使い勝手悪いと開発効率が大幅にダウンします。 IEでWebサイトの検証、デバッグをしないといけないのにデバッガーの使い勝手が悪くて進まない…そんな方はIEDiagnosticsAdapterをインストールしてみましょう。 IEDiagnosticsAdapterの使い方 IEDiagnosticsAdapterはプロキシとして動きます（とはいえ設定は不要です）。まずIEDiagnosticsAdapterを立ち上げておきます。 そしてGoogle Chromeで
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
ノンプログラミングで流行りの「スクロールするサイト」が作れる！jQueryプラグインを作ってみました
ノンプログラミングで、スクロールするサイトを作れちゃう！ そんなすばらしいjQueryのプラグイン、jQuery Scrollable Linkを作ってみました。 プラグイン自体は、jQueryが書ける人ならそれほど難しいものではないのですが、jQueryを全く知らない方や、初心者のWebデザイナーさんに使って頂けるとうれしいです！。 デモ こんな感じのサイトがノンプログラミングで作れます。 デモを見る 使い方は簡単！ このプラグインは、ページ内リンクに、scrollableというクラスを設定することで、自動でスクロールアニメーションに変換します。 1) まず、以下の2行をheadタグのの中に入れます。 jquery.scrollablelink.js は、このページからダウンロードして配置してください。 <script src="http://ajax.googleapis.com/aj
別々に開いたブラウザ間でエレメントをリアルタイムで交差させるNode.jsアプリのサンプル
日曜日なので軽めのネタ。別々に 開いているブラウザの間で、エレメ ントを交差させるNode.jsアプリが サンプルとして公開されていました。 いろいろ出てきますね・・ サンプル動画があったので見てみたんですが、ちょっとワクワクしますな。 From browser to browser with Node.js 左右にブラウザを2つ起動してあります。楽しそうｗデュアルモニターみたい。当たり前でしょうけど別のブラウザでもいけるみたいですね。 githubでコードが公開されていますのでご興味のある開発者の方はご覧になってみては如何でしょう。 CrossBrowse 本題と、ここまでちょっと実験も兼ねてまして。実は以下の件について。 YouTube、特定サイトが選んだ動画を一覧できる「おなじみの動画」ページを発表 米Google傘下のYouTubeは6月10日（現地時間）、Webパブリッシャーが自
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://pagescroller.com/