Call to Scroll - Mobile
How do I make an call to scroll - mobile?
What is a call to scroll - mobile? How do you make a call to scroll - mobile? This script and codes were developed by Luciano Tonet on 13 October 2022, Thursday.
Call to Scroll - Mobile - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Call to Scroll - Mobile</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="fullpage"> <div class="section"> <a href="#" class="m-menu-link"> <div class="m-mobile-icon"> <div class="m-touch"></div> </div> </a> </div> <div class="section text-center"> <h1>Great!</h1> <p>See the desktop Call to Scroll <a href="https://codepen.io/tonetlds/full/cwaLE/" target="_parent">here</a></hp> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Call to Scroll - Mobile - Script Codes CSS Codes
body{ background: #4d5d8d; color: #FFF;
}
.m-mobile-icon { background: none repeat scroll 0 0 rgba(0,0,0,0); border: 2px solid; border-color: #FFF; border-radius: 5px; bottom: 50px; height: 80px; left: 0; margin: 0 auto; position: absolute; right: 0; width: 40px; cursor: pointer; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear
}
.m-mobile-icon:hover { opacity: .3!important; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear
}
.m-mobile-icon .m-touch { -webkit-animation: 1.5s ease 0s normal none infinite magic-mobile-icon; -moz-animation: 1.5s ease 0s normal none infinite magic-mobile-icon; -o-animation: 1.5s ease 0s normal none infinite magic-mobile-icon; animation: 1.5s ease 0s normal none infinite magic-mobile-icon; border-radius: 50%; height: 15px; left: 0; margin-left: auto; margin-right: auto; margin-top: 60px; right: 0; width: 15px; background: #FFF
}
@-moz-keyframes magic-mobile-icon { 0% { margin-top: 60px; opacity: 0 } 30% { opacity: 1 } 100% { margin-top: 20px; opacity: 0 }
}
@-webkit-keyframes magic-mobile-icon { 0% { margin-top: 60px; opacity: 0 } 30% { opacity: 1 } 100% { margin-top: 20px; opacity: 0 }
}
@-o-keyframes magic-mobile-icon { 0% { margin-top: 60px; opacity: 0 } 30% { opacity: 1 } 100% { margin-top: 20px; opacity: 0 }
}
@keyframes magic-mobile-icon { 0% { margin-top: 60px; opacity: 0 } 30% { opacity: 1 } 100% { margin-top: 20px; opacity: 0 }
}
/* FOR DEMO */
.section:nth-child(2) { background: #444;
}
.text-center { text-align: center;
}
.section a { color: #09d3de;
}
Call to Scroll - Mobile - Script Codes JS Codes
$(document).ready(function() { $('#fullpage').fullpage();
});
Developer | Luciano Tonet |
Username | tonetlds |
Uploaded | October 13, 2022 |
Rating | 3 |
Size | 2,259 Kb |
Views | 18,216 |
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 |
Amazing Perspective Walking Background | 1,969 Kb |
Perspective background from old Semantic UI website | 3,044 Kb |
Background Color Change | 2,277 Kb |
Call to Scroll - Desktop | 2,251 Kb |
A Pen by Luciano Tonet | 4,516 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 audio play button | 72 | 2,148 Kb |
Splitted Layout | Hornebom | 2,162 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Simple content swap | Snografx | 1,859 Kb |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
Find The Penguin | Lelder | 2,212 Kb |
Template | Indra_z85 | 2,323 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!