Blog

【jQuery】サムネイルにいいねボタンとツイートボタンをつける

2012.09.19Cat:デザイン 役員

最近3DのjQueryプラグインを色々探しているが、
実用的っぽいのを見つけたのでやってみた。

ECサイトのアーカイブページなどですぐにディテイルページにとばすのではなくて
マウスオーバーでソーシャルプラグインなどを出したりする。

demo

まずはベースを作り(下記[ベース参照])
デフォルト表示画像の定義と隠すコンテンツを配置する。

その中に配置してある「.view」(複数可)の直下にある「img」に動的に加工が入る。
具体的には「.view img」が5分割され、「.slice」と「.s1」?「.s5」までが自動的に付与される。

それらにcssプロパティtranslate3dとlinear-gradientでつけておく。

[ベース]

■HTML

 

■CSS

 

■js

 

[配置図]

■サンプル1

 

■サンプル2

 

■サンプル3

 

■サンプル4

 

Author Profile

hoshino
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ