BasicContext Scroll Example

Developer
Tobias Reich
Size
2,539 Kb
Views
42,504
  1. BasicContext Scroll Example Previews
  2. BasicContext Scroll Example HTML Codes
  3. BasicContext Scroll Example CSS Codes
  4. BasicContext Scroll Example JS Codes

How do I make an basiccontext scroll example?

Https://github.com/electerious/basicContext. What is a basiccontext scroll example? How do you make a basiccontext scroll example? This script and codes were developed by Tobias Reich on 24 August 2022, Wednesday.

BasicContext Scroll Example Previews
IQ Test

BasicContext Scroll Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>basicContext Scroll Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://s.electerious.com/basicContext/dist/basicContext.min.css'>
<link rel='stylesheet prefetch' href='http://s.electerious.com/basicContext/dist/themes/default.min.css'>
<link rel='stylesheet prefetch' href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="small">Small menu</a>
<a href="#" class="big">Big menu</a> <script src='http://s.electerious.com/basicContext/dist/basicContext.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

BasicContext Scroll Example - Script Codes CSS Codes

html { width: 100%; height: 100%;
}
body { text-align: center; min-height: 100%; font-size: 14px;
}
a { display: inline-block; margin: 50px 0; padding: 6px 10px; background: #4393e6; color: #fff; text-decoration: none; border-radius: 3px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}

BasicContext Scroll Example - Script Codes JS Codes

var onClickSmall = function(e) { var clicked = function() { alert('Item clicked!') } var items = [ { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked } ] basicContext.show(items, e)
}
var onClickBig = function(e) { var clicked = function() { alert('Item clicked!') } var items = [ { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked }, { title: 'Reset Login', icon: 'ion-person', fn: clicked }, { title: 'Help', icon: 'ion-help-buoy', fn: clicked }, { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true }, { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false }, { }, { title: 'Logout', icon: 'ion-log-out', fn: clicked }, ] basicContext.show(items, e)
}
document.querySelector('a.small').addEventListener('click', onClickSmall)
document.querySelector('a.big').addEventListener('click', onClickBig)
BasicContext Scroll Example - Script Codes
BasicContext Scroll Example - Script Codes
Home Page Home
Developer Tobias Reich
Username electerious
Uploaded August 24, 2022
Rating 3
Size 2,539 Kb
Views 42,504
Do you need developer help for BasicContext Scroll Example?

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!

Tobias Reich (electerious) Script Codes
Name
BasicContext Position Example
Material Slider Dots
Swipe detection
CSS only tooltips with a bounce effect
Color Fan Deck
BasicContext Basic Example
Letter mix blend mode
JS controlled CSS variables
BasicContext Custom Position Example
BasicScroll Default Demo
Create amazing marketing copy 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!