フルスクリーンで華麗に切り替えられるJavaScript「Fullscreen Slit Slider with jQuery and CSS3 」

フルスクリーンで華麗に切り替えられるJavaScript「Fullscreen Slit Slider with jQuery and CSS3 」サンプル フルスクリーンで中央からスリットがはいったようなエフェクトをかけながら、画面切り替えが行えるFullscreen Slit Slider with jQuery and CSS3 | Codropsです。 CSS3を利用して非常にインパクトな表現を実現しています。

使用方法 Fullscreen Slit Slider with jQuery and CSS3からファイル一式をダウンロード。
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="jquery.transit.min.js"></script>
<script type="text/javascript" src="jquery.slitslider.js"></script>
<script>
$(function() {
$( '#sl-slider' ).slitslider();
});
</script>

あとは下記のように記述します。
<div id="sl-slider" class="sl-slider">
<!-- ここからスライド1個 -->
<div class="sl-slide" data-orientation="horizontal" data-cut1-rotation="-25" data-cut2-rotation="-25" data-cut1-scale="2" data-cut2-scale="2">
<div class="sl-deco" data-icon="アイコン"></div>
ここにコンテンツ
data-orientationはスリットの方向、verticalかhorizontal
data-cut1-rotation,data-cut2-rotationは切り取られるやつの角度
data-cut1-scale,data-cut2-scaleは切り取られるやつの大きさ
</div>
</div>

フルスクリーンで華麗に切り替えられるJavaScript「Fullscreen Slit Slider with jQuery and CSS3 」サンプル

sponsors

「フルスクリーンで華麗に切り替えられるJavaScript「Fullscreen Slit Slider with jQuery and CSS3 」」をシェアする

記事作成:
記事URL:

TOP > > > フルスクリーンで華麗に切り替えられるJavaScript「Fullscreen Slit Slider with jQuery and CSS3 」