【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
Welcome to Anitype Anitype asks a simple question: what if letters could move? For thousands of years, letters have sat static on the page, but thanks to today's modern devices, they could do a lot more — they could dance and jump and wriggle their way across the screen. And you could help decide how they move. Anitype invites you to animate letters with JavaScript, so we can begin to see what an
はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「background」に割り当てましょう。 css #main-img { width: 800px; margin: 0 auto; background: #9bd6e9 url("bg2.png"); } #main-i
自分で独自のアニメーション効果を作成するための関数です。 この関数でポイントになるのは、style属性の変化です。例えば”height”,”top”,”opacity”のようなstyleを、どのような値で完了させたいかを渡してやることで現在の値から変化させていきます。 ※ これらの値は、キャメルケースで表記されなければなりません。例えばmargin-leftは、marginLeftのように記述します。 例えば現在のheightが10pxで、animate関数に{height: “100px”}と渡した場合、高さが10pxから100pxに徐々に変化していく効果が得られます。これは数値のみに適用されますが、それ以外にも” hide”,”show”,”toggle”などの文字列が指定された場合にも、対応した効果を作成してくれます。 そもそも数値型の値をとらない属性(backgroundColor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く