拖动开关切换

下载代码

html

css

分享到微信朋友圈

html

css

:root {
  --handle-background: "#000";
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
}

#bgCanvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
}

.slider__wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.slider__wrapper .info {
  color: var(--handle-background);
  font-family: "Montserrat";
  font-size: 0.95rem;
}

.slider {
  --handle-size: 50px;
  display: block;
  position: relative;
  width: 160px;
  height: calc(var(--handle-size) * 1.25);
  border-radius: var(--handle-size);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  border: 2px solid;
  border-color: var(--handle-background);
  margin: 1rem 0;
}
.slider .handle,
.slider .drop {
  --top: 4px;
  position: absolute;
  left: var(--left, auto);
  right: var(--right, auto);
  top: var(--top, auto);
  width: var(--handle-size);
  height: var(--handle-size);
  border-radius: 50%;
}
.slider .handle {
  --left: 4px;
  background: var(--handle-background);
  cursor: grab;
  z-index: 3;
}
.slider .drop {
  --right: 4px;
}
.slider .text {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1rem;
  pointer-events: none;
  user-select: none;
}

JavaScript

console.clear();

gsap.registerPlugin(Draggable);

let bgCanvas, bgCanvasCtx, raf, slider, sliderHandle, sliderHandleProps;
let modes = ["light", "dark"];
let activeMode = modes[0];
let currentMode;

function initDragEvent() {
	slider = document.querySelector(".slider");
	sliderHandle = slider.querySelector(".handle");
	const sliderDrop = slider.querySelector(".drop");

sliderHandleProps = {
		radius: sliderHandle.getBoundingClientRect().width / 2,
		radiusOffset: 0,
		position: {
			x: sliderHandle.getBoundingClientRect().left,
			y: sliderHandle.getBoundingClientRect().top
		}
	};

gsap.set(sliderHandle, {
		x: 0
	});

let tl = gsap.timeline({
		onComplete: () => {
			if (activeMode != currentMode) {
				toggleColor();
				currentMode = activeMode;
			}
		}
	});

Draggable.create(sliderHandle, {
		type: "x",
		bounds: slider,
		onRelease(e) {
			if (!this.hitTest(sliderDrop)) {
				activeMode = modes[0];
				tl.to(sliderHandle, {
					x: 0,
					duration: 0.6,
					ease: "elastic.out(1, .75)"
				});
			} else {
				activeMode = modes[1];
				tl.to(sliderHandle, {
					x: sliderDrop.offsetLeft - 5,
					duration: 0.6,
					ease: "elastic.out(1, .8)"
				});
			}
		}
	});

function toggleColor() {
		gsap.set(sliderHandle, { pointerEvents: "none" });
		let date = Date.now();
		gsap
			.timeline()
			.to(sliderHandleProps, {
				duration: window.innerWidth / 1500,
				radiusOffset: window.innerWidth * 1.2
			})
			.to(
				"body",
				{
					duration: 0.15,
					"--handle-background": activeMode === "dark" ? "#fff" : "#000"
				},
				`-=0.${window.innerWidth / 1500}`
			)

.set("body", {
				backgroundColor: activeMode === "dark" ? "#000" : "#fff"
			})
			.set(sliderHandleProps, { radiusOffset: 0 })
			.set(sliderHandle, { pointerEvents: "all" });
	}
}

function initCanvas() {
	bgCanvas = document.getElementById("bgCanvas");
	bgCanvasCtx = bgCanvas.getContext("2d");
	bgCanvas.width = window.innerWidth;
	bgCanvas.height = window.innerHeight;
	animate();
}

function animate() {
	bgCanvasCtx.clearRect(0, 0, bgCanvas.width, bgCanvas.height);

sliderHandleProps.radius = sliderHandle.getBoundingClientRect().width / 2;
	sliderHandleProps.position = {
		x: sliderHandle.getBoundingClientRect().left,
		y: sliderHandle.getBoundingClientRect().top
	};

drawCircle();

raf = requestAnimationFrame(animate);
}

function drawCircle() {
	let ctx = bgCanvasCtx;
	let position = sliderHandleProps.position;
	let radius = sliderHandleProps.radius;
	ctx.beginPath();
	ctx.arc(
		position.x + radius,
		position.y + radius,
		radius / 2 + sliderHandleProps.radiusOffset,
		0,
		2 * Math.PI,
		false
	);
	ctx.fillStyle = activeMode === "dark" ? "#000" : "#fff";
	ctx.fill();
	ctx.closePath();
}

initDragEvent();
initCanvas();

window.addEventListener("resize", () => {
	initCanvas();
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg