サイト制作メモ

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

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

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回制作時に忘れないようにメモ。 サンプルページ 1.まずは全てを囲むdivを作成 2.中の要素は2つ(上下切り抜く場合は3つ)  切り抜いたpng画像とスライドショー 3.それぞれにスタイルシートを適応
<div id="content"><!--任意のidやclassを与える -->


	<div class="ue"></div><!--スライドショーの上の部分 -->

<!-------------------------------------------------------
この中にスライドショーのタグを入れる
---------------------------------------------------------->
	<div class="slide-container">
                            
		<div class="slide-wrapper">
			<!-- Slides -->
			<div class="slide"><a href=""><img src="画像のパス"></a></div>
			<div class="slide"><a href=""><img src="画像のパス"></a></div>
			<div class="slide"><a href=""><img src="画像のパス"></a></div>
			<div class="slide"><a href=""><img src="画像のパス"></a></div>
		</div>

	</div>
    
<!-------------------------------------------------------
スライドショーここまで
----------------------------------------------------------> 

	<div class="sita"></div><!--スライドショーの下の部分 -->
         
         
</div> 
スタイルシート。 全体の指定はこれ。
#content{
	width:1200px;/* 任意の横幅を指定 */
	height:600px;/* 任意の高さを指定 */
	position:relative;
	margin:0 auto;}
上に置く画像のスタイルシートはこちら 下に置きたい場合、top:0;をbottom:0;に変更
.ue{
	display:block;
	background:url(..画像のパス)0 0 repeat-x;
	background-positioin:center top;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	height:120px;/* 画像の高さを指定 */
	margin:0 auto;
	}
これで1つのdivの中に スライドショー・画像の順番に重なっているので 切り抜いた間からスライドショーが見えます。 あ、スライドショーの.jsや.cssはあらかじめ設定しておいてください。

- サイト制作メモ
-,

関連記事

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

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

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 まずはhtml 一般的な入れ子構造のリストです。 <heade ...

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

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

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、CSS3を使う際に使用するプロパティの前につけるキーワードです。 サイト制作者には当たり前に思えるベンダープレフィックス。 今までどうしてこれを付けないといけないかがよく分かってい ...

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する