Drag Slider With Parallax - DevForum



DevForum chia sẻ anh em code Slider dạng Drag với Parallax cực chất.

1. HTML

							

2. CSS

							.cont {
			position: relative;
			height: 100vh;
			overflow: hidden;
		}

		.slider {
			position: relative;
			height: 100%;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			will-change: transform;
			cursor: all-scroll;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.slider.animation {
			-webkit-transition: -webkit-transform 750ms ease-in-out;
			transition: -webkit-transform 750ms ease-in-out;
			transition: transform 750ms ease-in-out;
			transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
		}
		.slider.animation .slide__darkbg {
			-webkit-transition: -webkit-transform 750ms ease-in-out;
			transition: -webkit-transform 750ms ease-in-out;
			transition: transform 750ms ease-in-out;
			transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
		}
		.slider.animation .slide__text {
			-webkit-transition: -webkit-transform 750ms ease-in-out;
			transition: -webkit-transform 750ms ease-in-out;
			transition: transform 750ms ease-in-out;
			transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
		}
		.slider.animation .slide__letter {
			-webkit-transition: -webkit-transform 750ms ease-in-out;
			transition: -webkit-transform 750ms ease-in-out;
			transition: transform 750ms ease-in-out;
			transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
		}

		.slide {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.slide--1 {
			left: 0%;
		}
		.slide--2 {
			left: 100%;
		}
		.slide--3 {
			left: 200%;
		}
		.slide--4 {
			left: 300%;
		}
		.slide--5 {
			left: 400%;
		}
		.slide__darkbg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			will-change: transform;
			z-index: 10;
		}
		.slide__text-wrapper {
			position: absolute;
			display: -webkit-box;
			display: flex;
			-webkit-box-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			align-items: center;
			width: 100%;
			height: 100%;
			z-index: 15;
		}
		.slide__letter {
			position: absolute;
			display: -webkit-box;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			-webkit-box-pack: center;
			justify-content: center;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			-webkit-text-fill-color: transparent !important;
			-webkit-background-clip: text !important;
			font-size: 50vw;
			font-weight: 800;
			color: #000;
			z-index: 2;
			will-change: transform;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.slide__text {
			font-size: 8vw;
			font-weight: 800;
			text-transform: uppercase;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			letter-spacing: 12px;
			color: #fff;
			will-change: transform;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.slide__text:nth-child(odd) {
			z-index: 2;
		}
		.slide__text:nth-child(even) {
			z-index: 1;
		}
		.slide--1__darkbg {
			left: 0%;
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
			background-size: cover;
			background-position: 0px center, 0px center;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			will-change: transform;
		}
		.slide--1__darkbg:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(11, 15, 39, 0.83);
		}
		.slide--1__letter {
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
			background-position: 0px center, 0px center;
			background-size: cover;
		}
		.slide--2__darkbg {
			left: -50%;
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
			background-size: cover;
			background-position: 0px center, 0px center;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			will-change: transform;
		}
		.slide--2__darkbg:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(11, 15, 39, 0.83);
		}
		.slide--2__letter {
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
			background-position: 0px center, 0px center;
			background-size: cover;
		}
		.slide--3__darkbg {
			left: -100%;
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
			background-size: cover;
			background-position: 0px center, 0px center;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			will-change: transform;
		}
		.slide--3__darkbg:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(11, 15, 39, 0.83);
		}
		.slide--3__letter {
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
			background-position: 0px center, 0px center;
			background-size: cover;
		}
		.slide--4__darkbg {
			left: -150%;
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
			background-size: cover;
			background-position: 0px center, 0px center;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			will-change: transform;
		}
		.slide--4__darkbg:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(11, 15, 39, 0.83);
		}
		.slide--4__letter {
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
			background-position: 0px center, 0px center;
			background-size: cover;
		}
		.slide--5__darkbg {
			left: -200%;
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
			background-size: cover;
			background-position: 0px center, 0px center;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			will-change: transform;
		}
		.slide--5__darkbg:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(11, 15, 39, 0.83);
		}
		.slide--5__letter {
			background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
			background-position: 0px center, 0px center;
			background-size: cover;
		}

		.nav {
			position: absolute;
			bottom: 25px;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			list-style-type: none;
			z-index: 10;
		}
		.nav__slide {
			position: relative;
			display: inline-block;
			width: 28px;
			height: 28px;
			border-radius: 50%;
			border: 2px solid #fff;
			margin-left: 10px;
			cursor: pointer;
		}
		@media screen and (max-width: 400px) {
			.nav__slide {
				width: 22px;
				height: 22px;
			}
		}
		.nav__slide:hover:after {
			-webkit-transform: translate(-50%, -50%) scale(1, 1);
			transform: translate(-50%, -50%) scale(1, 1);
			opacity: 1;
		}
		.nav__slide:after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%) scale(0, 0);
			transform: translate(-50%, -50%) scale(0, 0);
			width: 75%;
			height: 75%;
			border-radius: 50%;
			background-color: #fff;
			opacity: 0;
			-webkit-transition: 300ms;
			transition: 300ms;
		}
		.nav__slide--1 {
			margin-left: 0;
		}

		.nav-active:after {
			-webkit-transform: translate(-50%, -50%) scale(1, 1);
			transform: translate(-50%, -50%) scale(1, 1);
			opacity: 1;
		}

		.side-nav {
			position: absolute;
			width: 10%;
			height: 100%;
			top: 0;
			z-index: 20;
			cursor: pointer;
			opacity: 0;
			-webkit-transition: 300ms;
			transition: 300ms;
		}
		.side-nav:hover {
			opacity: .1;
		}
		.side-nav--right {
			right: 0;
			background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#eed7ff));
			background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
		}
		.side-nav--left {
			left: 0;
			background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(#eed7ff));
			background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
		}

		html {
			box-sizing: border-box;
			font-family: 'Open Sans', sans-serif;
		}

		*, *:before, *:after {
			box-sizing: inherit;
			margin: 0;
			padding: 0;
		}

		body {
			background-color: #000;
			overflow: hidden;
		}						

3. JAVASCRIPT

							//Chèn Jquery dô nghen
//

$(document).ready(function () {
			const $cont = $(".cont");
			const $slider = $(".slider");
			const $nav = $(".nav");
			const winW = $(window).width();
	const animSpd = 750; // Change also in CSS
	const distOfLetGo = winW * 0.2;
	let curSlide = 1;
	let animation = false;
	let autoScrollVar = true;
	let diff = 0;

	// Generating slides
	let arrCities = ["DevForum", "Frontend", "Template", "Selenium", "Testing"]; // Change number of slides in CSS also
	let numOfCities = arrCities.length;
	let arrCitiesDivided = [];

	arrCities.map((city) => {
		let length = city.length;
		let letters = Math.floor(length / 4);
		let exp = new RegExp(".{1," + letters + "}", "g");

		arrCitiesDivided.push(city.match(exp));
	});

	let generateSlide = function (city) {
		let frag1 = $(document.createDocumentFragment());
		let frag2 = $(document.createDocumentFragment());
		const numSlide = arrCities.indexOf(arrCities[city]) + 1;
		const firstLetter = arrCitiesDivided[city][0].charAt(0);

		const $slide = $(`
`); const letter = $(`
${firstLetter}
`); for (let i = 0, length = arrCitiesDivided[city].length; i < length; i++) { const text = $(`
${arrCitiesDivided[city][i]}
`); frag1.append(text); } const navSlide = $( `` ); frag2.append(navSlide); $nav.append(frag2); $slide.find(`.slide--${numSlide}__text-wrapper`).append(letter).append(frag1); $slider.append($slide); if (arrCities[city].length <= 4) { $(".slide--" + numSlide) .find(".slide__text") .css("font-size", "12vw"); } }; for (let i = 0, length = numOfCities; i < length; i++) { generateSlide(i); } $(".nav__slide--1").addClass("nav-active"); // Navigation function bullets(dir) { $(".nav__slide--" + curSlide).removeClass("nav-active"); $(".nav__slide--" + dir).addClass("nav-active"); } function timeout() { animation = false; } function pagination(direction) { animation = true; diff = 0; $slider.addClass("animation"); $slider.css({ transform: "translate3d(-" + (curSlide - direction) * 100 + "%, 0, 0)" }); $slider.find(".slide__darkbg").css({ transform: "translate3d(" + (curSlide - direction) * 50 + "%, 0, 0)" }); $slider.find(".slide__letter").css({ transform: "translate3d(0, 0, 0)" }); $slider.find(".slide__text").css({ transform: "translate3d(0, 0, 0)" }); } function navigateRight() { if (!autoScrollVar) return; if (curSlide >= numOfCities) return; pagination(0); setTimeout(timeout, animSpd); bullets(curSlide + 1); curSlide++; } function navigateLeft() { if (curSlide <= 1) return; pagination(2); setTimeout(timeout, animSpd); bullets(curSlide - 1); curSlide--; } function toDefault() { pagination(1); setTimeout(timeout, animSpd); } // Events $(document).on("mousedown touchstart", ".slide", function (e) { if (animation) return; let target = +$(this).attr("data-target"); let startX = e.pageX || e.originalEvent.touches[0].pageX; $slider.removeClass("animation"); $(document).on("mousemove touchmove", function (e) { let x = e.pageX || e.originalEvent.touches[0].pageX; diff = startX - x; if ((target === 1 && diff < 0) || (target === numOfCities && diff > 0)) return; $slider.css({ transform: "translate3d(-" + ((curSlide - 1) * 100 + diff / 30) + "%, 0, 0)" }); $slider.find(".slide__darkbg").css({ transform: "translate3d(" + ((curSlide - 1) * 50 + diff / 60) + "%, 0, 0)" }); $slider.find(".slide__letter").css({ transform: "translate3d(" + diff / 60 + "vw, 0, 0)" }); $slider.find(".slide__text").css({ transform: "translate3d(" + diff / 15 + "px, 0, 0)" }); }); }); $(document).on("mouseup touchend", function (e) { $(document).off("mousemove touchmove"); if (animation) return; if (diff >= distOfLetGo) { navigateRight(); } else if (diff <= -distOfLetGo) { navigateLeft(); } else { toDefault(); } }); $(document).on("click", ".nav__slide:not(.nav-active)", function () { let target = +$(this).attr("data-target"); bullets(target); curSlide = target; pagination(1); }); $(document).on("click", ".side-nav", function () { let target = $(this).attr("data-target"); if (target === "right") navigateRight(); if (target === "left") navigateLeft(); }); $(document).on("keydown", function (e) { if (e.which === 39) navigateRight(); if (e.which === 37) navigateLeft(); }); $(document).on("mousewheel DOMMouseScroll", function (e) { if (animation) return; let delta = e.originalEvent.wheelDelta; if (delta > 0 || e.originalEvent.detail < 0) navigateLeft(); if (delta < 0 || e.originalEvent.detail > 0) navigateRight(); }); });

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.