説明: 私のグラフィック デザイナーは、私のサイト用に非常にエレガントなスタイルを作成しましたが、それを複製するのは難しいデザインでした。それで、私はそれを完璧に複製しましたが、JavaScriptでそれをどのように移行するかを理解するのに苦労している構造が残っています. 私はスクリプトを求めているのではなく、単にメソッドを求めているだけです。
質問: この html/css 構造の遷移を javascript でスムーズにするにはどうすればよいですか? 構造が単に移行しないと思われる場合は、バックエンドをきれいにするのに役立つ回答を提供してください。
これがどのように見えるかの画像：
このためのJFiddle： http://jsfiddle.net/YEeec/2/
そこにビューアを広げると、ギャラリーが正しく表示されます。幅 950px 以上をスムーズにサポートするように設計されています。
テスト済み: Chrome
まさに私が試みているトランジション: 要素をトランジションして、ある位置から次の位置にループでスライドさせたいと思います。それが私の最初のアイデアでした。ただし、画像をある場所から次の場所に変更するだけでも機能します
この要素の HTML:
<div class="body-3"><!-- begin body 3 :: This area will hold the scroll gallery -->
<div class="body-3-upper-text center">
<p>A&G - Making Technology Easy</p>
Technology is meant to make your life easier, not harder. That's why at A&G, we work to ensure that your devices and systems work for you exactly as they should. Ask us about a budget-friendly solution for your technology needs.
</div>
<div class="body-3-slider-box">
<ul>
<!-- the idea behind this slider setup is for image1 - image7 (or unlimited image count) will be able to be rotated through the selection seamlessly. -->
<!-- when image3 is moved to the position of image4 (when the slider-selected class is moved to image3 and image4 recieves the slider-right-1 class), image2 moves to the position of image3 (image2 recieves the slider-left-1 class), and the same happens with image1, and then image7 rotates into the position of image1 by recieving the slider-left-3 class -->
<div class="slider-left-set">
<div id="slider-set-width-ext">
<!-- notice that technically, the slider-left set is listed backwards. This is because these elements need to float right, causing the first Item to be listed from the right side instead of listing left to right -->
<li class="slider-left-1" id="left-1"><img src="images/slider_3.png"><p class="front">Product 3 Title</p><span class="front">Product 3 Description</span><img id="reflection" src="images/slider_3.png"><div id="fade"></div></li>
<li class="slider-left-2" id="left-2"><img src="images/slider_2.png"><p class="front">Product 2 Title</p><span class="front">Product 2 Description</span><img id="reflection" src="images/slider_2.png"><div id="fade"></div></li>
<li class="slider-left-3" id="left-3"><img src="images/slider_1.png"><p class="front">Product 1 Title</p><span class="front">Product 1 Description</span><img id="reflection" src="images/slider_1.png"><div id="fade"></div></li>
</div>
</div>
<div class="slider-center-set">
<li class="slider-selected" id="slider-selected"><img src="images/slider_4.png"><p class="front">Managed Services</p><span class="front">Get protected by A&G today</span><img id="reflection" src="images/slider_4.png"><div id="fade"></div></li>
</div>
<div class="slider-right-set">
<div id="slider-set-width-ext">
<li class="slider-right-1" id="right-1"><img src="images/slider_5.png"><p class="front">Product 4 Title</p><span class="front">Product 5 Description</span><img id="reflection" src="images/slider_5.png"><div id="fade"></div></li>
<li class="slider-right-2" id="right-2"><img src="images/slider_6.png"><p class="front">Product 5 Title</p><span class="front">Product 6 Description</span><img id="reflection" src="images/slider_6.png"><div id="fade"></div></li>
<li class="slider-right-3" id="right-3"><img src="images/slider_7.png"><p class="front">Product 6 Title</p><span class="front">Product 7 Description</span><img id="reflection" src="images/slider_7.png"><div id="fade"></div></li>
</div>
</div>
</ul>
<div class="body-3-control-bar">
<img class="center-link" src="images/link.png">
<div id="transition-left"></div>
<div id="transition-right"></div>
</div>
</div>
</div><!-- end body 3 -->
この特定の要素の CSS:
/*slider-selected class should set the centered list item to show the title and description. Otherwise, the default classes will not render.*/
.body-3-slider-box .slider-selected
{
pointer-events:auto;
}
/*this is to control the span section*/
.body-3-slider-box .slider-selected img
{
background-color:#252525;
}
.body-3-slider-box .slider-selected span
{
opacity:1;
}
/*this is to control the paragraph*/
.body-3-slider-box .slider-selected p
{
opacity:1;
}
/*this defines the text area above the sliders*/
.body-3-upper-text
{
width:80%;
font-size:16px;
color:#7f7f7f;
text-align:center;
}
/*this controls the style of the header of the upper text section above the sliders*/
.body-3-upper-text p
{
text-align:center;
font-size:20px;
margin-bottom:10px;
color:black;
}
.body-3-slider-box
{
margin-top:0px;
padding-top:50px;
width:100%;
height:430px;
overflow:hidden;
}
.body-3-slider-box ul
{
width:100%;
height:230px;
list-style:none;
}
.body-3-slider-box li
{
margin:0px 0px 0px 0px;
width:310px;
text-align:center;
opacity:0.7;
transition:opacity 0.2s;
}
.body-3-slider-box li p
{
margin-top:15px;
pointer-events:none;
font-size:18px;
font-weight:bold;
opacity:0;
}
.body-3-slider-box li img
{
width:300px;
height:170px;
background-color:#adadad;
margin-left:auto;
margin-right:auto;
}
.body-3-slider-box li:hover
{
opacity:1;
}
.body-3-slider-box li span
{
pointer-events:none;
opacity:0;
color:#7f7f7f;
}
.body-3-control-bar
{
margin-top:0px;
width:100%;
height:50px;
background-color:none;
z-index:2;
position:absolute;
}
.body-3-control-bar #transition-left
{
float:left;
margin-left:30%;
margin-top:-65px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
border-style:solid;
border-color:#7f7f7f;
border-width:0px 0px 1px 1px;
width:35px;
height:35px;
}
.body-3-control-bar #transition-right
{
float:right;
margin-right:30%;
margin-top:-65px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
border-style:solid;
border-color:#7f7f7f;
border-width:1px 1px 0px 0px;
width:35px;
height:35px;
}
.body-3-control-bar #transition-left:hover
{
border-width:0px 0px 2px 2px;
}
.body-3-control-bar #transition-right:hover
{
border-width:2px 2px 0px 0px;
}
.center-link
{
margin-left:49%;
margin-top:20px;
}
.slider-left-3
{
float:right;
}
.slider-left-2
{
float:right;
}
.slider-left-1
{
float:right;
}
.body-3-slider-box .slider-selected
{
opacity:1;
/* margin-left:auto;
margin-right:auto; */
}
.slider-right-1
{
float:left;
}
.slider-right-2
{
float:left;
}
.slider-right-3
{
float:left;
}
.slider-left-set
{
float:left;
height:170px;
width:33.33%;
}
.slider-center-set
{
float:left;
width:33.33%;
height:170px;
}
.slider-center-set li
{
margin-left:auto;
margin-right:auto;
}
.slider-center-set li img
{
transition:margin-top 0.5s ease-out, margin-bottom 0.5s ease-out;
}
.slider-center-set li img:hover
{
margin-top:-10px;
margin-bottom:20px;
}
.slider-center-set li:hover #reflection
{
opacity:0.3;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
}
.slider-right-set
{
float:left;
width:33.33%;
height:170px;
}
.slider-left-set #slider-set-width-ext
{
width:350%;
margin-left:-250%;
}
.slider-right-set #slider-set-width-ext
{
width:350%;
margin-right:-250%;
}
#reflection
{
position:relative;
z-index:1;
margin-top:-119px;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
opacity:0.9;
box-shadow: 0px 0px 900px 30px white;
transition:opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
}
#fade
{
position:relative;
z-index:2;
margin-top:-175px;
width:302px;
height:175px;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 55%, rgba(255,255,255,0.3) 89%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,0.7)), color-stop(89%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
margin-left:auto;
margin-right:auto;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
}
.front
{
position:relative;
z-index:3;
}