YouTube動画をヘッダーの背景に設定する方法
Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基本WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。
スクロールに応じて背景を変更する - かちびと.net
Result jQuery $(function() { var secTopArr = new Array(); var moveFlug = false; var allHeight = $('body').outerHeight(true); var bgImg = new Array('#000','#eee', '#555', '#ccc', '#999'); ////各sectionの位置 $('div.section').each(function (i) { secTopArr[i] = $(this).offset().top; }); var current = -1; //現在位置がセクションの位置より大きい場合は背景切り替え $(window).scroll(function () { for (var i = secTopArr.length-1; i>=0; i
jQueryで背景画像を全画面表示する
jQueryで背景画像を全画面表示する 最近ではjavascriptでも表現できることが飛躍的に増え、Flashサイトのようなリッチなサイトも多くなってきましたね。 ということでFlashサイトと聞いて一番最初に思い浮かべそうな背景画像の全画面表示というのをjQueryで作成してみたいと思います。 投稿日2010年11月30日 更新日2011年04月26日 html+cssの準備 背景画像を全面表示するっていうタイトルですが、cssのbackgroundにはサイズを指定するプロパティがないので、気持ち悪いけど画像は普通に配置します。 html <img src="101121_2.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1><a href="#">jQueryで背景画像を全画面表示する。</a></h
jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
背景におもしろい効果を！六角形のアニメｰション「Hex」 - jQueryプラグインまとめ - Webkaru
六角形のアニメーションを実装するプラグイン「Hex」を紹介します。 jQueryプラグイン「Hex」このプラグインを使えば、たくさんの六角形がふわーっと流れるようなアニメーション効果を実装することができます。 オプションでは六角形が流れる方向、色、回数、遅延などを設定することができます。 Webサイト全体の背景やタイトルの背景に使うとおもしろいかもしれませんね。 それではデモページをご覧ください。 「Hex」のデモ ソース（ HTML + jQuery ）<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hex - jQueryプラグイン</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="h
JQueryで背景画像を動かすアニメーション効果
JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。 この記事を元に少しアレンジしてサンプルを作成したので紹介します。 これから紹介するサンプルはwebOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」とアメブロで使用してあるスクロールで背景画像を別々に動かすパララックス効果のコードをプラスしてサンプルを作成してあります。 それではサンプルを紹介していきます。 雲の背景画像をループさせアニメーション 雲の背景画像をループさせ、まるで雲が動いているかのようなアニメーション効果をもたらします。 コードは下記のような感じになります htmlコード <div class="skinBody"> この中が記事などの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
