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サイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ