サイト制作メモ

スライドショーの画像を切り抜いたように表示する

投稿日:

よくあるスライドショーで
上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと
フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。

次回制作時に忘れないようにメモ。

サンプルページ

1.まずは全てを囲むdivを作成
2.中の要素は2つ(上下切り抜く場合は3つ)
 切り抜いたpng画像とスライドショー
3.それぞれにスタイルシートを適応

スタイルシート。
全体の指定はこれ。

上に置く画像のスタイルシートはこちら
下に置きたい場合、top:0;をbottom:0;に変更

これで1つのdivの中に
スライドショー・画像の順番に重なっているので
切り抜いた間からスライドショーが見えます。

あ、スライドショーの.jsや.cssはあらかじめ設定しておいてください。

-サイト制作メモ

執筆者:

関連記事

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url(‘画像を指定’); background-size:cover; でできますが、 いやいや、一画面だけでなくそ …

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml [crayo …

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ …

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 ぼやけないしキレイ! …

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 無限ループスライダー で、ここからcss …