i'm using Shape.so animated illustrator on html page they are providing json code for that can anyone help how to use that json in html.
I have json file, you can export json from https://shape.so/app/icons/
thanks in advance
You can import Lottie and use loadAnimation method as described here:
https://airbnb.io/lottie/#/web?id=usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#anim {
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="anim"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js" type="text/javascript"></script>
<script>
var element = document.getElementById('anim');
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});
</script>
</body>
</html>
Related
I'm using mapbox to make a map. I don't know if my map is being rendered or not cause the only i could see on the screen is the pointer and i can't even open the console to read the mistake. Please help me to find out if there's anything wrong with my codes! Thank you so much:
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<title>Document</title>
<style>
body {
margin: 0;
}
#map {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="main.js"></script>
</body>
</html>
My JS:
mapboxgl.accessToken = 'pk.eyJ1IjoiZGh0NzZkeThjIiwiYSI6ImNrdjd0Zm92cDF4aGMyb2wwenhtbWJidjUifQ.KUBtTY1kI2SOMFXkKeerWQ';
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, {
enableHighAccuracy: true
})
function successLocation(position) {
console.log(position)
setupMap([position.coords.longtitude, position.coords.latitude])
}
function errorLocation() {
}
function setupMap(center) {
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: center
});
}
Hey everyone i am trying to console.log top property of an element in javascript but i only thing i see in the console is a blank line.
Also when i try to console.dir element i the top property is an empty string even though i set the top property to 100px.
Question is how do i display the top propert of an element using .style.top
CSS
img {
width: 100px;
position: absolute;
top: 100px;
left: 10px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Coin Game Starter</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
<img id="coin" src="https://myrealdomain.com/images/gold-coin-gif-1.gif" alt="">
<script src="app.js"></script>
</body>
</html>
JS
let player = document.querySelector("#player").style.top
console.log(player)
To get the CSS properties to Javascript.
var element = document.getElementById('player');
var styles = window.getComputedStyle(element);
var top = styles.getPropertyValue('top');
console.log(top); // 100px
I came across a problem using Lottie for the first time in my webpack project.
As I usually do, i put the script tag with the Lottie src path at the end of the body tag, but this resulted in an error in the console: bodymovin is not defined at...
I think it's because I'm using webpack, that the Lottie script is loaded in after my index.js?
I'm not really sure where i should put my script tag then.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<canvas id="canvas" width="200" height="200"></canvas>
</div>
<h1>Test</h1>
<button class="button">Press me to light led</button>
<p class="potentiometer"></p>
<div class="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
</body>
</html>
const init = () => {
const bm = document.querySelector('.bm');
const anim = bodymovin.loadAnimation({
container: bm,
path: `../assets/eye.json`,
renderer: 'canvas',
loop: true,
autoplay: true
})
Im quite a beginner, experimenting with SVG animations.
I have made a animation and loaded it in my simple html page with Lottie.
But I been trying to make it destroy itself and show the rest of the page content, which is the header and p.
I seen this code, googling this, but not sure where to put it, went for what I thought was logical, and paste it right under. But did not get what I wanted.
ani.addEventListener('complete', function(){
ani.destroy()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="master.css">
<script src="master.js"></script>
<script src="lottie.js"></script>
<title>Document</title>
</head>
<body onload="start()">
<div id="velkommen"></div>
<header>
<h1>Min header</h1>
</header>
<p>tekstteksttekstketkekte</p>
</body>
</html>
window.onload(start())
function start(){
var container = document.getElementById("velkommen");
var animation = bodymovin.loadAnimation({
container: container,
renderer: 'svg',
loop: false,
autoplay: true,
path: 'data.json'
});
}
I found out! Incase someone else was wondering :
function start(){
var anim;
var animdata ={
container: document.getElementById("velkommen"),
renderer: "svg",
loop: false,
autoplay: true,
path: "data.json"
};
anim = bodymovin.loadAnimation(animdata);
anim.addEventListener('complete',stopa);
}
function stopa(){
document.getElementById("velkommen").style.display = "none";
}
I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX