使用jQuery和CSS3实现的全屏切分滑块/图片轮播

Fullscreen Slit Slider with jQuery and CSS3 幻灯片的转场动画是把当前slide切分然后向两边划开。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2805
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<body>

<div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                    <div class="sl-slide-inner">
                        <div class="deco" data-icon="H"></div>
                        <h2>A bene placito</h2>
                        <blockquote>
                            <p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite>
                        </blockquote>
                    </div>
                </div>

<div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                    <div class="sl-slide-inner">
                        <div class="deco" data-icon="q"></div>
                        <h2>Regula aurea</h2>
                        <blockquote>
                            <p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite>
                        </blockquote>
                    </div>
                </div>

<div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="deco" data-icon="O"></div>
                        <h2>Dum spiro, spero</h2>
                        <blockquote>
                            <p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering
                                and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite>
                        </blockquote>
                    </div>
                </div>

<div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="deco" data-icon="I"></div>
                        <h2>Donna nobis pacem</h2>
                        <blockquote>
                            <p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite>
                        </blockquote>
                    </div>
                </div>

<div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="deco" data-icon="t"></div>
                        <h2>Acta Non Verba</h2>
                        <blockquote>
                            <p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite>
                        </blockquote>
                    </div>
                </div>
            </div>

<nav id="nav-arrows" class="nav-arrows">
                <span class="nav-arrow-prev">Previous</span>
                <span class="nav-arrow-next">Next</span>
            </nav>

</div>

</div>
    <script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/FullscreenSlitSlider/js/jquery.ba-cond.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/FullscreenSlitSlider/js/jquery.slitslider.js"></script>
    <script type="text/javascript">
        $(function() {

var Page = (function() {

var $navArrows = $('#nav-arrows'),
                    $nav = $('#nav-dots > span'),
                    slitslider = $('#slider').slitslider({
                        onBeforeChange: function(slide, pos) {

$nav.removeClass('nav-dot-current');
                            $nav.eq(pos).addClass('nav-dot-current');

}
                    }),

init = function() {

initEvents();

},
                    initEvents = function() {

// add navigation events
                        $navArrows.children(':last').on('click', function() {

slitslider.next();
                            return false;

});

$navArrows.children(':first').on('click', function() {

slitslider.previous();
                            return false;

});

$nav.each(function(i) {

$(this).on('click', function(event) {

var $dot = $(this);

if (!slitslider.isActive()) {

$nav.removeClass('nav-dot-current');
                                    $dot.addClass('nav-dot-current');

}

slitslider.jump(i + 1);
                                return false;

});

};

return {
                    init: init
                };

})();

Page.init();

/**
             * Notes:
             *
             * example how to add items:
             */

/*
                
            var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
                
            // call the plugin's add method
            ss.add($items);

});
    </script>
</body>

</html>

Fullscreen Slit Slider with jQuery and CSS3 幻灯片的转场动画是把当前slide切分然后向两边划开。

模板，教程

编辑器支持Emmet

快捷键

Fullscreen Slit Slider with jQuery and CSS3 幻灯片的转场动画是把当前slide切分然后向两边划开。

模板，教程

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

使用jQuery和CSS3实现超酷的3D圆形卡片/贺卡

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：