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";
}
Related
I've been learning HTML, CSS & javascript these last few weeks. All the previous coding experience I've had is with C++ from my CS courses so I'm new to front end development.
I wrote some javascript in the HTML index page and the functions work properly. However, when I add it into an external .js file, the program stops working.
Here's the index.html file:
<!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">
<link rel="stylesheet" href="/style.css"/>
<title> Progress Bar </title>
</head>
<body>
<audio id="music" src="trax/coldWorld.wav" controls></audio>
<div class="progress_bar" id="progress_bar">
<div class="progressed" id="progressed"></div>
</div>
</body>
<script src="/audio.js"></script>
</html>
The .js file:
var music = document.getElementById('music');
var progressed = document.getElementById('progressed');
var progress_bar = document.getElementById('progress_bar');
music.ontimeupdate = function(e) {
progressed.style.width = Math.floor(music.currentTime *100 / music.duration) + "%";
}
progress_bar.onclick = function(e) {
music.currentTime = ((e.offsetX / progress_bar.offsetWidth) * music.duration);
}
You can try moving the script tag inside the body tag and correcting the relative path
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<script src="./audio.js"></script>
</body>
</html>
I'm new to vue and have been trying to include a google sign in button into my webpage. However, there is an error that states that "gapi is undefined" in my mounted(). How do i fix this? I've also tried initializing gapi but I don't know where to put that.
<template>
<div id = "signin"><div class="g-signin2">Sign in with LFA Email</div></div>
</div>
</template>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
import UserDataService from "../services/UserDataService";
export default {
data(){
return {
emailAddress:"",
signedIn:false
};
},
methods:{
onSignIn(user){
const profile = user.getBasicProfile()
this.emailAddress =profile.getEmail()
console.log(this.emailAddress)
if(this.emailAddress.indexOf("#students.org")>-1){
UserDataService.create(this.emailAddress)
this.signedIn = true
}
else{
alert("Please sign in with an LFA Email Account")
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
this.signedIn=false
}
}
},
mounted() {
gapi.signin2.render('signin', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': this.onSuccess,
})
}
}
</script>
<style>
#import '../../public/stylesheet.css';
</style>
You can't put this tag <script src="https://apis.google.com/js/platform.js"></script> in Single File Component.
Put this tag in your public/index.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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>t-vue</title>
</head>
<body>
<noscript>
<strong>We're sorry but t-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://apis.google.com/js/platform.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
Besides that, you need also to remove the attributes async and defer. Because when you call the gapi variable in mounted the script didn't download yet.
The correct script is: <script src="https://apis.google.com/js/platform.js"></script>
PS: I create a minimal example that works for me, try this in your computer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button #click="test">Click Here</button>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
let app = new Vue({
el: '#app',
methods: {
test() {
console.log('method', gapi);
},
},
mounted() {
console.log('mounted', gapi);
},
});
</script>
</body>
</html>
Not sure if you still need help with this, but I had to explicitly assign the gapi variable I see in all these examples to window.gapi by doing this at the beginning of the Mounted() method:
let gapi = window.gapi
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>
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
})
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