サイト制作メモ

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

投稿日:

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

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

サンプルページ

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

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

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

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

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

-サイト制作メモ

執筆者:

関連記事

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 …

no image

WordPress と Facebookの連携が表示されない原因

dddwordpressのテーマ「xeory_extension」を使っていた時 初期設定でいくつかの項目を入力するとfacebookとの連携ができるようになってたのでテストサイトで設定項目を入力する …

“Swiper”を使ったスライドで左右に画像を表示する

JQueryなしで動く”Swiper”という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイ …

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

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

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。

fix cover あとはsection …