html鼠标滚动图片折叠,鼠标滑过图片3D折叠效果
本教程我們將使用CSS3 3D transforms和jQuery來制作一個神奇的3D折疊效果。
在我們的demo中，圖片在鼠標(biāo)滑過的時候被折疊，空出來的部分將顯示圖片的一些信息。我們將創(chuàng)建一個放置圖片html結(jié)構(gòu)，當(dāng)鼠標(biāo)滑過它時，使用jQuery來將折疊或彎曲效果的html代碼插入到合適的DOM節(jié)點，再用CSS 3D transforms來制作各種不同的效果(折疊或彎曲)。
HTML結(jié)構(gòu):
圖片的html結(jié)構(gòu)應(yīng)該像下面一樣：
566
124
→
每一張圖片都放在一個class為view的div中，圖片的說明信息放在其下class為view-back的div中。
我們將使用jQuery為每個viewdiv中的圖片產(chǎn)生折疊效果(插入圖片折疊效果的html結(jié)構(gòu))，它的html結(jié)構(gòu)像下面所示：
每一個“slice”都包含一部分圖片作為它的背景，這將使我們能夠很好的控制效果。此外，我們?yōu)榱俗龀龈普娴男Ч砑恿艘粋€“overlay” span，用來制作一些背景漸變效果。
使用jQuery插入以上html的代碼如下所示：
$.fn.hoverfold = function( args ) {
this.each( function() {
$( this ).children( '.view' ).each( function() {
var $item = $( this ),
img = $item.children( 'img' ).attr( 'src' ),
struct = '
';struct +='
';struct +='
';struct +='
';struct +='
';struct +='
';struct +='
';struct +='
';struct +='
';struct +='
';var $struct = $( struct );
$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '' ) );
} );
});
};
現(xiàn)在我們可以做出很多種折疊或彎曲效果。先來看看第一個demo的效果。
CSS樣式：
首先為view div添加樣式，最重要的一點是為它添加perspective透視屬性。
.view {
width: 316px;
height: 216px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
perspective: 500px;
}
所有的圖片切片需要添加一些3D屬性和過渡效果。
.view .slice{
width: 60px;
height: 100%;
z-index: 100;
transform-style: preserve-3d;
transform-origin: left center;
transition: transform 150ms ease-in-out;
}
當(dāng)鼠標(biāo)滑過圖片的時候，圖片的說明信息被顯示出來，圖片信息的樣式如下：
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
下面給span和錨元素添加樣式：
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.view-back span:first-child {
padding-top: 20px;
}
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
span前面的圖標(biāo)我們使用 Fontello 來制作。前面我們?yōu)槊總€span都添加了data-icon屬性，現(xiàn)在可以用它和:before偽元素來顯示圖標(biāo)。
.view-back span[data-icon]:before {
content: attr(data-icon);
font-family: 'icons';
color: #aaa;
color: rgba(255,255,255,0.2);
text-shadow: 0 0 1px rgba(255,255,255,0.2);
padding-right: 5px;
}
除了第一個以外的所有其它圖片切片都要移動到右邊。
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
transform: translateX(60px);
}
為每一個圖片切片設(shè)置background-position屬性。
.view .s1 {
background-position: 0px 0px;
}
.view .s2 {
background-position: -60px 0px;
}
.view .s3 {
background-position: -120px 0px;
}
.view .s4 {
background-position: -180px 0px;
}
.view .s5 {
background-position: -240px 0px;
}
overlay覆蓋層的透明度開始時為0，當(dāng)鼠標(biāo)滑過時，將其透明度過渡到1。
.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {
opacity: 1;
}
給圖片添加一些樣式，它需要絕對定位。為了兼容不支持3D transforms的瀏覽器，我們添加了一個過渡效果。
.view img {
position: absolute;
z-index: 0;
transition: left 0.3s ease-in-out;
}
如果某個瀏覽器不支持這些3d效果，我們簡單的從fallback.css回調(diào)一些樣式。使之平滑回退。效果是當(dāng)鼠標(biāo)滑過時，圖片從右向左滑動。
.view {
overflow: hidden;
}
.view:hover img {
left: -85px;
}
.view div.view-back {
background: #666;
}
折疊效果
現(xiàn)在我們來創(chuàng)建折疊效果。要做出這種效果，我們需要調(diào)整viewdiv的perspective透視度和它的過渡效果。
.view {
perspective: 1050px;
}
.view div {
transition: all 0.3s ease-in-out;
}
第2、3、4、5個圖片切片將進(jìn)行3D移動和旋轉(zhuǎn)，以達(dá)到折疊效果。
.view:hover .s2{
transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3,
.view:hover .s5{
transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}
每一個圖片切片都向左移動。移動的長度應(yīng)該是它們各自的寬度，但是我們想要使它們之間有一些間隙，所以移動了59px。第二個圖片切片被旋轉(zhuǎn)了-45度，使它表面朝向左邊。第三個切片的旋轉(zhuǎn)角度稍微大些，使它看起來折疊的較平緩，第二和第四個切片表面朝右，旋轉(zhuǎn)正90度。請注意，我們使用的是一個嵌套結(jié)構(gòu)，當(dāng)我們旋轉(zhuǎn)了父元素，它的子元素將一起旋轉(zhuǎn)。
為使效果更真實自然，我們在遮罩層添加了一些背景漸變。
.view .s2 > .overlay {
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s3 > .overlay {
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s4 > .overlay {
background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
.view .s5 > .overlay {
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
當(dāng)鼠標(biāo)滑過圖片后，圖片信息展現(xiàn)出來，我們也需要為它添加一些背景漸變。
.view div.view-back{
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}
折疊效果到這里就完成了。你可以查看下載文件中的其它效果是如何制作的，大概原理都相同。
本教程就到這里，希望對你有所幫助。
總結(jié)
以上是生活随笔為你收集整理的html鼠标滚动图片折叠,鼠标滑过图片3D折叠效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： freebsd查询php5的版本,Fre
- 下一篇： 使用java实现rfc3161,open