インタラクティブにアニメーションする背景を作成できるWebアプリ・「Naker.Back」
Naker.Backはインタラクティブにアニメーションする背景を作成できるWebアプリです。 たまに見かけるやつですね。もともと動いてるけどマウスを乗せると動きに応じてパララックスな演出をする、みたいなのとかを作れる、というもの 僕の語彙力がアレなので見てもらった方が早いですね サンプル Naker.Backで作ったサンプルです。用意されたマテリアルを使い、設定は何も考えず作ったもので2分もかかっていません 使い方は吐き出されたコードに指定したidの要素で包括するだけです。例えば上のデモなら、作成時にtestというIDを指定したのでid=”test”という要素の中にコードをコピペすれば表示されます マテリアルは任意のものを使う事も出来ます。設定は動く方向や背景色、グラデーションも可能、マテリアルの数や動作スピードなどの設定が可能です 難点は吐き出されるコードがNaker.BackのCDNを
パララックス効果を表現できる背景をオンラインで簡単に生成出来るWebサービス・Parallax Background Builder - かちびと.net
去年よく話題に上った、マウスを動かす 事で視差効果（パララックス）を表現す るやつをオンラインで生成出来る、という Webサービス・Parallax Background Builder のご紹介。こういうのも簡単に生成出来る ようになったんですね。簡単ではありま すが。 マウスに応じて複数レイヤーを動かす事で視差効果を表現できるパララックスな背景を簡単に作成できる、というWebサービス。凝った物は出来ませんが、無料でちょっと背景にスパイスを与えたい、という方には重宝するのでは無いでしょうか。 こういうやつ。素材はこのサイトのを使って動作テストしました。レイヤーごとに動きを決めてスクリプトコードを発行してもらって、みたいな流れです。ただし、スクリプトコードはこのサイトのを使うのでクライアントワーク等では利用出来なさそうですね。一時的なキャンペーンサイトとか個人サイトとかならいいかも。 ↑
スクリプト初心者でも簡単にパララックスのエフェクトを作成できるオンラインサービス -Parallax Background Builder
複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を生み出すパララックスを簡単に、そして確認しながら作成できるオンラインサービスを紹介します。 JavaScriptやCSSの初心者でも簡単にできると思います。 Parallax Background Builder Parallax Background Builderの使い方をざっくりと説明します。 Step 1: 適用範囲の選択 まずは、パララックスの適用範囲を選択します。 左がページ全体、右がdiv要素のみ、です。カーソルを動かすとパララックスの動作が分かります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
