LETTER DROP by Scroll
How do I make an letter drop by scroll?
What is a letter drop by scroll? How do you make a letter drop by scroll? This script and codes were developed by Massenjoy on 28 July 2022, Thursday.
LETTER DROP by Scroll - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LETTER DROP by Scroll</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="text"></div>
<div class="wrapper"></div>
<div class="wrapper section text-center"> <h1 class="appendClass letterDrop letter">Lorem Ipsum</h1>
</div>
<div class="wrapper section text-center"> <h2 class="appendClass letterDrop letter">Other Line Animation</h1>
</div>
<div class="wrapper"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
LETTER DROP by Scroll - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);
html, body { height: 100%; width: 100%; margin: 0; padding: 0; font-size: 100%; background: #EEEEEE; text-align: top center;
}
h1 { margin: 0; padding: 0; font-family: 'Raleway'; font-weight: 400; font-size: 2.4em; color: #9A12B3;
}
.letterDrop {
/* position: relative; */ top: 0.60em; display: run-in; display: inline-block;
/* display: table; */ text-transform: uppercase; letter-spacing: 0.5em; opacity: 0.8; transform: rotateX(-90deg); animation: letterDrop 1.2s ease 1 normal forwards;
}
@keyframes letterDrop { 10% { opacity: 0.5; } 20% { opacity: 0.8; top: 3.75em; transform: rotateX(-360deg); } 100% { opacity: 1; top: 4.50em; transform: rotateX(360deg); }
}
span:nth-child(2n) { color: #663399;
}
.milk{ height: 700px;
}
.text{ position: fixed;
}
h1,h2{ font-align: center;
}
.wrapper{ padding:200px 10px;
}
.wrapper:nth-child(2){ background: #e5e5e5;
}
.wrapper:nth-child(3){ background: #ffffff;
}
.wrapper:nth-child(4){ background: #e5e5e5;
}
LETTER DROP by Scroll - Script Codes JS Codes
jQuery.fn.letterDrop = function() { var obj = this; var drop = { arr : obj.text().split( '' ), range : { min : 1, max : 9 }, styles : function() { var dropDelays = '\n', addCSS; for ( i = this.range.min; i <= this.range.max; i++ ) { dropDelays += '.ld' + i + ' { animation-delay: 1.' + i + 's; }\n'; } addCSS = $( '<style>' + dropDelays + '</style>' ); $( 'head' ).append( addCSS ); }, main : function() { var dp = 0; obj.text( '' ); $.each( this.arr, function( index, value ) { dp = dp.randomInt( drop.range.min, drop.range.max ); if ( value === ' ' ) value = ' '; obj.append( '<span class="letterDrop ld' + dp + '">' + value + '</span>' ); }); } }; Number.prototype.randomInt = function ( min, max ) { return Math.floor( Math.random() * ( max - min + 1 ) + min ); }; // Create styles drop.styles(); // Initiate drop.main();
};
$(document).scroll(function(event) { $('.text').html("Scroll: " + document.body.scrollTop + "px"); if(document.body.scrollTop >= 400){ $( 'h1.letter' ).letterDrop(); $('h1.letter').removeClass('letter'); } if(document.body.scrollTop >= 830){ $( 'h2.letter' ).letterDrop(); $('h2.letter').removeClass('letter'); } if(document.body.scrollTop <= 370){ $('.appendClass').addClass('letter'); }
});
Developer | Massenjoy |
Username | massenjoy |
Uploaded | July 28, 2022 |
Rating | 3 |
Size | 2,761 Kb |
Views | 62,744 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by massenjoy | 1,630 Kb |
Preloader | 1,923 Kb |
ResponsiveVoice select, hover and input. | 3,151 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Fullscreen Parallax | Bassta | 3,313 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Speech bubbles | Something | 1,547 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Formations | Cantelope | 5,731 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!