月別: 2016年4月

スクロールしている時の背景画像にパララックス効果を加える方法

jquery

最近よく見かけるスクロールしていくと固定された背景画像が変わっていくページを作ってみました。最近よく見かける割に、すごい新しい手法を使って作ったわけではないので、工夫次第で、今ある技術でもっといろんな表現が出来るかもなぁと再確認しました。

作り方は完全に我流なので、こういう作り方の方がスマートっていうやり方があれば是非とも教えてください。

デモ

続きを読む

jQueryで下までスクロールした時にフッターに固定されるボタンを作る方法

jquery

Webデザインをしていて、ページトップへのボタンの見せ方が気になることはありませんか?

最近のデスクトップサイトではページトップ戻るボタンを付けているところが減っているように感じますが、スマホサイトではまだまだ見かけます。

今回フッタいい感じにフィットするボタンを作りましたのでご紹介します。

デモ
続きを読む

お問い合わせフォーム不要?facebookページと連動したチャットボックス「Speaklyn」

speaklyn

ほぼすべてののサイトに設置されているお問い合わせフォーム。
ユーザとの接点を持つ上で非常な存在になりますが、フォームを設置するのってそんなに簡単じゃないですよね。WordpressであればContact form 7などプラグインを使って、容易に設置することも出来ますが、自作する場合、設計を考えたり、構築にも時間がかかります。セキュリティ面のことも考えないといけません。

ユーザとの接点として重要ではあるフォームですが、ユーザ側からするとフォームの入力はとても面倒ですよね。入力項目が多くなればなるほど、入力のハードルは高くなります。

今回は上記のような悩みを解決出来そうな、Speaklynというサービスをご紹介したいと思います。

無料でしかも多言語対応のチャットボックス「Speaklyn」

speaklyn

Speaklynはfacebookページのメッセンジャーをサイトに埋め込むことが出来るサービスです。
facebookページを使うので、当然facebookページは必要になります。またユーザもfacebookのアカウントを通してメッセージを送るので、facebookのアカウントの無いユーザはメッセージを送ることが出来ませんし、アカウントを知られたくないユーザにとってはハードルが高いようにも感じます。なので、使える状況はある程度限定されるかもしれません。アカウントの無いユーザ用に通常のフォームも設置した方がよいでしょう。

設置方法

設置方法は非常に簡単です。

1, アカウント作成

必要な項目を入力します。英語ですが、そんな難しい設定はないので、だいたいの意味はわかるのではないでしょうか。

Speaklyn 設定

2, ソースをコピー&ペースト

設定が完了したら「Installation」→「General」をクリックして、グレーの背景の部分をコピーします。

Speaklyn Installation

コピーしたソースを</body>タグの前にペーストしたら完了です。

補足

ページにいいねボタンがあると同じクラスを使っているからか、ボタン側の表示崩れることがあります。当サイトの場合、下記のようにCSSで幅と高さを強制することで解決させました。ちょっと力技ですが。

今後は修正されるかもしれませんが、現段階ではCSSで強制する、もしくは併用して使うのを避けた方がいいかもしれません。

WordPressの固定ページのビジュアルエディタを非表示にする方法

WordPress

WordPressでは投稿ページ、固定ページを編集する時にビジュアルエディタとテキストエディタの2つのエディタが用意されています。

ビジュアルエディタ

ここのことです。

この2つの大きな違いとして、テキストエディタではHTMLを書くことが出来ます。

投稿では直接HTMLを書くことは少ないですが、固定ページはブログのようにページがどんどん増えていくということは少ないので、割とがっつりHTMLを書いたりします。

固定ページは頻繁に更新しないページで使うことが多いです。なのでお客様がさわることはそうそう無いのですが、それでもお客様の中には「自分で修正してみたい」という果敢なお客様もいらっしゃいます。

その時にお客様がある程度HTMLの知識をお持ちだといいですが、そうじゃない場合もあります(なのでビジュアルエディタなるものが存在するわけですが)

続きを読む

jQueryを使って簡単な視差(パララックス)効果を加える方法

パララックス

以前、当サイトで視差効果(パララックス効果)についての記事を書きました。

スクロールした時に背景やコンテンツにそれぞれ微妙に変化を加えて遠近感を感じる

パララックス効果と一言でいっても、見せ方は無数にあります。
横に景色が流れていくものや、画像がどんどん大きく表示されるもの、逆にどんどん小さくなっていくもの、最近ではスクロールしていくと背景にバナーが見え隠れるするサイトも見たことがあるのではないでしょうか。

その中で今回は複数の背景を使って奥行きを感じられるようにする方法をご紹介します。
完成イメージはこんな感じです。

デモ

なんか桜が上に舞い上がってる感じになっていますが、細かいツッコミは無しでお願いします(笑)

1, 画像を用意

今回は3枚の画像で奥行きを表現します。この時、奥の画像ほど、色を薄く、花びらを小さくするとより遠近間があるように見えます。

薄め&小さく

2, HTML & CSSで背景を設定

HTML

CSS

heightは中にコンテンツが無いので仮で入れています。実際は必要ありません。

3, jQueryを設定

今回は奥の画像を遅くなるようにします。

レイヤー

jQuery

値を大きくするほどスクロールした時、ゆっくり動くようになります。