スクロールに応じて文字や背景画像が動かせる「ScrollMagic / TweenMax」の備忘録
ランディングページやプロモーションサイトでよく使われている動きのあるページを制作した時の事を忘れないように備忘録です。よく見かけるスクロールに応じて文字や背景画像が動くというやつ。 appleのiMac Proの紹介ページのようなイメージです。 https://www.apple.com/jp/imac-pro/ ここまで長いページを組むと頭痛くなりそうですが、よく見ると中盤以降は同じ動き。ただ最初のiMacがこちらを向く3Dは良く分かりませんw。今回はここまでではなく汎用性のある文字が浮き出てくる感じやコンテンツブロックが次々に出てくる感じとメニューバーが上部で追従するものを書いておきます。 スクリプトは素人なので、後々分かりやすいようにリスト化せず書きます。 今回利用するのは、「ScrollMagic」と「TweenMax」です。とても使いやすくjs苦手なデザイナーでも簡単にフロントエ
スクロール連動のライブラリ『ScrollMagic』の基本的な使い方 - Qiita
ScrollMagicとは ScrollMagicはスクロール連動のためのJavaScriptライブラリ。本記事執筆時点のバージョンは2.0.5。 以下のようなことができます。 スクロール位置をトリガーにして要素のアニメーションを行う スクロールバーの動きに合わせて要素を変化させる 要素を特定のスクロール位置に留める（pin） スクロール位置に合わせて要素のCSSクラスを入れ替える Examplesで利用例とソースコードを確認できます。 基本的な利用方法 スクリプト読み込み CDNから読み込む場合。 debug.addIndicators.min.jsはデバッグ用。 <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnj
はじめてのAjax(jQuery) 2018年版 - Qiita
2018/03/21 2018年版に再編集 はじめに：Ajaxとは Ajaxとは「Asynchronous JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリティの向上やサーバ負荷の軽減に繋がります。AngularJSなどで作成したシングルページアプリケーションはこの技術を中心に構成されています。 簡単にまとめると次のようになります。 ページ遷移をさせず（非同期処理で）コンテンツを書き換えられる 他の処理と同時並行で、サーバとやりとりができる また、jQueryでのAjax実装が手軽なので、今回はjQuery、ローカルサーバにMAMPを使用しています。 最初は、pythonやnodeなどのワンライナーでのローカルサ
異なるドメインのURLからデータを参照する方法 - Cross-Origin Resource Sharing
2014/1/16 に W3C Recommendation になった Cross-Origin Resource Sharing (以下 CORS) 仕様について、サーバ実装およびスクリプト実装をどのように CORS 対応すれば良いかのエントリです。CORS 対応のユーザエージェントを実装しなければいけないという奇特な人は W3C 仕様の 7 章あたりを参照してください。 10月に CORS in Action も発売されるようです。W3C 仕様は表現や文章構成がアレなんでこっちに期待したいですね。 導入 サイト間でのコンテンツまたは Web 機能の意図しない利用を防止する目的で、Ajax を使用した origin (ドメイン) の異なるサイトへのリクエストはユーザエージェント (ブラウザ) によって制限されています。CORS はリソース (データや Web API) の提供側がそのデー
クロスドメインアクセスを理解してWeb APIを楽しく使おう
[CEDEC 2021] 運用中タイトルでも怖くない！ 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例Naoya Kishimoto
jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ | ARAKAZE NOTE
JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい！」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 （まあ、そんな簡単な動
JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ
サイト更新情報 2006/12/06 よく使われているページを検索窓から簡単に辿れるようにしました。(検索窓に「prototype」と入力) 2006/11/27 JavaScript入門/応用サイトJavaScriptistオープン！ 2006/11/23 試して確認できるJavaScriptオンラインエディタを公開 2006/11/20 JavaScriptリファレンス、逆引きサンプル集を公開 2006/11/19 JavaScriptライブラリ活用ページ公開 2006/11/15 JavaScriptistベース機能の構築完了 過去のサイト更新情報
LTSV FAQ - LTSV って何? どういうところが良いの? - naoyaのはてなダイアリー
LTSV って何? Labeled Tab-Separated Values という、テキストのフォーマットの仕様です。CSV や TSV や JSON そのほかと同じ、テキストデータのフォーマット名。主にログ、特に httpd のアクセスログなどに適用すると便利です。 仕様は http://ltsv.org にまとまっています。随時更新中です。 LTSV は単なるログのフォーマットであって、それ以上でもそれ以下でもありません。 LTSV ってタブ区切りで値に名前を付けただけのもの? はい、そうです。 これが 127.0.0.1 - frank [10/Oct/2000:13:55:36 -0700] "GET /apache_pb.gif HTTP/1.0" 200 2326 "http://www.example.com/start.html" "Mozilla/4.08 [en] (
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery]でcssプロパティを動的に追加、変更、削除する - Qiita![[jQuery]でcssプロパティを動的に追加、変更、削除する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e28908ac9b9959fef7026fb9250b7af90da5995/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCalF1ZXJ5JTVEJUUzJTgxJUE3Y3NzJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgzJTkxJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgyJTkyJUU1JThCJTk1JUU3JTlBJTg0JUUzJTgxJUFCJUU4JUJGJUJEJUU1JThBJUEwJUUzJTgwJTgxJUU1JUE0JTg5JUU2JTlCJUI0JUUzJTgwJTgxJUU1JTg5JThBJUU5JTk5JUE0JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03MmMyZDAzNmU3ZGQ4NjEzYjg2YzZjMDBiZDdkMTY0OQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXpUZXJhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01YjUzOTM5ZTFlZGJiOThjNjI0OTliNGI1NDY2N2Y0ZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0fa2209207d0cd39648d80aa68a9cc91)