How we can create a draggable slider with parallax slide effect using JS? Solution: See this jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask.
Previously I have shared some jquery sliders, but this is a draggable slider without any next and previous buttons. Basically, draggable sliders don’t have buttons for navigation next or previous. You have to hold a mouse click or touch tap and slide left or right to change slide items. But some draggable slider contains progress indicator on the bottom side, you can directly jump to any image by clicking on them.
Today I am sharing drag-slider with a transparent letter mask over on the image. Basically, there are 5 images in the slider and each image has different text. All images have an overlay effect with the first letter of the text. In other words, every image has a text and according to its first letter, there is a big transparent letter with a mask effect. Also, there are 5 dots icons on the bottom side to indicate the progress of the slider.
So, Today I am sharing jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask. There I have used jQuery for functioning and as we know jQuery is a JS library, that’s why I am putting this program in JavaScript program. The main functions of this program based on jQuery and CSS, also CSS has an important part in the program.
If you are thinking now how this draggable slider actually is, then see the preview given below.
Preview Of Parallax Effect Drag-Slider
See this video preview to getting an idea of how this drag-slider looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Bootstrap Carousel Slider
- Floating Input Label Animation
- Inline Select Option Dropdown
- JavaScript Custom Map Marker
jQuery Draggable Slider With Transparent Letter Mask
Before sharing source code, let’s talk about it. First I have created a main div named container inside that I have placed a div for slide items, a div for bottom slide indicator, and other two divs for left and right drag slider. HTML has a very little part in this program because all elements are dynamically created using jQuery. In the HTML file, I have linked other files like CSS, JS, and jQuery CDN file.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave the main container divs height 100vh for the full-screen slider. All the elements have 750ms animation dealy using CSS transition: command. All the slider item’s div are created using jQuery and put images using CSS. I have placed images in the background and the text using CSS background-image: command inside the divs which are dynamically created by JS (info).
jQuery handling here the main features of the program. In the JS file, I have put all the texts for image and jQuery pick first letter of the text and put it over on the image with transparent color like a mask effect. Also, it is creating divs and other elements inside the JS file that’s why HTML has less part. Using JQuery I have done many things that I can’t explain in writing. You will understand the whole program structure after getting the codes.
For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Responsive Parallax Drag-Slider | Webdevtrick.com</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="slider"></div> <div class="nav"></div> <div data-target='right' class="side-nav side-nav--right"></div> <div data-target='left' class="side-nav side-nav--left"></div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ .container { 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 { 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 { 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 { 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 { 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: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 15; } .slide__letter { position: absolute; display: flex; align-items: 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://images.pexels.com/photos/33488/navigation-car-drive-road.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://images.pexels.com/photos/33488/navigation-car-drive-road.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover; } .slide--2__darkbg { left: -50%; background: url("https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg") 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://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?") center center no-repeat; background-position: 0px center, 0px center; background-size: cover; } .slide--3__darkbg { left: -100%; background: url("https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg") 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://images.pexels.com/photos/323780/pexels-photo-323780.jpeg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover; } .slide--4__darkbg { left: -150%; background: url("https://images.pexels.com/photos/270669/pexels-photo-270669.jpeg") 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://images.pexels.com/photos/270669/pexels-photo-270669.jpeg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover; } .slide--5__darkbg { left: -200%; background: url("https://images.pexels.com/photos/414974/pexels-photo-414974.jpeg") 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://images.pexels.com/photos/414974/pexels-photo-414974.jpeg") 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; 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; transition: 300ms; } .side-nav:hover { opacity: .1; } .side-nav--right { right: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%); } .side-nav--left { left: 0; 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; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).ready(function () { const $cont = $('.container'); const $slider = $('.slider'); const $nav = $('.nav'); const winW = $(window).width(); const animSpd = 750; const distOfLetGo = winW * 0.2; let curSlide = 1; let animation = false; let autoScrollVar = true; let diff = 0; // Generating slides let arrCities = ['Automobiles', 'Coding', 'Real Estate', 'Search Engine', 'Graphics']; 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 = $(`<div data-target="${numSlide}" class="slide slide--${numSlide}"> <div class="slide__darkbg slide--${numSlide}__darkbg"></div> <div class="slide__text-wrapper slide--${numSlide}__text-wrapper"></div> </div>`); const letter = $(`<div class="slide__letter slide--${numSlide}__letter"> ${firstLetter} </div>`); for (let i = 0, length = arrCitiesDivided[city].length; i < length; i++) { const text = $(`<div class="slide__text slide__text--${i + 1}"> ${arrCitiesDivided[city][i]} </div>`); frag1.append(text); } const navSlide = $(`<li data-target="${numSlide}" class="nav__slide nav__slide--${numSlide}"></li>`); 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(); }); }); |
That’s It. Now you have successfully created jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask Effect. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Bro, I need to edit the number of slides but it’s throwing an error, I want more than 5 slides, can you put me through??