VelocityJS, fade on scroll

Developer
Eduard Mayer
Size
2,296 Kb
Views
58,696
  1. VelocityJS, fade on scroll Previews
  2. VelocityJS, fade on scroll HTML Codes
  3. VelocityJS, fade on scroll CSS Codes
  4. VelocityJS, fade on scroll JS Codes

How do I make an velocityjs, fade on scroll?

What is a velocityjs, fade on scroll? How do you make a velocityjs, fade on scroll? This script and codes were developed by Eduard Mayer on 13 July 2022, Wednesday.

VelocityJS, fade on scroll Previews
IQ Test

VelocityJS, fade on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>VelocityJS, fade on scroll</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <nav class="js-animate-on-scroll"></nav> <footer></footer> <button class="js-animate-on-scroll"></button>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

VelocityJS, fade on scroll - Script Codes CSS Codes

nav { position: fixed; width: 100%; height: 80px; top: 0; left: 0; background: red; display: none;
}
button { position: fixed; height: 70px; width: 80px; background: blue; border: 0; right: 10px; bottom: 30px; display: none;
}
body { height: 1200px;
}
footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: lightblue;
}

VelocityJS, fade on scroll - Script Codes JS Codes

var $scrolled = false;
$('.js-animate-on-scroll').bind('showelement hideelement');
$(window).on('scroll', function() { var y = $(document).scrollTop(); var eventh; if (y > 100) { $('footer').html('reached'); eventh = 'showelement'; } else { $('footer').html('nope'); eventh = 'hideelement'; } $('.js-animate-on-scroll').trigger(eventh);
});
$('.js-animate-on-scroll') .on('showelement', function() { if(!$(this).is(':visible')) { $(this).velocity('stop');	$(this).velocity('fadeIn'); }	}) .on('hideelement', function() { if($(this).is(':visible')) { $(this).velocity('stop');	$(this).velocity('fadeOut'); }	});
VelocityJS, fade on scroll - Script Codes
VelocityJS, fade on scroll - Script Codes
Home Page Home
Developer Eduard Mayer
Username codewunder
Uploaded July 13, 2022
Rating 3
Size 2,296 Kb
Views 58,696
Do you need developer help for VelocityJS, fade on scroll?

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!

Eduard Mayer (codewunder) Script Codes
Name
A Pen by Eduard Mayer
Social Slides
Responsive GTA V Slider
A Pen by Eduard Mayer
Whatsapp PTT Animation
Animated Ubuntu Touch-styled checkboxes
Scrollable see-through headline
Social Sharing Buttons
Infotype SVG Animation
Enlarge text with buttons and js, with limited max- and min sizes
Create amazing Facebook ads with AI!

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!