HTML5响应式对角线轮播动画

Responsive Diagonal Step Slider，沿着对角线滑动切换图文。

html5, slider

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// infinite slider only works with 3+ slides, so if less than 3 we need to duplicate
function duplicateSlides(slider, slides) {
    if (slides.length < 3) {
        // Duplicate slider content
        slider.append(slider.html());
        // Re count slides
        var slidesRecount = jQuery('.slider .slider__slide');
        // Recursive function until more than 3 slides
        duplicateSlides(slider, slidesRecount);
    } else {
        // Remove active class if any already added
        slides.removeClass('slider__slide--active');
        // Only add active class to first slide once recursion has finished
        jQuery(slides[0]).addClass('slider__slide--active');
    }
}

jQuery(document).ready(function() {
    var $sliderContainers = jQuery('.slider');
    var $body = jQuery('body');

$sliderContainers.each(function() {
        // Cache this
        var $sliderContainer = jQuery(this);
        // Get the inner slider for duplicate slides function
        var $sliderInner = $sliderContainer.find('.slider__inner');
        // Get all the slides
        var $slides = $sliderContainer.find('.slider__slide');
        // Duplicate slides
        duplicateSlides($sliderInner, $slides);
        // Get the background colour of the active slide
        var bg = $sliderContainer.find('.slider__slide--active').children('.slider__slide__content').data('background');
        // Lighten using tinycolor
        var lightenBy = 15;
        var lighten = tinycolor(bg).lighten(lightenBy).toString();
        var lightenDouble = tinycolor(bg).lighten(lightenBy * 2).toString();
        // Apply lightened background color to container
        $sliderContainer.css('background-color', lighten);
        $body.css('background-color', lightenDouble);
        // Move the last slide in front of the first
        var $first = $slides.filter(':first');
        var $last = $slides.filter(':last');
        $first.before($last);

$sliderContainer.on('click', '.controls button', function() {
            $slides.addClass('slider__slide--animate');
            var $clicked = jQuery(this);
            var $activeSlide = $sliderContainer.find('.slider__slide--active');
            $first = $sliderContainer.find('.slider__slide:first');
            $last = $sliderContainer.find('.slider__slide:last');
            if ($clicked.hasClass('next')) {
                // Get the background colour of the next active slide
                var nextBg = jQuery('.slider__slide--active').next().children('.slider__slide__content').data('background');
                // Lighten using tinycolor
                var nextLighten = tinycolor(nextBg).lighten(lightenBy).toString();
                var nextLightenDouble = tinycolor(nextBg).lighten(lightenBy * 2).toString();
                // Apply lightened background color to container
                $sliderContainer.css('background-color', nextLighten);
                // Apply double lightened background color to body
                $body.css('background-color', nextLightenDouble);
                // Add active class to next slide, remove from this slide
                $activeSlide.removeClass('slider__slide--active').next().addClass('slider__slide--active');
                // Move first slide to last place
                $last.after($first);
            } else if ($clicked.hasClass('previous')) {
                // Get the background colour of the previous active slide
                var prevBg = jQuery('.slider__slide--active').prev().children('.slider__slide__content').data('background');
                // Lighten using tinycolor
                var prevLighten = tinycolor(prevBg).lighten(lightenBy).toString();
                var prevLightenDouble = tinycolor(prevBg).lighten(lightenBy * 2).toString();
                // Apply lightened background color to container
                $sliderContainer.css('background-color', prevLighten);
                // Add active class to previous slide, remove from this slide
                // Apply double lightened background color to body
                $body.css('background-color', prevLightenDouble);

$activeSlide.removeClass('slider__slide--active').prev().addClass('slider__slide--active');
                // Move last slide to first place
                $first.before($last);
            }
        });
        $(window).resize(function() {
            $slides.removeClass('slider__slide--animate');
        });
    });
});

编译

CSS

body {
    font-size: 18px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    padding: 0 0 50px;
    background-color: #ecbecf;
}
h2,
h3,
h4 {
    font-family: "din-2014-narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}
h2 {
    font-size: 2em;
    text-align: center;
    background: #fff;
    display: inline-block;
    padding: 2px 10px;
    margin: 0 0 100px;
    font-weight: 600;
}
h3 {
    font-size: 1.4em;
}
h4 {
    font-size: 1em;
}
.slider {
    min-height: 300px;
    overflow: hidden;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    font-family: "roboto", sans-serif;
    background-color: #da84a3;
}
.slider__title {
    background: #2d2d2d;
    color: #fff;
    position: absolute;
    z-index: 9999;
    left: calc(25% + 150px);
    padding: 10px;
    text-transform: uppercase;
    font-family: "din-2014-narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
}
@media (max-width: 767px) {
    .slider__title {
        left: 0;
    }
}
.slider__title h4 {
    margin: 0;
}
.slider .controls {
    position: absolute;
    z-index: 9999;
    right: 0;
    top: 20px;
    height: 260px;
}
@media (max-width: 767px) {
    .slider .controls {
        width: 100%;
        height: 50px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}
.slider .controls button {
    background: transparent;
    border: none;
    display: block;
    width: 20px;
    position: absolute;
    padding: 0;
    outline: none;
    cursor: pointer;
}
.slider .controls button.previous {
    top: 0;
    right: 25px;
}
@media (min-width: 768px) {
    .slider .controls button.previous {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}
@media (min-width: 768px) {
    .slider .controls button.next {
        top: 20px;
        right: 50px;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
}
@media (max-width: 767px) {
    .slider .controls button.next {
        top: 0;
        left: 20px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
.slider .controls button rect {
    fill: #2d2d2d;
}
.slider .controls button:hover rect {
    fill: #fff;
}
.slider__inner {
    width: calc(75% + 150px);
    max-width: 100%;
    margin: auto;
    position: relative;
    min-height: 300px;
    overflow: hidden;
    float: right;
}
@media (max-width: 767px) {
    .slider__inner {
        width: 100%;
    }
}
.slider__slide {
    min-height: 300px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: translate(-300px, 100%);
    transform: translate(-300px, 100%);
}
@media (max-width: 767px) {
    .slider__slide {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
    }
}
.slider__slide__image {
    position: absolute;
    left: 150px;
    bottom: 0;
    height: 150px;
    width: 150px;
    background-size: cover;
    background-position: center;
}
@media (max-width: 767px) {
    .slider__slide__image {
        display: none;
    }
}
.slider__slide__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: absolute;
    padding: 55px 80px 30px 30px;
    right: 0;
    top: 0;
    bottom: 0;
    left: 300px;
}
@media (min-width: 768px) {
    .slider__slide__content {
        right: -360px;
        padding-right: 440px;
    }
}
@media (max-width: 767px) {
    .slider__slide__content {
        padding: 55px 60px 30px;
        left: 0;
        background-color: transparent !important;
    }
}
.slider__slide__content h3 {
    margin: 0;
}
.slider__slide__content p {
    margin: 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9em;
    max-width: 600px;
}
.slider__slide__content__categories {
    padding: 10px 0;
    font-family: "din-2014-narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}
.slider__slide__content__categories a {
    color: #2d2d2d;
    text-decoration: none;
}
.slider__slide__content__categories a:hover {
    text-decoration: underline;
    color: #fff;
}
.slider__slide--animate {
    -webkit-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}
.slider__slide--active {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.slider__slide--active ~ .slider__slide {
    -webkit-transform: translate(300px, -100%);
    transform: translate(300px, -100%);
}
@media (max-width: 767px) {
    .slider__slide--active ~ .slider__slide {
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }
}
a.read-more {
    background: #2d2d2d;
    padding: 5px 10px;
    display: inline-block;
    color: #fff;
    font-family: "din-2014-narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    -ms-flex-item-align: start;
    align-self: flex-start;
    margin-top: 10px;
    text-decoration: none;
}
a.read-more img {
    max-height: 11px;
}

HTML

<h2>Responsive Diagonal 'Step' Slider</h2>

<div class="slider">
    <div class="slider__title">
        <h4>Featured Articles</h4>
    </div>
    <div class="controls">
        <button class="previous">
            <svg version="1.1" id="Isolation_Mode" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 67.9 105.6" style="enable-background:new 0 0 67.9 105.6;" xml:space="preserve">
                <rect x="4.4" y="4.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.2476 15.0829)" width="21.3" height="21.3" />
                <rect x="23.3" y="23.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.0571 33.9364)" width="21.3" height="21.3" />
                <rect x="42.1" y="42.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.8666 52.7902)" width="21.3" height="21.3" />
                <rect x="23.3" y="61" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.7202 44.9807)" width="21.3" height="21.3" />
                <rect x="4.4" y="79.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.5738 37.1712)" width="21.3" height="21.3" />
            </svg>
        </button>
        <button class="next">
            <svg version="1.1" id="Isolation_Mode" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 67.9 105.6" style="enable-background:new 0 0 67.9 105.6;" xml:space="preserve">
                <rect x="4.4" y="4.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.2476 15.0829)" width="21.3" height="21.3" />
                <rect x="23.3" y="23.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.0571 33.9364)" width="21.3" height="21.3" />
                <rect x="42.1" y="42.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.8666 52.7902)" width="21.3" height="21.3" />
                <rect x="23.3" y="61" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.7202 44.9807)" width="21.3" height="21.3" />
                <rect x="4.4" y="79.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.5738 37.1712)" width="21.3" height="21.3" />
            </svg>
            <button>
    </div>
    <div class="slider__inner">
        <div class="slider__slide">
            <a rel="nofollow" rel="noreferrer" class="slider__slide__image" href="#" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/3.jpeg)"></a>
            <div class="slider__slide__content" data-background="#c84977" style="background-color:#c84977;">
                <div class="slider__slide__content__categories"><a rel="nofollow" rel="noreferrer" href="#">Blog</a>, <a rel="nofollow" rel="noreferrer" href="#">Music</a>, <a rel="nofollow" rel="noreferrer" href="#">Travel</a> </div>
                <h3>Slide Title One</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel repudiandae quo dolorem ipsum deleniti voluptates voluptatibus natus obcaecati dolore porro.</p>
                <a rel="nofollow" rel="noreferrer" href="#" class="read-more">Read More <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/chev.png"></a>
            </div>
        </div>
        <div class="slider__slide">
            <a rel="nofollow" rel="noreferrer" class="slider__slide__image" href="#" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/4.jpeg)"></a>
            <div class="slider__slide__content" data-background="#db5944" style="background-color:#db5944;">
                <div class="slider__slide__content__categories"><a rel="nofollow" rel="noreferrer" href="#">Articles</a>, <a rel="nofollow" rel="noreferrer" href="#">Music</a>, <a rel="nofollow" rel="noreferrer" href="#">Film</a> </div>
                <h3>Slide Title Two</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel repudiandae quo dolorem ipsum deleniti voluptates voluptatibus natus obcaecati dolore porro.</p>
                <a rel="nofollow" rel="noreferrer" href="#" class="read-more">Read More <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/chev.png"></a>
            </div>
        </div>
        <div class="slider__slide">
            <a rel="nofollow" rel="noreferrer" class="slider__slide__image" href="#" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/5.jpeg)"></a>
            <div class="slider__slide__content" data-background="#e2c142" style="background-color:#e2c142;">
                <div class="slider__slide__content__categories"><a rel="nofollow" rel="noreferrer" href="#">Blog</a>, <a rel="nofollow" rel="noreferrer" href="#">Music</a>, <a rel="nofollow" rel="noreferrer" href="#">Travel</a> </div>
                <h3>Slide Title Three</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel repudiandae quo dolorem ipsum deleniti voluptates voluptatibus natus obcaecati dolore porro.</p>
                <a rel="nofollow" rel="noreferrer" href="#" class="read-more">Read More <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/chev.png"></a>
            </div>
        </div>
        <div class="slider__slide">
            <a rel="nofollow" rel="noreferrer" class="slider__slide__image" href="#" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/1.jpeg)"></a>
            <div class="slider__slide__content" data-background="#43cab1" style="background-color:#43cab1;">
                <div class="slider__slide__content__categories"><a rel="nofollow" rel="noreferrer" href="#">News</a>, <a rel="nofollow" rel="noreferrer" href="#">Sport</a>
                </div>
                <h3>Slide Title Four</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel repudiandae quo dolorem ipsum deleniti voluptates voluptatibus natus obcaecati dolore porro.</p>
                <a rel="nofollow" rel="noreferrer" href="#" class="read-more">Read More <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/chev.png"></a>
            </div>
        </div>
        <div class="slider__slide">
            <a rel="nofollow" rel="noreferrer" class="slider__slide__image" href="#" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/2.jpeg)"></a>
            <div class="slider__slide__content" data-background="#466cba" style="background-color:#466cba;">
                <div class="slider__slide__content__categories"><a rel="nofollow" rel="noreferrer" href="#">Blog</a>, <a rel="nofollow" rel="noreferrer" href="#">Music</a>, <a rel="nofollow" rel="noreferrer" href="#">Travel</a> </div>
                <h3>Slide Title Five</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel repudiandae quo dolorem ipsum deleniti voluptates voluptatibus natus obcaecati dolore porro.</p>
                <a rel="nofollow" rel="noreferrer" href="#" class="read-more">Read More <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/chev.png"></a>
            </div>
        </div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.js'></script>

Responsive Diagonal Step Slider，沿着对角线滑动切换图文。

html5, slider

编辑器支持Emmet

快捷键

Responsive Diagonal Step Slider，沿着对角线滑动切换图文。

html5, slider

HTML5交互式两条直线之间的夹角测量动画

HTML5一款很棒的响应式多行文本自动截取显示控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：