DevShahidul’s gists

DevShahidul / play,pause,stop HTML5 video custom function.html

Last active May 16, 2019 09:57

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<title>Tswalu \| Happening Tswalu</title>

	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500" rel="stylesheet">
	<link type="text/css" rel="stylesheet" href="css/slick.css">

DevShahidul / wrap each line with span tag in paragraph.html

Last active May 15, 2019 09:49

Note: Please Don't use the float: left css in body-copy selector ;

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<title>Strider \| Home</title>

	<link type="text/css" rel="stylesheet" href="css/style.css">

DevShahidul / Image or div Follow mouse.html

Created April 16, 2019 13:07

See the example here >>> https://codepen.io/redspiderfish/pen/MYmeYz

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<title>Follow Mouse</title>

	<style>

Last active March 26, 2019 12:25

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<title>Endy \| Home</title>
	<link href="images/favicon.ico" rel="shortcut icon">
	</head>
	<body>

Created March 26, 2019 10:31

	// Extend jQuery addClass function to accept callback function
	var oAddClass = $.fn.addClass;
	var oRemoveClass = $.fn.removeClass;
	$.fn.addClass = function () {
	for (var i in arguments) {
	var arg = arguments[i];
	if ( !! (arg && arg.constructor && arg.call && arg.apply)) {
	arg();
	delete arg;
	}

DevShahidul / youtube-custom-play-pause-stop-btn.html

Created March 21, 2019 09:26

See the example here >>> https://codepen.io/AmrSubZero/pen/oLOYrA

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<title> Franchesca Watson \| Home-HD</title>

	<link type="text/css" rel="stylesheet" href="css/magnific-popup.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">

DevShahidul / Smoth scroll function.js

Created March 20, 2019 14:07

See here >>> http://jsfiddle.net/7dgrndw9/1/

	/* Smooth scroll */
	Math.easeOut = function (t, b, c, d) { t /= d; return -c * t*(t-2) + b; };

	(function() { // do not mess global space
	var
	interval, // scroll is being eased
	mult = 0, // how fast do we scroll
	dir = 0, // 1 = scroll down, -1 = scroll up
	steps = 50, // how many steps in animation
	length = 30; // how long to animate

DevShahidul / Type text effect in slider.html

Last active March 15, 2019 13:47

DevShahidul / Slick carousel only for mobile with custom navigation.html

Created February 24, 2019 07:16

See example in SnapScan project



	<div class="container">
	<div class="row no-gutters justify-content-center">
	<div class="col-12 col-md-6 text-center">
	<h4>Billing Solutions</h4>
	<p>Get paid quickly and easily with integrated billing options to send statements and invoices to your customers, patients and clients.</p>
	</div>
	</div>
	<div class="row" id="solution-card-carousel">

DevShahidul / single-page-nav-scroll-function.js

Created December 12, 2018 11:07

See the example on frontier project >>> http://staging.greenboxdesigns.com/frontier or >> http://webtricker.com/projects/frontier/

	//Navigation function
	var sections = $('.section-parent'),
	nav = $('nav.main-nav');
	//nav_height = $('.main-header-section').outerHeight();

	$(window).on('scroll', function (){
	var cur_pos = $(this).scrollTop();

	sections.each(function () {
	var top = $(this).offset().top - 5,

Shahidul Islam DevShahidul