ホームページ > 記事 > ウェブフロントエンド > html5 css3 を使用してスライダー切り替え効果を実現 JavaScript css_html5 チュートリアルのスキルに別れを告げる
html5 css3 を使用してスライダー切り替え効果を実現 JavaScript css_html5 チュートリアルのスキルに別れを告げる
- WBOYオリジナル
- 2016-05-16 15:50:221469ブラウズ
さて、前回、できるだけ早くいくつかの記事を埋め合わせると言いましたが、平気で約束を逃してしまいました。記事を投稿してからほぼ1か月が経ちましたが、本当に憂鬱です。最近は基本的に次から次へとプロジェクトが決まっていて、暇なときに適切なテーマが見つからなかったり、テーマが詰まっていると時間が取れなかったりします。 。そこで、私が一定期間悩んできた問題についての知識をまとめ、時間のあるときに一つ一つ深く勉強し、記事にまとめて共有することにしました。
本題に入りますが、スライダーに関しては、これまでは、関連する切り替え効果を実現するために CSS と JS が使用されてきました。 html5 css3 を使った実装について皆さんが議論していると聞きましたが、私自身は実装したことがありません。さて、今回は css3 をいじる時間があります。実際、私も Weibo のメッセージに惹かれ、他の人が達成した素晴らしい結果を見て、自分もやってみたいという衝動に駆られました。
1. レンダリング 
以前の js で実現した効果とあまり変わりませんが、全体的な雰囲気は非常にエレガントです。 CSS3 の強みは、非常に少ないコードを記述するだけで比較的複雑な効果を実現できることです。ただし、この例も完璧ではありません。2 つの画像を切り替える場合、中央に画像がある場合、CSS3 アニメーションの実行中にその画像が表示されるため、比較的効果がありません。しかし考えてみてください、これは純粋な css3 によって実現される効果であり、js で実装された複雑な html 構造の変更はここでは見られないため、上記の効果は単純に css3 だけで実現するのは困難です。
2. HTML 構造 >
<入力チェック type="radio" name="slider" id="slider1"> ;
上記のコードは、入力ラジオ グループを含むメインの HTML 構造です。この例では、これが重要な役割を果たしています (これが非表示にしたくない理由です。本当のヒーローは舞台裏にいるべきではありません）。
下のスライダーには表示する必要のある画像が含まれており、内側の余白を制御することでさまざまな画像を表示できます。
コントロールは、画像の左側と右側にある切り替え矢印です。なぜ 5 つデザインする必要があるのかについては心配しないでください。念のため言っておきますが、2 つだけで十分です。この例では js を使用してスイッチングを実装します。
最後にアクティブになるのは、画像の下にある小さなクリック ボタンです。クリックすると、閲覧したい画像を直接選択して、サムネイル効果をデザインすることもできます。
3. CSS スタイル シート
コードをコピーします
コードは次のとおりです。 🎜>@charset utf-8;
/* common */
body{background: #ddd;overflow-x: hidden;}
#bd{width: 960px;margin : 100px auto ;max-width: 960px;}
/* module: sliders */
#sliders{
border-radius: 5px;
box-shadow: 1px 1px 4px #666; 🎜>パディング: 1%;
背景: #fff;
}
#overflow{
幅: 100%;
#sliders inner{
width: 500%;
transiton: すべて 1 のリニア;
-webkit-transition: すべて 1 のリニア;
#sliders 記事{
float: left; 🎜>幅 : 20%;
}
#sliders 記事 .info{
不透明度: 0;
カラー: #666; 🎜>フォントファミリー: Arial;
トランジション: 不透明度 0.1 秒イーズアウト;
-webkit-transform: 不透明度 0.1 秒; >}
#sliders 記事 .info h1{
font-size: 22px;
font-weight: 太字
margin: 0 0 5px;
#sliders 記事 . info a{
color: #666;
text-decoration: none;
}
/* モジュール: コントロール */
高さ: 50px;幅: 100 %;
マージントップ: -25%;
#controls label{
幅: 50 ピクセル;
>不透明度: 0.3;
カーソル: ポインタ;
}
#controls label:hover{
不透明度: 1;
}
/* モジュール: アクティブ */
# active{
width: 100%;
margin-top: 23%;
#active label{
display: inline-block; 🎜>幅: 10px;
高さ: 10px;
背景: #bbb;
#777; :hover{
background: #ccc;
}
/* 入力チェック済み変更スタイル */
#slider1:checked ~ #active label:nth-child(1),
#slider2 :checked ~ #active label:nth-child(2),
#slider3:checked ~ #active label:nth-child(3),
#slider4:checked ~ #active label:nth-child(4 ),
#slider5:checked ~ #active label:nth-child(5){
background: #333;
}
#slider1:checked ~ #controls label:nth-child(5 )、
#slider2:checked ~ #controls label:nth-child(1)、
#slider3:checked ~ #controls label:nth-child(2)、
#slider4:checked ~ #controls label:nth -child(3),
#slider5:checked ~ #controls label:nth-child(4){
表示: ブロック;
フロート: 左;
背景: url(. ./img /prev.png) no-repeat;
margin-left: -70px;
#slider1:checked ~ #controls label:nth-child(2),
#slider2 :checked ~ #controls label:nth-child(3),
#slider3:checked ~ #controls label:nth-child(4),
#slider4:checked ~ #controls label:nth-child(5 ),
#slider5:checked ~ #controls label:nth-child(1){
表示: ブロック;
フロート: 右;
背景: url(../img/next.png ) no-repeat;
margin-right: -70px;
}
#slider1:checked ~ #sliders 記事:nth-child(1) .info,
#slider2:checked ~ #sliders記事:nth -child(2) .info,
#slider3:checked ~ #sliders 記事:nth-child(3) .info,
#slider4:checked ~ #sliders 記事:nth-child(4) .info,
#slider5:checked ~ #slidersarticle:nth-child(5) .info{
opacity: 1;
transition: すべて 0.6s イーズアウト 1s;トランジション: すべて 0.6 秒イーズアウト 1 秒;
#slider1:checked ~ #sliders .inner{
margin-left: 0;
}
#slider2:checked ~ #sliders .inner{
マージン左: -100%;
}
#slider3:checked ~ #sliders .inner{
マージン左: -200%;
# slider4:checked ~ #sliders .inner{
margin-left: -300%;
#slider5:checked ~ #sliders .inner{
margin-left: -400%; >}
上記の CSS コードは本当に量が多くて複雑であることは認めますが、非常に素晴らしい効果が得られます。書き終えたとき、CSS3 の巨大な魔法に感銘を受けました。 。 。
ここでのコードの前半は、主にスライダーの構造を設計するために使用され、丸い角や影などの美しいデザインが含まれています。後半は主に、画像の切り替えやコントロール ボタンの切り替え時にダイナミックな効果を実現するためのアニメーション効果です。ただし、最も重要なことは、画像切り替え機能を実際に実現する下部の css3 セレクターの使用です。この例ではセレクターが非常に重要な役割を果たしていると本当に思います。なぜなら、これは私が過去に CSS3 を学習したときに無視していたものだからです。 CSS3 の強みは角丸、影、変形、アニメーションだと常々感じていましたが、このコードは CSS3 においてセレクターがいかに重要であるかを示しています。一部の複雑なロジックでは、これらの CSS3 セレクターを使用すると、想像を絶する効果が得られる場合があります。
4. スライダー実装の原則
上記のコードを初めて読んだとき、あなたも最初は私と同じように、そのようなコードでスライダーの効果が得られるとは信じないはずです。
それでは、実装原理を分析しましょう。
上で、トップのラジオ グループが非常に重要であり、スライダー実装のハブであると述べました。はい、本当にそうです。
スライダーを実装するには、2 種類の切り替えを実現する必要があります。コントロール ボタンをクリックすると同時に画像が切り替わり、画像が切り替わるときにすべてのコントロール ボタンが正しく表示される必要があります。 。
この例では、ラベルをコントロール ボタンとして使用し、article に画像が含まれ、inner が画像のコンテナとして機能します。
簡単に言うと、ラベルと記事を結び付ける方法がなく、ラベルのステータス情報が記事の選択に反映されることは困難です。ラベルの切り替え状況を記録し、それに応じた順番で画像を選択して表示する機能があれば別ですが。
さて、ラジオ グループがスライダーの実装の鍵となる理由がわかりました。はい、ラベルのクリック状態を記録しているようです。
ラベルの for 属性を使用してラベルを対応するラジオに関連付けます。ラベルをクリックすると、対応するラジオがチェックされます。次に、強力な CSS3 セレクターを使用して内側を左に移動し、対応する画像を表示します。もちろん、セレクターには対応する左右の選択ボタンも表示されます。同様に、左右のボタンをクリックすると、以下の5つの選択ボタンの状態も実装されます。
上記の実装原理は、実際には、コントロール ボタンのクリック状態を記録できる限り、セレクターを通じてスライダー効果を実現できます。
radio グループを使用できるだけでなく、a:hover もこのアイデアに従って、a がホバリングしているときに画像を切り替えることができます。もちろん、実装の原理を理解していれば、他にも実装方法はたくさんあります。
5. まとめ
実は CSS3 はとても楽しくて、CSS3 では想像できないような効果がたくさんあります。 CSS3 を書くにはちょっとした賢さが必要だと実感することもあれば、絶妙な実装方法が本当に素晴らしいこともあります。
そうですね、ちょっとした練習として、この例は特に強力なセレクターについて多くのことを学びましたが、これまで無視しすぎていたことが恥ずかしくなってきました。 。 。
不連続な画像の切り替えの問題についてはまだ考慮する必要があります。これを支援するにはいくつかの js を使用する必要があるようです。
わかりました。結果が出たら共有します。
/* common */
body{background: #ddd;overflow-x: hidden;}
#bd{width: 960px;margin : 100px auto ;max-width: 960px;}
/* module: sliders */
#sliders{
border-radius: 5px;
box-shadow: 1px 1px 4px #666; 🎜>パディング: 1%;
背景: #fff;
}
#overflow{
幅: 100%;
#sliders inner{
width: 500%;
transiton: すべて 1 のリニア;
-webkit-transition: すべて 1 のリニア;
#sliders 記事{
float: left; 🎜>幅 : 20%;
}
#sliders 記事 .info{
不透明度: 0;
カラー: #666; 🎜>フォントファミリー: Arial;
トランジション: 不透明度 0.1 秒イーズアウト;
-webkit-transform: 不透明度 0.1 秒; >}
#sliders 記事 .info h1{
font-size: 22px;
font-weight: 太字
margin: 0 0 5px;
#sliders 記事 . info a{
color: #666;
text-decoration: none;
}
/* モジュール: コントロール */
高さ: 50px;幅: 100 %;
マージントップ: -25%;
#controls label{
幅: 50 ピクセル;
>不透明度: 0.3;
カーソル: ポインタ;
}
#controls label:hover{
不透明度: 1;
}
/* モジュール: アクティブ */
# active{
width: 100%;
margin-top: 23%;
#active label{
display: inline-block; 🎜>幅: 10px;
高さ: 10px;
背景: #bbb;
#777; :hover{
background: #ccc;
}
/* 入力チェック済み変更スタイル */
#slider1:checked ~ #active label:nth-child(1),
#slider2 :checked ~ #active label:nth-child(2),
#slider3:checked ~ #active label:nth-child(3),
#slider4:checked ~ #active label:nth-child(4 ),
#slider5:checked ~ #active label:nth-child(5){
background: #333;
}
#slider1:checked ~ #controls label:nth-child(5 )、
#slider2:checked ~ #controls label:nth-child(1)、
#slider3:checked ~ #controls label:nth-child(2)、
#slider4:checked ~ #controls label:nth -child(3),
#slider5:checked ~ #controls label:nth-child(4){
表示: ブロック;
フロート: 左;
背景: url(. ./img /prev.png) no-repeat;
margin-left: -70px;
#slider1:checked ~ #controls label:nth-child(2),
#slider2 :checked ~ #controls label:nth-child(3),
#slider3:checked ~ #controls label:nth-child(4),
#slider4:checked ~ #controls label:nth-child(5 ),
#slider5:checked ~ #controls label:nth-child(1){
表示: ブロック;
フロート: 右;
背景: url(../img/next.png ) no-repeat;
margin-right: -70px;
}
#slider1:checked ~ #sliders 記事:nth-child(1) .info,
#slider2:checked ~ #sliders記事:nth -child(2) .info,
#slider3:checked ~ #sliders 記事:nth-child(3) .info,
#slider4:checked ~ #sliders 記事:nth-child(4) .info,
#slider5:checked ~ #slidersarticle:nth-child(5) .info{
opacity: 1;
transition: すべて 0.6s イーズアウト 1s;トランジション: すべて 0.6 秒イーズアウト 1 秒;
#slider1:checked ~ #sliders .inner{
margin-left: 0;
}
#slider2:checked ~ #sliders .inner{
マージン左: -100%;
}
#slider3:checked ~ #sliders .inner{
マージン左: -200%;
# slider4:checked ~ #sliders .inner{
margin-left: -300%;
#slider5:checked ~ #sliders .inner{
margin-left: -400%; >}
上記の CSS コードは本当に量が多くて複雑であることは認めますが、非常に素晴らしい効果が得られます。書き終えたとき、CSS3 の巨大な魔法に感銘を受けました。 。 。
ここでのコードの前半は、主にスライダーの構造を設計するために使用され、丸い角や影などの美しいデザインが含まれています。後半は主に、画像の切り替えやコントロール ボタンの切り替え時にダイナミックな効果を実現するためのアニメーション効果です。ただし、最も重要なことは、画像切り替え機能を実際に実現する下部の css3 セレクターの使用です。この例ではセレクターが非常に重要な役割を果たしていると本当に思います。なぜなら、これは私が過去に CSS3 を学習したときに無視していたものだからです。 CSS3 の強みは角丸、影、変形、アニメーションだと常々感じていましたが、このコードは CSS3 においてセレクターがいかに重要であるかを示しています。一部の複雑なロジックでは、これらの CSS3 セレクターを使用すると、想像を絶する効果が得られる場合があります。
4. スライダー実装の原則
上記のコードを初めて読んだとき、あなたも最初は私と同じように、そのようなコードでスライダーの効果が得られるとは信じないはずです。
それでは、実装原理を分析しましょう。
上で、トップのラジオ グループが非常に重要であり、スライダー実装のハブであると述べました。はい、本当にそうです。
スライダーを実装するには、2 種類の切り替えを実現する必要があります。コントロール ボタンをクリックすると同時に画像が切り替わり、画像が切り替わるときにすべてのコントロール ボタンが正しく表示される必要があります。 。
この例では、ラベルをコントロール ボタンとして使用し、article に画像が含まれ、inner が画像のコンテナとして機能します。
簡単に言うと、ラベルと記事を結び付ける方法がなく、ラベルのステータス情報が記事の選択に反映されることは困難です。ラベルの切り替え状況を記録し、それに応じた順番で画像を選択して表示する機能があれば別ですが。
さて、ラジオ グループがスライダーの実装の鍵となる理由がわかりました。はい、ラベルのクリック状態を記録しているようです。
ラベルの for 属性を使用してラベルを対応するラジオに関連付けます。ラベルをクリックすると、対応するラジオがチェックされます。次に、強力な CSS3 セレクターを使用して内側を左に移動し、対応する画像を表示します。もちろん、セレクターには対応する左右の選択ボタンも表示されます。同様に、左右のボタンをクリックすると、以下の5つの選択ボタンの状態も実装されます。
上記の実装原理は、実際には、コントロール ボタンのクリック状態を記録できる限り、セレクターを通じてスライダー効果を実現できます。
radio グループを使用できるだけでなく、a:hover もこのアイデアに従って、a がホバリングしているときに画像を切り替えることができます。もちろん、実装の原理を理解していれば、他にも実装方法はたくさんあります。
5. まとめ
実は CSS3 はとても楽しくて、CSS3 では想像できないような効果がたくさんあります。 CSS3 を書くにはちょっとした賢さが必要だと実感することもあれば、絶妙な実装方法が本当に素晴らしいこともあります。
そうですね、ちょっとした練習として、この例は特に強力なセレクターについて多くのことを学びましたが、これまで無視しすぎていたことが恥ずかしくなってきました。 。 。
不連続な画像の切り替えの問題についてはまだ考慮する必要があります。これを支援するにはいくつかの js を使用する必要があるようです。
わかりました。結果が出たら共有します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。