一款大气的杂志封面式幻灯片

适用于电子杂志类移动应用。

html5, template, slider

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var mySlider = {

config: {

slider: '.slider-content',
        activeSlide: '.slide.active',
        button: '.next-button',
        transition: 500,
        delay: function() {
            return this.transition;
        },
        navigation: '.control-nav'

init: function(config) {
        //$.extend(mySlider.config, config);
        this.createNav();
        $(mySlider.config.button).
        click(function() {
            mySlider.animateSlide($(this));
        });
    },

getActiveSlide: function() {

return $(mySlider.config.activeSlide);

getNextSlide: function() {

var nextSlide = mySlider.getActiveSlide().next();

if (nextSlide.length === 0) {

nextSlide = $(mySlider.config.slider).find('.slide').eq(0);
        }

return nextSlide;

getNextSlideColorAndName: function() {

var colorAndName = {};
        var nextSlidenext = mySlider.getNextSlide().next();
        var nextSlideColor = nextSlidenext.data('color');
        var nextSlideName = nextSlidenext.data('name');

colorAndName.color = nextSlideColor;
        colorAndName.name = nextSlideName;

if (nextSlidenext.length === 0) {
            nextSlidenext = $(mySlider.config.slider).find('.slide').eq(0);
            nextSlideColor = nextSlidenext.data('color');
            nextSlideName = nextSlidenext.data('name');

colorAndName.color = nextSlideColor;
            colorAndName.name = nextSlideName;
        }

return colorAndName;
    },

createNav: function() {

var totalSlides = $(mySlider.config.slider).find('.slide').length;
        var controlNav = $(mySlider.config.navigation).find('ul');
        var nav;

for (var i = 0; i < totalSlides; i++) {

var active = "";
            if (i === 0) {
                active = 'active';
            }

controlNav.append('<li class="slider-nav nav-' + i + ' ' + active + ' "></li>')

}

animateNav: function() {

var activeNav = $('li.active');
        var nextNav = activeNav.next();

if (nextNav.length === 0) {
            nextNav = $('.control-nav li').eq(0);
        }

activeNav.removeClass('active');
        nextNav.addClass('active');
    },

animateSlide: function(button) {

var activeSlide = mySlider.getActiveSlide();
        var nextSlide = mySlider.getNextSlide();
        var delay = mySlider.config.delay();
        var clipPath = $('.clip-svg');

clipPath.css('transition-duration', mySlider.config.transition + 'ms');
        button.css('pointer-events', 'none');
        nextSlide.css('z-index', 10);
        button.css('background', mySlider.getNextSlideColorAndName().color);
        button.prev().find('.color').html(mySlider.getNextSlideColorAndName().name);
        nextSlide.addClass('active').css('opacity', 1);

setTimeout(function() {
            activeSlide.removeClass('active').css('opacity', 0);
        }, delay);

setTimeout(function() {
            nextSlide.css('z-index', '');
            button.css('pointer-events', 'auto');
        }, delay + 300);

mySlider.animateNav();

}

$(document).ready(function() {
    mySlider.init();
});

编译

CSS

@import "https://fonts.googleapis.com/css?family=Montserrat";
.hide {
    display: none;
}
*,
*::after,
*::before {
    box-sizing: border-box;
}
body,
html {
    background: white;
    font-size: 6px;
    padding: 4rem 2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Montserrat', sans-serif;
}
@media (min-width: 860px) {
    body,
    html {
        font-size: 8px;
        padding: 3rem 5rem;
    }
}
@media (min-width: 1200px) {
    body,
    html {
        font-size: 10px;
        padding: 2rem 3rem;
    }
}
.header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 4rem 3rem 2rem;
    z-index: 20;
}
.header-wrapper .header {
    position: relative;
    display: block;
    width: 100%;
    height: 6rem;
}
.header-wrapper .menu-wrapper {
    position: relative;
    float: right;
    display: block;
    cursor: pointer;
    width: 2.5rem;
    height: 3rem;
    right: 0;
    margin: 0;
    text-align: right;
}
.header-wrapper .menu-wrapper:after {
    content: "";
    display: table;
    clear: both;
}
.header-wrapper .menu-hamburger {
    position: relative;
    width: 1.4rem;
    display: inline-block;
    vertical-align: middle;
    background: white;
    height: 1px;
    cursor: pointer;
    right: 0;
    top: 1rem;
}
.header-wrapper .menu-hamburger::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: white;
    position: absolute;
    top: -0.8rem;
    right: 0;
}
.header-wrapper .menu-hamburger::after {
    content: "";
    width: 1.8rem;
    height: 1px;
    background: white;
    position: absolute;
    top: 0.8rem;
    right: 0;
}
.header-wrapper .logo-wrapper {
    position: relative;
    float: left;
}
.header-wrapper .logo {
    display: block;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    font-weight: 700;
    color: white;
}
.header-wrapper .logo span {
    font-weight: 100;
}
.slider-content {
    position: relative;
    max-width: 112rem;
    min-width: 480px;
    background: #fff;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 0 35px 20px rgba(79, 69, 66, 0.2);
}
.slider-content .slider-container {
    position: relative;
    height: 70rem;
    overflow: hidden;
}
.slider-content .slide-content {
    position: relative;
    width: 100%;
    height: 100%;
}
.slider-content .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.slider-content .slide:after {
    content: "";
    display: table;
    clear: both;
}
.slider-content .slide.active {
    opacity: 1;
}
.slider-content .slide.active .clip-svg {
    -webkit-clip-path: circle(120% at 90%);
    clip-path: circle(120% at 90%);
}
.slider-content img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.slider-content .title-wrapper {
    position: absolute;
    color: white;
    left: 3rem;
    bottom: 5rem;
    width: 40%;
}
.slider-content .title-wrapper.bigger {
    width: 48%;
}
.slider-content .title-wrapper h1 {
    font-size: 9rem;
    margin: 0;
    line-height: 1;
    margin-bottom: 1rem;
    font-weight: 900;
}
.slider-content .title-wrapper h2 {
    font-size: 2rem;
    margin: 0;
}
.control-nav {
    position: absolute;
    left: 3rem;
    top: 18rem;
    z-index: 999;
}
.control-nav ul {
    position: relative;
    list-style: none;
    padding: 0;
}
.control-nav li {
    position: relative;
    width: 0.4rem;
    height: 1.5rem;
    margin: 1.5rem 0;
    background: white;
    opacity: 0.5;
    border-radius: 3rem;
}
.control-nav li.active {
    opacity: 1;
}
.nav-wrapper {
    position: absolute;
    right: 5%;
    top: 42%;
    text-align: right;
    cursor: pointer;
    z-index: 999;
}
.nav-wrapper .next-color {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: white;
    font-size: 2rem;
    margin-right: 1rem;
    overflow: hidden;
}
.nav-wrapper .next-color span {
    display: block;
}
.nav-wrapper .next-color span:last-child {
    font-weight: bold;
    text-transform: uppercase;
}
.nav-wrapper .next-button {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 10rem;
    height: 10rem;
    background: #f59600;
    border-radius: 50%;
}
.nav-wrapper .next-button svg {
    width: 100%;
    height: 100%;
    padding: 2rem;
    padding-left: 3rem;
}
.footer-wrapper {
    position: absolute;
    color: white;
    bottom: 5rem;
    right: 4rem;
    z-index: 10;
}
.footer-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-wrapper ul:after {
    content: "";
    display: table;
    clear: both;
}
.footer-wrapper li {
    position: relative;
    float: left;
    margin: 0 1rem;
}
.footer-wrapper a {
    text-decoration: none;
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
}
svg.mask {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.clip-svg {
    -webkit-clip-path: circle(25px at 90%);
    clip-path: circle(25px at 90%);
    width: 100%;
    height: 100%;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

HTML

<div class="slider-content">
    <div class="header-wrapper">
        <div class="header">
            <div class="menu-wrapper">
                <div class="menu-hamburger"></div>
            </div>
            <div class="logo-wrapper">
                <div class="logo"><span>boldy</span>bae</div>
            </div>
            <div class="shop-wrapper"></div>
        </div>
    </div>

<div class="slider-wrapper">
        <div class="slider-container">
            <div class="control-nav">
                <ul></ul>
            </div>
            <div class="nav-wrapper">
                <div class="next">
                    <div class="next-color">
                        <span>Next color</span>
                        <span class="color">ORANGE</span>
                    </div>
                    <div class="next-button">
                        <svg>
                            <use xlink:href="#arrow"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="slide active" data-order="1" data-color="#ff384b" data-name="red">
                <div class="slide-content ">
                    <div class="clip-svg">
                        <img class="" src="/uploads/161101/boldybae1.jpg" alt="" />
                        <div class="title-wrapper">
                            <h1>- Cuz i'm still looking</h1>
                            <h2>looking for trouble</h2>
                        </div>
                    </div>
                </div>
            </div>

<div class="slide " data-order="2" data-color="#f59600" data-name="orange">
                <div class="slide-content ">
                    <div class="clip-svg">
                        <img class="" src="/uploads/161101/boldybae2.jpg" alt="" />
                        <div class="title-wrapper bigger">
                            <h1>- Your hesitation speaks to me</h1>
                            <h2>more than million words</h2>
                        </div>
                    </div>
                </div>
            </div>

<div class="slide " data-order="3" data-color="#0028f2" data-name="blue">
                <div class="slide-content ">
                    <div class="clip-svg">
                        <img class="" src="/uploads/161101/boldybae3.jpg" alt="" />
                        <div class="title-wrapper bigger">
                            <h1>- Heels on the bike it's a mess</h1>
                            <h2>I'm not the only one who is late</h2>
                        </div>
                    </div>
                </div>
            </div>

</div>
    </div>
    <div class="footer-wrapper">
        <ul>
            <li><a href="https://dribbble.com/mariosmaselli">dribbl</a>
            </li>
            <li><a href="https://www.instagram.com/mariosmaselli/">insta</a>
            </li>
            <li><a href="https://twitter.com/mariosmaselli">tweet</a>
            </li>
        </ul>
    </div>
</div>

适用于电子杂志类移动应用。

html5, template, slider

编辑器支持Emmet

快捷键

适用于电子杂志类移动应用。

html5, template, slider

很棒的一款React.js垂直式显示的幻灯片组件

一款很棒的可水平拖拉的幻灯片布局页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：