这么炫酷的轮播图·你想学吗？

话不多说，直接上代码

结构

<div id="main"><h1>something</h1><div class="content"><p>You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe           up/down to navigate. Mouse wheel works too.</p></div><div class="buttons"><button class="next" onclick="go(-1)"></button><button class="prev" onclick="go(1)"></button></div>
</div>

样式

html,
body {padding: 0;margin: 0;overflow: hidden;font-family: "Sen";
}
* {box-sizing: border-box;outline: none;-webkit-tap-highlight-color: transparent;cursor: none;user-select: none;-webkit-user-drag: none;
}
#main {display: flex;
}
#main .part {flex: 1;
}
#main .part .section {width: 100%;height: 100vh;position: relative;overflow: hidden;
}
#main .part .section img {width: 100vw;height: 100vh;object-fit: cover;position: absolute;left: var(--x);pointer-events: none;
}
.cursor {width: var(--size);height: var(--size);border-radius: 50%;background: white;position: absolute;z-index: 999;pointer-events: none;mix-blend-mode: difference;
}
.cursor-f {width: var(--size);height: var(--size);position: absolute;top: 0;left: 0;background-image: url("data:image/svg+xml,%3Csvg width='47' height='47' viewBox='0 0 47 47' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.4202 42.4202C38.8403 46 33.3594 46 23.5 46C13.6406 46 8.15966 46 4.57983 42.4202C1 38.8403 1 33.3594 1 23.5C1 13.6406 1 8.15966 4.57983 4.57983C8.15966 1 13.6406 1 23.5 1C33.3594 1 38.8403 1 42.4202 4.57983C46 8.15966 46 13.6406 46 23.5C46 33.3594 46 38.8403 42.4202 42.4202Z' stroke='white'/%3E%3C/svg%3E%0A");background-size: cover;mix-blend-mode: difference;pointer-events: none;opacity: 0.5;
}
.buttons {position: absolute;right: 25px;top: 50%;transform: translateY(-50%);z-index: 99;
}
.buttons button {border: none;background-size: contain;background: url("data:image/svg+xml,%3Csvg width='10' height='29' viewBox='0 0 10 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0V27L1 17.4857' stroke='white' stroke-width='2' /%3E%3C/svg%3E%0A") no-repeat;background-position: center;width: 10px;height: 30px;display: block;margin: 20px 0;padding: 0 15px;transition-duration: 0.6s;
}
.buttons button.next {transform: scaleY(-1);
}
.buttons button.prev:active {transform: translateY(8px);
}
.buttons button.next:active {transform: scaleY(-1) translateY(8px);
}
h1 {position: absolute;top: 50%;transform: translateY(-50%);left: 0;right: 0;margin: auto;z-index: 99;color: white;text-align: center;font-size: 2.6em;mix-blend-mode: overlay;pointer-events: none;
}
.content {width: 90%;position: absolute;bottom: 20px;text-align: center;left: 0;right: 0;margin: auto;color: white;z-index: 99;font-size: 0.8em;
}
.content p {margin: 0.5em auto;
}
.content kbd {width: 15px;height: 15px;border: 1px solid white;display: inline-block;border-radius: 3px;font-size: 0.9em;vertical-align: text-top;
}
.content a {color: rgba(227, 227, 227, 0.78);text-decoration: none;border-bottom: 1px solid currentColor;
}
.content a:hover {padding-bottom: 1px;
}

行为

const cols = 3;
const main = document.getElementById('main');
let parts = [];let images = ["https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80","https://images.unsplash.com/photo-1544198365-f5d60b6d8190?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80","https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80"
];
let current = 0;
let playing = false;for (let i in images) {new Image().src = images[i];
}for (let col = 0; col < cols; col++) {let part = document.createElement('div');part.className = 'part';let el = document.createElement('div');el.className = "section";let img = document.createElement('img');img.src = images[current];el.appendChild(img);part.style.setProperty('--x', -100/cols*col+'vw');part.appendChild(el);main.appendChild(part);parts.push(part);
}let animOptions = {duration: 2.3,ease: Power4.easeInOut
};function go(dir) {if (!playing) {playing = true;if (current + dir < 0) current = images.length - 1;else if (current + dir >= images.length) current = 0;else current += dir;function up(part, next) {part.appendChild(next);gsap.to(part, {...animOptions, y: -window.innerHeight}).then(function () {part.children[0].remove();gsap.to(part, {duration: 0, y: 0});})}function down(part, next) {part.prepend(next);gsap.to(part, {duration: 0, y: -window.innerHeight});gsap.to(part, {...animOptions, y: 0}).then(function () {part.children[1].remove();playing = false;})}for (let p in parts) {let part = parts[p];let next = document.createElement('div');next.className = 'section';let img = document.createElement('img');img.src = images[current];next.appendChild(img);if ((p - Math.max(0, dir)) % 2) {down(part, next);} else {up(part, next);}}}
}window.addEventListener('keydown', function(e) {if (['ArrowDown', 'ArrowRight'].includes(e.key)) {go(1);}else if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {go(-1);}
});function lerp(start, end, amount) {return (1-amount)*start+amount*end
}const cursor = document.createElement('div');
cursor.className = 'cursor';const cursorF = document.createElement('div');
cursorF.className = 'cursor-f';
let cursorX = 0;
let cursorY = 0;
let pageX = 0;
let pageY = 0;
let size = 8;
let sizeF = 36;
let followSpeed = .16;document.body.appendChild(cursor);
document.body.appendChild(cursorF);if ('ontouchstart' in window) {cursor.style.display = 'none';cursorF.style.display = 'none';
}cursor.style.setProperty('--size', size+'px');
cursorF.style.setProperty('--size', sizeF+'px');window.addEventListener('mousemove', function(e) {pageX = e.clientX;pageY = e.clientY;cursor.style.left = e.clientX-size/2+'px';cursor.style.top = e.clientY-size/2+'px';
});function loop() {cursorX = lerp(cursorX, pageX, followSpeed);cursorY = lerp(cursorY, pageY, followSpeed);cursorF.style.top = cursorY - sizeF/2 + 'px';cursorF.style.left = cursorX - sizeF/2 + 'px';requestAnimationFrame(loop);
}loop();let startY;
let endY;
let clicked = false;function mousedown(e) {gsap.to(cursor, {scale: 4.5});gsap.to(cursorF, {scale: .4});clicked = true;startY = e.clientY || e.touches[0].clientY || e.targetTouches[0].clientY;
}
function mouseup(e) {gsap.to(cursor, {scale: 1});gsap.to(cursorF, {scale: 1});endY = e.clientY || endY;if (clicked && startY && Math.abs(startY - endY) >= 40) {go(!Math.min(0, startY - endY)?1:-1);clicked = false;startY = null;endY = null;}
}
window.addEventListener('mousedown', mousedown, false);
window.addEventListener('touchstart', mousedown, false);
window.addEventListener('touchmove', function(e) {if (clicked) {endY = e.touches[0].clientY || e.targetTouches[0].clientY;}
}, false);
window.addEventListener('touchend', mouseup, false);
window.addEventListener('mouseup', mouseup, false);let scrollTimeout;
function wheel(e) {clearTimeout(scrollTimeout);setTimeout(function() {if (e.deltaY < -40) {go(-1);}else if (e.deltaY >= 40) {go(1);}})
}
window.addEventListener('mousewheel', wheel, false);
window.addEventListener('wheel', wheel, false);

这么炫酷的轮播图·你想学吗？相关推荐

开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件
开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件 1.轮播图样式上图: 请访问:这里!! 查看轮播图效果. 2.如何在html里面引用文件的目录路径为: 需要轮播图插件的 ...
Android超级炫酷的轮播图实现
轮播图的实现有很多种方式,早先我在网上看了下别人写的轮播图,感觉都比较的墨守成规,有的还有可能加载不了网络图片.所以我在这里自己重新写了下轮播图 ,方便日后的项目使用. 在下面的代码中,我也用voll ...
优酷轮播代理源地址和PHP,优酷顶部轮播图部分布局 2019.0314-20点
例 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D ...
bootstrap轮播图原点变为方块_BootStrap 4 轮播图实现缩放效果 | 智慧宫
BootStrap 4 Carousel 轮播图官方代码中,图片只有左右滚动效果,在最新的BootStrap 4.3版本 Carousel 效果增加了淡入淡出,但是远远不能满足我们的需求,下面提供一种 ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
基于skitter的轮播图炫酷效果，幻灯片的体验
概述包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端详细代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...
html3d轮播图片效果,炫酷3D透视轮播图特效
这是一款炫酷js和CSS3 3D透视轮播图特效.该3D轮播图通过CSS3制作图片的3D透视效果,并使用js来使轮播图于用户进行交互,效果非常炫酷. 使用方法在页面中引入style.css和index ...
短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...
3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）...
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

这么炫酷的轮播图·你想学吗？

这么炫酷的轮播图·你想学吗？相关推荐

最新文章

热门文章