Home Web Development JavaScript jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask

jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask

November 17, 2019

5966

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.

Live Demo

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.

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.

<!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>

<!DOCTYPE html>

<head>

<title>Responsive Parallax Drag-Slider | Webdevtrick.com</title>

</head>

<body>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* 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;
}

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.

// 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();
  });
});

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>`);

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.

1 COMMENT

LekanSaheed January 24, 2021 At 4:48 pm

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??

Reply

jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask

Preview Of Parallax Effect Drag-Slider

jQuery Draggable Slider With Transparent Letter Mask

1 COMMENT

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY