コンテンツを水平/垂直アニメーションで切り替える [fullContent]

jquery.fullContentを用いて、コンテンツを水平や垂直にアニメーションさせながら切り替えます。


jquery.fullContent
http://www.zehfernandes.com/jquery.fullContent/


デモページ
※全画面で動作させるものなので別途デモページを作成しました。
※レスポンシブ非対応

Load Files




HTML

Spring

春

Summer

夏

Autumn

秋

Winter

冬

JavaScript

$('.js_full_contents').fullContent({ 
  stages: '.season',
  mapPosition: [{v: 1, h: 1}, {v: 1, h: 2}, {v: 2, h: 2}, {v: 2, h: 1}],
  stageStart: 1,
  speedTransition: 500,
  idComplement: 'page_',
  ease: 'easeOutQuad'
});

CSS

body {
  background: url(./[path]/bg.jpg);
  overflow: hidden;
}
.season {
  width: 500px;
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
}
.season .photo {
  background-color: #ffffff;
  width: 600px;
  margin: 0 auto 60px;
  padding: 20px;
}
.season .btn a {
  display: block;
  width: 200px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 15px 0;
  color: #333333;
  text-decoration: none;
}
.season .btn a:hover {
  opacity: 0.8;
}
.season_title {
  margin-bottom: 40px;
  font-size: 24px;
}