A Pen by B.

Developer
B.
Size
5,519 Kb
Views
18,216
  1. A Pen by B. Previews
  2. A Pen by B. HTML Codes
  3. A Pen by B. CSS Codes
  4. A Pen by B. JS Codes

How do I make an a pen by b.?

What is a a pen by b.? How do you make a a pen by b.? This script and codes were developed by B. on 21 December 2022, Wednesday.

A Pen by B. Previews
IQ Test

A Pen by B. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by B.</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'>
<link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'>
<link rel='stylesheet prefetch' href='css/ekgkxo.css'>
<link rel='stylesheet prefetch' href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.1/mapbox-gl.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ #map { height: 100vh;
}
.map-overlay-container { position: absolute; width: 25%; height: 100%; top: 0; left: 0; z-index: 1;
}
.map-overlay { font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; background-color: #fff; border-radius: 3px; padding: 10px; height: 100vh; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.map-overlay h2,
.map-overlay p { margin: 0 0 10px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='map'></div>
<div class='map-overlay-container'> <div class='map-overlay'> <h2 id='location-title'></h2> <p id='location-description'></p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.1/mapbox-gl.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by B. - Script Codes CSS Codes

#map { height: 100vh;
}
.map-overlay-container { position: absolute; width: 25%; height: 100%; top: 0; left: 0; z-index: 1;
}
.map-overlay { font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; background-color: #fff; border-radius: 3px; padding: 10px; height: 100vh; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.map-overlay h2,
.map-overlay p { margin: 0 0 10px;
}

A Pen by B. - Script Codes JS Codes

mapboxgl.accessToken = 'pk.eyJ1Ijoid2VhcmVib2xkIiwiYSI6IjgxSHN2SVUifQ.0uwNWLHdiyTQcJ-rnqEm_w';
var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', center: [-81.776071, 41.4950498], maxZoom: 16, minZoom: 9, zoom: 14, pitch: 60, // pitch in degrees bearing: -60, // bearing in degrees zoom: 10
});
var title = document.getElementById('location-title');
var description = document.getElementById('location-description');
var locations = [{ "id": "1", "title": "The Bronx", "description": "content", "camera": { center: [-73.8709, 40.8255], zoom: 12.21, pitch: 50 }
}, { "id": "2", "title": "Manhattan", "description": "Content", "camera": { center: [-74.0070, 40.7437], bearing: 25.3, zoom: 11.5, pitch: 60 }
}, { "title": "Clerk", "description": "Content", "camera": { center: [-81.776071, 41.4950498], zoom: 14, pitch: 60, // pitch in degrees bearing: -60, // bearing in degrees zoom: 10 }
}];
function playback(index) { title.textContent = locations[index].title; description.textContent = locations[index].description; // Animate the map position based on camera properties console.log(locations[index].camera); // map.flyTo(locations[index].camera); map.flyTo({ // These options control the ending camera position: centered at // the target, at zoom level 9, and north up. center: locations[index].camera.center, zoom: locations[index].camera.zoom, bearing: 1, // These options control the flight curve, making it move // slowly and zoom out almost completely before starting // to pan. speed: 0.6, // make the flying slow curve: 1, // change the speed at which it zooms out // This can be any easing function: it takes a number between // 0 and 1 and returns another number between 0 and 1. easing: function (t) { return t; } }); map.once('moveend', function() { // Duration the slide is on screen after interaction window.setTimeout(function() { // Increment index index = (index + 1 === locations.length) ? 0 : index + 1; playback(index); }, 5000); // After callback, show the location for 5 seconds. });
}
// Display the last title/description first
title.textContent = locations[locations.length - 1].title;
description.textContent = locations[locations.length - 1].description;
map.on('load', function() { // Start the playback animation for each borough playback(0);
});
A Pen by B. - Script Codes
A Pen by B. - Script Codes
Home Page Home
Developer B.
Username wearebold
Uploaded December 21, 2022
Rating 3
Size 5,519 Kb
Views 18,216
Do you need developer help for A Pen by B.?

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!

B. (wearebold) Script Codes
Name
Simple Preloader
Simple Accordion
Pure CSS3 Batman Logo
Snap.svg Mask faces
Particle Earth Map
Polaroid
Simple Slick Sync Slider
Instagram Feed with Lightbox2
Alerts
Slide Content Module
Create amazing SEO content 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!