サイト制作メモ

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

投稿日:2017年8月24日 更新日:

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

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

サンプルページ

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

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

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

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

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

- サイト制作メモ
-,

関連記事

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 まずはhtml 。 何でもいいので適当なクラスか何かあたえておいてください。 [crayon-5b3013e09578579 …

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け …

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenu あまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。 オプションで色々設定もできるみたいなので …

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

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

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

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