完全に機能するCSS3のみのコンテンツスライダーを作成する方法

コンテンツスライダーは、Webサイトをより動的にするための優れた方法です。 それらはセンスを追加し、正しく使用された場合、購入と戻るボタンの違いになる可能性があります。 通常、これらはjQueryまたはその他のJavascriptライブラリを使用して構築されます。 ただし、CSS3の登場に伴い、CSSのみを使用してCSS3を作成する方法を紹介します。

結果はこれまでに作成された中で最も意味のあるものではありませんが、それでも完全に機能します。

はじめにいくつかの簡単なHTML

		

			
			

			

			

			

			

			

			
			

				

					
					

						
ページ1

						
Lorem ipsum dolorは、何とかして座って、何とかしてください。

					

				

				

					
					

						
ページ2

						
Lorem ipsum dolorは、何とかして座って、何とかしてください。

					

				

				

					
					

						
3ページ

						
Lorem ipsum dolorは、何とかして座って、何とかしてください。

					

				

				

					
					

						
4ページ

						
Lorem ipsum dolorは、何とかして座って、何とかしてください。

					

				

				

					
					

						
5ページ

						
Lorem ipsum dolorは、何とかして座って、何とかしてください。

					

				

				

					
					

						
6ページ

						
Lorem ipsum dolorは、何とかして座って、何とかしてください。

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

確かに、それは怖いようです。 とても怖い。 これは地球上で最も意味のあることではないことを忘れないでください。 では、説明させてください。

すべてのコンテンツを保持する「 content-slider 」divがあります。 単に「 margin: 0 auto 」にして、忘れてしまいます。

次に、「 content 」divと「 nav 」ulの2つのセクションがあります。 コンテンツdivはすべてのページを保持するものであり、「nav」ulはさまざまなページにアクセスできるようにするものです。

ここで、「content」divのすぐ内側に、「 content-inner-1 」から「 content-inner-6 」までの6つのネストされたdivがあります。 これらの6つのdivはすべての魔法を機能させます、そして私は後で正確にどのように説明します。

魔法のCSS

 ＃content-slider {
font-family：arial;
幅：640px;
マージン：0自動;
マージントップ：100px;
}

＃コンテンツ {
オーバーフロー：非表示;
幅：640px;
高さ：480px;
-webkit-box-shadow：0px 0px 50px 10px＃c9c9c9;
-moz-box-shadow：0px 0px 50px 10px＃c9c9c9;
ボックスシャドウ：0px 0px 50px 10px＃c9c9c9;
}

＃content-inner {
幅：10000px;
高さ：480px;
}

.page {
幅：640px;
高さ：480px;
フロート：左;
}

私が言ったように、「 content-slider 」divに対して行ったのは、中央に配置し、ページの上部から100ピクセル移動することだけでした。

「 content 」のdivスタイルは非常に重要です。 「オーバーフロー」を「非表示」に設定しました。これにより、スライドが選択されるまでスライドが表示されなくなります。

さて、「 content-inner 」divはすべてのページを保持するものです。 それが10,000pxの幅を持っている理由です。 通常、javascriptは適切な幅を提供しますが、この場合、Javascriptを使用していません。

ページには幅と高さがあり、横に並べるために左にフロートされています。

これで、いくつかの一般的なスタイリングができました。 「 page-info 」と「 nav 」のスタイルを設定します。

 .page-info {
高さ：90px;
背景色：rgba（99、99、99、0.6）;
位置：相対;
margin-top：0px;
下：103px;
色：#dedede;
パディング-左：20px;
パディングトップ：10px;
}

.page-info h2 {
フォントサイズ：21px;
margin-bottom：10px;
margin-top：0px;
色：#fafafa;
}

.page-text {
フォントサイズ：15px;
}

ご覧のとおり、ページ情報を半透明にし、テキストを読みやすくするのは、単純なスタイルです。

次に、ボタンにいくつかの素晴らしいCSS3スタイルを追加します。

 。ボタン {
フロート：左;
背景：#bababa;
幅：16px;
高さ：16px;
-webkit-border-radius：8px;
-moz-border-radius：8px;
border-radius：8px;
マージン左：5px;
マージン右：5px;
}

.button：hover {
-webkit-box-shadow：インセット0px 0px 2px 2px＃d4d4d4;
-moz-box-shadow：インセット0px 0px 2px 2px＃d4d4d4;
ボックスシャドウ：インセット0px 0px 2px 2px＃d4d4d4;
}

.button：active {
-webkit-box-shadow：インセット0px 0px 2px 2px＃7a7a7a;
-moz-box-shadow：インセット0px 0px 2px 2px＃7a7a7a;
ボックスシャドウ：インセット0px 0px 2px 2px＃7a7a7a;
}

.button a {
表示ブロック;
幅：16px;
高さ：16px;
}

ボタンを丸くし、目玉を追加するためにドロップシャドウをはめ込みました。

最後に、魔法の材料をミックスに追加します。 ただし、その前に、これがどのように機能するかを説明します。

CSS3 :target pseudo-selectorを使用して、URLにある要素のスタイルを設定できます。 例えば：

 ＃例 {
可視性：非表示;
}

#example：target {
可視性：可視;
}

ここで、「http://www.example.com/index.html #example 」などのURLを使用している場合は、上記の「：target」スタイルが適用されます。 この場合、「example」divが表示されます。

この概念を使用して、JavaScriptのクリック関数を模倣できます。 ユーザーが「http://www.example.com/index.html#example」を指すリンクをクリックすると、スタイルが「example」に適用されます。

この場合、「：target」を使用してコンテンツスライダーを機能させます。 ユーザーがナビゲーションの6つのボタンのいずれかをクリックすると、JavaScriptバージョンの場合と同様に、「content-inner」が適切な位置にスライドします。

コードは次のとおりです。

 ＃content-inner-1：target＃content-inner {
-webkit-transition：すべての400msが容易になります。
-moz-transition：すべての400msが容易になります。
-o-transition：すべての400msが容易になります。
移行：すべての400msが容易になります。
マージン左：0px;
}

＃content-inner-2：target＃content-inner {
-webkit-transition：すべての400msが容易になります。
-moz-transition：すべての400msが容易になります。
-o-transition：すべての400msが容易になります。
移行：すべての400msが容易になります。
マージン左：-640px;
}

＃content-inner-3：target＃content-inner {
-webkit-transition：すべての400msが容易になります。
-moz-transition：すべての400msが容易になります。
-o-transition：すべての400msが容易になります。
移行：すべての400msが容易になります。
マージン左：-1280px;
}

＃content-inner-4：target＃content-inner {
-webkit-transition：すべての400msが容易になります。
-moz-transition：すべての400msが容易になります。
-o-transition：すべての400msが容易になります。
移行：すべての400msが容易になります。
マージン左：-1920px;
}

＃content-inner-5：target＃content-inner {
-webkit-transition：すべての400msが容易になります。
-moz-transition：すべての400msが容易になります。
-o-transition：すべての400msが容易になります。
移行：すべての400msが容易になります。
マージン左：-2560px;
}

＃content-inner-6：target＃content-inner {
-webkit-transition：すべての400msが容易になります。
-moz-transition：すべての400msが容易になります。
-o-transition：すべての400msが容易になります。
移行：すべての400msが容易になります。
マージン左：-3200px;
}

結論

6つの「 content-inner-[number] 」divがあり、各divはページに対応しています。 6ページは6divです。

「content-inner」divは各「 content-inner-[number] 」divの子であるため、これらの「 content-inner-[number] -inner- [number]」divのいずれか6つが:targetedの場合、「 content-innerそれに応じてcontent-inner 」div。

各ページの幅は640ピクセルなので、「 content-inner 」divの左マージンを640の倍数に設定するだけです。

これらの「 :target 」スタイルを機能させるには、それらを指すリンクが必要です。 したがって、ページの下にある「 nav 」ul。

「 content-inner 」を実際にアニメーション化するために、もちろんベンダープレフィックスを付けた通常のCSS3アニメーションプロパティを提供します。

さて、あなたはそれを持っています：完全に機能的ですが、セマンティックではありませんが、コンテンツスライダー。