html and css3 js 漂亮的循环滑块banner设计cid1116-前端设计

作者code

 

<!DOCTYPE html>
<html lang="en" class="no-js">
   
<head>
     
    <title>Animated Frame Slideshow | Demo 4 | Codrops</title>
     
 <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
     
     <style>
    
    
        font-family: 'Roboto Condensed', sans-serif;
    
       </style>
  </head>
  <body class="demo-4">
     
    <main>
       
      <div class="slideshow">
        <div class="slides slides--images">
          <div class="slide slide--current">
            <div class="slide__img" style="background-image: url(img/1.jpg)"></div>
          </div>
          <div class="slide">
            <div class="slide__img" style="background-image: url(img/2.jpg)"></div>
          </div>
          <div class="slide">
            <div class="slide__img" style="background-image: url(img/3.jpg)"></div>
          </div>
          <div class="slide">
            <div class="slide__img" style="background-image: url(img/4.jpg)"></div>
          </div>
        </div>
        <div class="slides slides--titles">
          <div class="slide slide--current">
            <h2 class="slide__title">CREATIVE</h2>
          </div>
          <div class="slide">
            <h2 class="slide__title">AMAZING</h2>
          </div>
          <div class="slide">
            <h2 class="slide__title">REAL WORLD</h2>
          </div>
          <div class="slide">
            <h2 class="slide__title">STUNNING</h2>
          </div>
        </div>
        <nav class="slidenav">
          <button class="slidenav__item slidenav__item--prev">Previous</button>
          <span>/</span>
          <button class="slidenav__item slidenav__item--next">Next</button>
        </nav>
      </div>
    </main>
   
    <script src="js/anime.min.js"></script>
    <script src="js/demo4.js"></script>
  </body>
 </html>

css

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"201C" "201D" "2018" "2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  background: #fff;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  min-height: 100vh;
  color: #57585c;
  color: var(--color-text);
  background-color: #fff;
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Color schemes */
.demo-1 {
  --color-text: #000;
    --color-bg: #f1f1f1;
    --color-link: #000;
    --color-link-hover: #0e54c1;
    --color-stitle: #000;
    --fontsize-stitle: 12vw;
    --color-sdesc: #000;
    --color-slink: #000;
    --color-slink-hover: #000;
    --color-slink-bg: #fff;
    --color-slink-hover-bg: #0e54c1;
    --color-nav: #000;
    --color-nav-hover: #0E54CA;
}

.demo-2 {
  --color-text: #fff;
    --color-bg: #000;
    --color-link: #fff;
    --color-link-hover: #37dbff;
    --color-stitle: #eaff68;
    --fontsize-stitle: 12vw;
    --color-sdesc: #fff;
    --color-slink: #f1f1f1;
    --color-slink-hover: #000;
    --color-slink-bg: #000;
    --color-slink-hover-bg: #37dbff;
    --color-nav: #f1f1f1;
    --color-nav-hover: #37dbff;
}

.demo-3 {
  --color-text: #fff;
    --color-bg: #333;
    --color-link: #fff;
    --color-link-hover: #ED4264;
    --color-stitle: #f1f1f1;
    --fontsize-stitle: 12vw;
    --color-sdesc: #f1f1f1;
    --color-slink: #f1f1f1;
    --color-slink-hover: #f1f1f1;
    --color-slink-bg: #000;
    --color-slink-hover-bg: #ED4264;
    --color-nav: #ED4264;
    --color-nav-hover: #000;
}

.demo-4 {
  --color-text: #000;
  --color-bg: #f1f1f1;
  --color-link: #000;
  --color-link-hover: #74c3d0;
  --color-stitle: #000;
  --fontsize-stitle: 8vw;
  --color-nav: #74c3d0;
  --color-nav-hover: #000;
}

.demo-5 {
  --color-text: #fff;
    --color-bg: #576267;
    --color-link: #000;
    --color-link-hover: #da281b;
    --color-stitle: #000;
    --fontsize-stitle: 12vw;
    --color-sdesc: #f1f1f1;
    --color-slink: #f1f1f1;
    --color-slink-hover: #f1f1f1;
    --color-slink-bg: #000;
    --color-slink-hover-bg: #da281b;
    --color-nav: #f1f1f1;
    --color-nav-hover: #da281b;
}

.demo-6 {
  --color-text: #fff;
    --color-bg: #020202;
    --color-link: #fff;
    --color-link-hover: #415bf8;
    --color-stitle: #f1f1f1;
    --fontsize-stitle: 12vw;
    --color-nav: #fff;
    --color-nav-hover: #415bf8;
}

/* Fade effect */
.js body {
  opacity: 0;
  transition: opacity 0.3s;
}

.js body.render {
  opacity: 1;
}

/* Page Loader */
.js .loading::before {
  content: '';
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
}

.js .loading::after {
  content: '';
  position: fixed;
  z-index: 100000;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.4;
  background: var(--color-link);
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5,0.5,1);
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  outline: none;
}

.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Icons */
.icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto;
  fill: currentColor;
}

.icon--arrow-rot {
  transform: rotate(180deg);
}

main {
  position: relative;
  width: 100%;
}

.content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  min-height: 100vh;
}

.content--fixed {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  display: grid;
  align-content: space-between;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: 100vh;
  padding: 1.5em;
  pointer-events: none;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto 4em;
  grid-template-areas: 'header github'
  '... ...'
  '... demos';
}

.content--fixed a {
  pointer-events: auto;
}

/* Header */
.codrops-header {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-items: center;
  align-self: start;
  grid-area: header;
  justify-self: start;
}

.codrops-header__title {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

.github {
  display: block;
  align-self: start;
  grid-area: github;
  justify-self: end;
  padding: 0.5em 0;
}

.demos {
  position: relative;
  display: block;
  align-self: end;
  text-align: center;
  grid-area: demos;
}

.demo {
  margin: 0 0.15em;
}

.demo:hover,
.demo:focus {
  opacity: 0.5;
}

.demo span {
  white-space: nowrap;
  text-transform: lowercase;
  pointer-events: none;
}

.demo span::before {
  content: '#';
}

a.demo--current {
  pointer-events: none;
}

/* Top Navigation Style */
.codrops-links {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 1em 0 0;
  text-align: center;
  white-space: nowrap;
}

.codrops-icon {
  display: inline-block;
  margin: 0.15em;
  padding: 0.25em;
}

.slideshow {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.slides {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.slide--current {
  opacity: 1;
  pointer-events: auto;
}

.slide__img {
  position: absolute;
  top: -200px;
  left: -200px;
  width: calc(100% + 400px);
  height: calc(100% + 400px);
  background-size: cover;
  background-position: 50% 50%;
}

.slidenav {
  position: absolute;
  width: 300px;
  margin-left: -150px;
  left: 50%;
  bottom: 0;
  text-align: center;
  padding: 2em;
}

.slidenav__item {
  border: 0;
  background: none;
  font-weight: bold;
  color: var(--color-nav);
}

.slidenav__item:focus {
  outline: none;
}

.slidenav__item:hover {
  color: var(--color-nav-hover);
}

.shape {
  position: absolute;
  width: 100%;
  height: 100%;
  fill: var(--color-shape-fill);
  top: 0;
  pointer-events: none;
}

.slide__title {
  position: relative;
  font-size: var(--fontsize-stitle);
  margin: 0;
  cursor: default;
  line-height: 1;
  color: var(--color-stitle);
}

.slide__desc {
  position: relative;
  font-size: 1.5em;
  margin: 0 0 2em 0;
  cursor: default;
  color: var(--color-sdesc);
  padding: 0 1em;
  text-align: center;
}

.slide__link {
  position: relative;
  font-size: 1em;
  font-weight: bold;
  padding: 1em 2em;
  display: block;
  color: var(--color-slink);
  background: var(--color-slink-bg);
  transition: color 0.3s, background 0.3s;
}

.slide__link:hover {
  color: var(--color-slink-hover);
  background: var(--color-slink-hover-bg);
}

@media screen and (min-width: 55em) {
  .demos {
    display: flex;
    justify-self: end;
  }
  .demo {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--color-link);
  }
  a.demo--current {
    background: var(--color-link-hover);
  }
  .demo span {
    line-height: 1;
    position: absolute;
    right: 100%;
    display: none;
    margin: 0 1em 0 0;
  }
  .demo--current span {
    display: block;
  }
}

@media screen and (max-width: 55em) {
  body {
    padding: 0 0 4em 0;
  }
  .content {
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding-bottom: 10em;
  }
  .content--fixed {
    position: relative;
    z-index: 1000;
    display: block;
    padding: 0.85em;
  }
  .codrops-header {
    flex-direction: column;
    align-items: center;
  }
  .codrops-header__title {
    font-weight: bold;
    padding-bottom: 0.25em;
    text-align: center;
  }
  .github {
    display: none;
  }
  .codrops-links {
    margin: 0;
  }
  .slide__desc {
    font-size: 1em;
  }
  .slide__link {
    font-size: 0.85em;
  }
}

js

/**
 * demo2.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2017, Codrops
 * http://www.codrops.com
 */
{
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function getRandomFloat(minValue,maxValue,precision) {
        if ( typeof(precision) == 'undefined' ) {
            precision = 2;
        }
        return parseFloat(Math.min(minValue + (Math.random() * (maxValue - minValue)),maxValue).toFixed(precision));
    }

    // From https://davidwalsh.name/javascript-debounce-function.
  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
    };
    
    class Slideshow {
        constructor(el) {
            this.DOM = {};
            this.DOM.el = el;
            this.settings = {
                animation: {
                    slides: {
                        duration: 400,
                        easing: 'easeOutQuint'
                    },
                    shape: {
                        duration: 400,
                        easing: {in: 'easeOutQuint', out: 'easeInQuad'}
                    }
                },
                frameFill: '#000'
            }
            this.init();
        }
        init() {
            this.DOM.slides = Array.from(this.DOM.el.querySelectorAll('.slides--images > .slide'));
            this.slidesTotal = this.DOM.slides.length;
            this.DOM.nav = this.DOM.el.querySelector('.slidenav');
            this.DOM.titles = this.DOM.el.querySelector('.slides--titles');
            this.DOM.titlesSlides = Array.from(this.DOM.titles.querySelectorAll('.slide'));
            this.DOM.nextCtrl = this.DOM.nav.querySelector('.slidenav__item--next');
            this.DOM.prevCtrl = this.DOM.nav.querySelector('.slidenav__item--prev');
            this.current = 0;
            this.createFrame(); 
            this.initEvents();
        }
        createFrame() {
            this.rect = this.DOM.el.getBoundingClientRect();
            this.frameSize = this.rect.width/12;
            this.paths = {
                initial: this.calculatePath('initial'),
                final: this.calculatePath('final')
            };
            this.DOM.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            this.DOM.svg.setAttribute('class', 'shape');
            this.DOM.svg.setAttribute('width','100%');
            this.DOM.svg.setAttribute('height','100%');
            this.DOM.svg.setAttribute('viewbox',`0 0 ${this.rect.width} ${this.rect.height}`);
            
            const imgFillSize = this.calculateImgFillSizes();
            this.DOM.svg.innerHTML = `
                <defs>
                    <clipPath id="shape__clip">
                        <path fill="${this.settings.frameFill}" d="${this.paths.initial}"/>
                    </clipPath>
                </defs>
                <image xlink:href="img/map.png" clip-path="url(#shape__clip)" x="0" y="0" width="${imgFillSize.width}px" height="${imgFillSize.height}px"/>
            `;
            this.DOM.el.insertBefore(this.DOM.svg, this.DOM.titles);
            this.DOM.shape = this.DOM.svg.querySelector('path');
            this.DOM.imgFill = this.DOM.svg.querySelector('image');
        }
        calculateImgFillSizes() {
            const ratio = Math.max(this.rect.width / 1920, this.rect.height / 1140);
            return {width: 1920*ratio, height: 1140*ratio};
        }
        updateFrame() {
            this.paths.initial = this.calculatePath('initial');
            this.paths.final = this.calculatePath('final');
            this.DOM.svg.setAttribute('viewbox',`0 0 ${this.rect.width} ${this.rect.height}`);
            this.DOM.shape.setAttribute('d', this.isAnimating ? this.paths.final : this.paths.initial);
            const imgFillSize = this.calculateImgFillSizes();
            this.DOM.imgFill.setAttribute('width',`${imgFillSize.width}px`);
            this.DOM.imgFill.setAttribute('height',`${imgFillSize.height}px`);
        }
        calculatePath(path = 'initial') {
            const r = Math.sqrt(Math.pow(this.rect.height,2) + Math.pow(this.rect.width,2));
            const rInitialOuter = r;
            const rInitialInner = r;
            const rFinalOuter = r;
            const rFinalInner = this.rect.width/3*getRandomFloat(0.2,0.4);
            const getCenter = () => `${getRandomInt(rFinalInner,this.rect.width-rFinalInner)}, ${getRandomInt(rFinalInner,this.rect.height-rFinalInner)}`;
            return path === 'initial' ? 
                `M ${this.rect.width/2}, ${this.rect.height/2} m 0 ${-rInitialOuter} a ${rInitialOuter} ${rInitialOuter} 0 1 0 1 0 z m -1 ${rInitialOuter-rInitialInner} a ${rInitialInner} ${rInitialInner} 0 1 1 -1 0 Z` :
                `M ${getCenter()} m 0 ${-rFinalOuter} a ${rFinalOuter} ${rFinalOuter} 0 1 0 1 0 z m -1 ${rFinalOuter-rFinalInner} a ${rFinalInner} ${rFinalInner} 0 1 1 -1 0 Z`;
        }
        initEvents() {
            this.DOM.nextCtrl.addEventListener('click', () => this.navigate('next'));
            this.DOM.prevCtrl.addEventListener('click', () => this.navigate('prev'));
            
            window.addEventListener('resize', debounce(() => {
                this.rect = this.DOM.el.getBoundingClientRect();
                this.updateFrame();
            }, 20));
            
            document.addEventListener('keydown', (ev) => {
                const keyCode = ev.keyCode || ev.which;
                if ( keyCode === 37 ) {
                    this.navigate('prev');
                }
                else if ( keyCode === 39 ) {
                    this.navigate('next');
                }
            });
        }
        navigate(dir = 'next') {
            if ( this.isAnimating ) return false;
            this.isAnimating = true;

            const animateShapeIn = anime({
                targets: this.DOM.shape,
                duration: this.settings.animation.shape.duration,
                easing: this.settings.animation.shape.easing.in,
                d: this.calculatePath('final')
            });

            const animateSlides = () => {
                return new Promise((resolve, reject) => {
                    const currentSlide = this.DOM.slides[this.current];
                    anime({
                        targets: currentSlide,
                        duration: this.settings.animation.slides.duration,
                        easing: this.settings.animation.slides.easing,
                        translateY: dir === 'next' ? -1*this.rect.height : this.rect.height,
                        complete: () => {
                            currentSlide.classList.remove('slide--current');
                            resolve();
                        }
                    });

                    const currentTitleSlide = this.DOM.titlesSlides[this.current];
                    anime({
                        targets: currentTitleSlide.children,
                        duration: this.settings.animation.slides.duration,
                        easing: this.settings.animation.slides.easing,
                        delay: (t,i,total) => dir === 'next' ? i*100 : (total-i-1)*100,
                        translateY: [0, dir === 'next' ? -100 : 100],
                        opacity: [1,0],
                        complete: () => {
                            currentTitleSlide.classList.remove('slide--current');
                            resolve();
                        }
                    });
        
                    this.current = dir === 'next' ? 
                        this.current < this.slidesTotal-1 ? this.current + 1 : 0 :
                        this.current > 0 ? this.current - 1 : this.slidesTotal-1; 
                    
                    const newSlide = this.DOM.slides[this.current];
                    newSlide.classList.add('slide--current');
                    anime({
                        targets: newSlide,
                        duration: this.settings.animation.slides.duration,
                        easing: this.settings.animation.slides.easing,
                        translateY: [dir === 'next' ? this.rect.height : -1*this.rect.height,0]
                    });
        
                    const newSlideImg = newSlide.querySelector('.slide__img');
                    anime.remove(newSlideImg);
                    anime({
                        targets: newSlideImg,
                        duration: this.settings.animation.slides.duration*4,
                        easing: this.settings.animation.slides.easing,
                        translateY: [dir === 'next' ? 100 : -100, 0]
                    });
        
                    const newTitleSlide = this.DOM.titlesSlides[this.current];
                    newTitleSlide.classList.add('slide--current');
                    anime({
                        targets: newTitleSlide.children,
                        duration: this.settings.animation.slides.duration*2,
                        easing: this.settings.animation.slides.easing,
                        delay: (t,i,total) => dir === 'next' ? i*100+100 : (total-i-1)*100+100,
                        translateY: [dir === 'next' ? 100 : -100 ,0],
                        opacity: [0,1]
                    });
                });
            };

            const animateShapeOut = () => {
                anime({
                    targets: this.DOM.shape,
                    duration: this.settings.animation.shape.duration,
                    //delay: 100,
                    easing: this.settings.animation.shape.easing.out,
                    d: this.paths.initial,
                    complete: () => this.isAnimating = false
                });
            }

            animateShapeIn.finished.then(animateSlides).then(animateShapeOut);
        }
    };

    new Slideshow(document.querySelector('.slideshow'));
    imagesLoaded('.slide__img', { background: true }, () => document.body.classList.remove('loading'));
};

在线演示

让链接同时具备两种打开方式
获取源码: AnimatedFrameSlideshow 1
下载数:184人次, 文件大小: 1.0 MB, 上传日期: 2020年-11月-25日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,003 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 6元 才能查看此处内容！立即支付

类似文章