Animation iFrame Google maps - Vanilla Javascript

Developer
Kévin Joffard
Size
2,322 Kb
Views
24,288
  1. Animation iFrame Google maps - Vanilla Javascript Previews
  2. Animation iFrame Google maps - Vanilla Javascript HTML Codes
  3. Animation iFrame Google maps - Vanilla Javascript CSS Codes
  4. Animation iFrame Google maps - Vanilla Javascript JS Codes

How do I make an animation iframe google maps - vanilla javascript?

What is a animation iframe google maps - vanilla javascript? How do you make a animation iframe google maps - vanilla javascript? This script and codes were developed by Kévin Joffard on 11 October 2022, Tuesday.

Animation iFrame Google maps - Vanilla Javascript Previews
IQ Test

Animation iFrame Google maps - Vanilla Javascript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animation iFrame Google maps - Vanilla Javascript</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <a href="#" class="button">Click to resize</a> <div class="container"> <div class="project"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d338195.2873427642!2d2.2500731!3d48.530343949999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sfr!4v1490778528424" frameborder="0" style="border:0" allowfullscreen class="map"></iframe> </div> </div>
</body> <script src="js/index.js"></script>
</body>
</html>

Animation iFrame Google maps - Vanilla Javascript - Script Codes CSS Codes

* { padding: 0; margin: 0;
}
.button { padding: 10px; margin: 2rem auto; width: 6%; background-color: #FFC72C; display:block; text-decoration: none; color: #071D49;
}
.button:hover{ background-color: #071D49; color: #FFC72C;
}
.container { height: 90vh; width: 1400px; margin: 0 auto; background-color: blue;
}
.project { height: 90vh; width: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.map { width: 100%; height: 90vh; display: block; transition:all 1s linear;
}
.mapAnimationIn{ animation: resize-gmap 5s; animation-fill-mode: forwards; display: block;
}
/* Keyframe resize Gmap */
@keyframes resize-gmap { from { height: 90vh; width: 100%; } to { height: 36vh; width: 20vw; transform: translate(0,54vh); }
}

Animation iFrame Google maps - Vanilla Javascript - Script Codes JS Codes

var start = document.querySelector('.button'), gmap = document.querySelector('.map');
start.addEventListener('click', function () { gmap.classList.add('mapAnimationIn'); gmap.classList.remove('map');
}, false);
function loadBG(){ document.getElementByClassName("project").style.backgroundImage="url(https://upload.wikimedia.org/wikipedia/commons/0/07/Project_Jewel_Photo_1.jpg)";
}
window.onload=loadBG();
Animation iFrame Google maps - Vanilla Javascript - Script Codes
Animation iFrame Google maps - Vanilla Javascript - Script Codes
Home Page Home
Developer Kévin Joffard
Username kejoff
Uploaded October 11, 2022
Rating 3
Size 2,322 Kb
Views 24,288
Do you need developer help for Animation iFrame Google maps - Vanilla Javascript?

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!

Kévin Joffard (kejoff) Script Codes
Name
Footer Grid
Product Page
Aframe - Hello Metaverse Testing
Grid 2 columns test
Footer new generation
Landing Page 3 columns oblique
Vertical Accordeon Menu
Experimentation - Gmaps Colors
Create amazing love letters 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!