Skip to content

Instantly share code, notes, and snippets.

View DevShahidul's full-sized avatar
🎯
Focusing

Shahidul Islam DevShahidul

🎯
Focusing
4 followers · 11 following
  • http://webtricker.com/
View GitHub Profile
@DevShahidul
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
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>
@DevShahidul
DevShahidul / Adding and removing classes when viewport element or section on page scroll.html
Last active March 26, 2019 12:25
See the example here >>> https://codereview.stackexchange.com/questions/120537/adding-and-removing-classes-at-different-heights-on-page-using-jquery
<!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>
@DevShahidul
DevShahidul / Extend jQuery addClass and removeClass function to accept callback function.js
Created March 26, 2019 10:31
See the example here >>> https://stackoverflow.com/questions/14567990/how-to-add-a-callback-function-to-the-addclass-method-of-jquery
// 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
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
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
DevShahidul / Type text effect in slider.html
Last active March 15, 2019 13:47
See the reference here >>> https://stackoverflow.com/questions/51983080/slick-carousel-after-slide-change-run-typewriter-function
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.slick-rick .phrase {
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
color: black;
background: lightgray;
@DevShahidul
DevShahidul / Slick carousel only for mobile with custom navigation.html
Created February 24, 2019 07:16
See example in SnapScan project
@DevShahidul
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,
@DevShahidul
DevShahidul / slick total slide count.html
Created November 15, 2018 03:41
See the example on Ramzy ride project
<!-- Slider counter structer -->
<div class="slide-count-wrap trck-count">
<div class="prev"></div>
<div class="next"></div>
<span class="current"></span> /
<span class="total"></span>
</div>
<script>