Based on the jquery accordion with glass streamer texture effect. This is a JQUERY+CSS3-based accordion effect with a glass streamer texture. As follows:
Online preview Source Download
The implemented code.
HTML code:
< Sectionclass= "strips"> <articleclass= "Strips__strip"> <Divclass= "Strip__content"> <H1class= "Strip__title"Data-name= "Lorem">Awesome</H1> </Div> </article> <articleclass= "Strips__strip"> <Divclass= "Strip__content"> <H1class= "Strip__title"Data-name= "Ipsum">Words</H1> <Divclass= "Strip__inner-text"> <H2>Ettrics</H2> <Scriptsrc= "Http://www.w2bc.com/scripts/2bc/_gg_980_90.js"type= "Text/javascript"></Script> <P> <ahref="#"Target= "_blank"><Iclass= "fa fa-qq"></I></a> </P> </Div> </Div> </article> <articleclass= "Strips__strip"> <Divclass= "Strip__content"> <H1class= "Strip__title"Data-name= "Dolor">Go</H1> <Divclass= "Strip__inner-text"> <H2>Ettrics</H2> <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis Corrupti Quo ea aliquid! Repellendus Numquam Quo, voluptate. Suscipit soluta omnis quibusdam facilis, Illo voluptates odit!</P> <P> <ahref="#"Target= "_blank"><Iclass= "fa Fa-weibo"></I></a> </P> </Div> </Div> </article> <articleclass= "Strips__strip"> <Divclass= "Strip__content"> <H1class= "Strip__title"Data-name= "Sit">Inside</H1> <Divclass= "Strip__inner-text"> <H2>Ettrics</H2> <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis Corrupti Quo ea aliquid! Repellendus Numquam Quo, voluptate. Suscipit soluta omnis quibusdam facilis, Illo voluptates odit!</P> <P> <ahref="#"Target= "_blank"><Iclass= "fa fa-weixin"></I></a> </P> </Div> </Div> </article> <articleclass= "Strips__strip"> <Divclass= "Strip__content"> <H1class= "Strip__title"Data-name= "Amet">Here</H1> <Divclass= "Strip__inner-text"> <H2>Ettrics</H2> <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis Corrupti Quo ea aliquid! Repellendus Numquam Quo, voluptate. Suscipit soluta omnis quibusdam facilis, Illo voluptates odit!</P> <P> <ahref="#"Target= "_blank"><Iclass= "fa fa-leaf"></I></a> </P> </Div> </Div> </article> <Iclass= "fa fa-close strip__close"></I> </ Section>
JS Code:
varExpand =function () { varTile = $ ('. Strips__strip ')); varTilelink = $ ('. Strips__strip >. strip__content '); varTiletext = Tilelink.find ('. Strip__inner-text ')); varStripclose = $ ('. Strip__close ')); varExpanded =false; varOpen =function () { varTile = $ ( This). parent (); if(!expanded) {Tile.addclass (' Strips__strip--expanded '); Tiletext.css (' Transition ', ' all. 6s 1s cubic-bezier (0.23, 1, 0.32, 1) '); Stripclose.addclass (' Strip__close--show '); Stripclose.css (' Transition ', ' all. 6s 1s cubic-bezier (0.23, 1, 0.32, 1) '); Expanded=true; } }; varClose =function () { if(expanded) {Tile.removeclass (' Strips__strip--expanded '); Tiletext.css (' Transition ', ' all 0.15s 0 cubic-bezier (0.23, 1, 0.32, 1) '); Stripclose.removeclass (' Strip__close--show '); Stripclose.css (' Transition ', ' all 0.2s 0s cubic-bezier (0.23, 1, 0.32, 1) '); Expanded=false; } }; varBindactions =function() {Tilelink.on (' Click ', open); Stripclose.on (' Click ', close); }; varinit =function() {bindactions (); }; return{init:init}; }(); Expand.init ();
via:http://www.w2bc.com/article/58246
Based on jquery accordion with glass streamer texture