.my-element {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
再加一段 js 去判斷要調整的高度。
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
let Google_appId = "*****.apps.googleusercontent.com";
// Called when Google Javascript API Javascript is loaded
function HandleGoogleApiLibrary() {
// Load "client" & "auth2" libraries
gapi.load('client:auth2', {
callback: function () {
// Initialize client & auth libraries
gapi.client.init({
clientId: Google_appId,
scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me'
}).then(
function (success) {
// Google Libraries are initialized successfully
// You can now make API calls
console.log("Google Libraries are initialized successfully");
},
function (error) {
// Error occurred
console.log(error);// to find the reason
}
);
},
onerror: function () {
// Failed to load libraries
console.log("Failed to load libraries");
}
});
}
function GoogleLogin() {
// API call for Google login
gapi.auth2.getAuthInstance().signIn().then(
function (success) {
// Login API call is successful
console.log(success);
let Google_ID = success["El"];
//這邊可以寫抓到登入資訊後要做的事，比如將會員資料寫到資料庫之類的
},
function (error) {
// Error occurred
// console.log(error) to find the reason
console.log(error);
}
);
}
接著就可以這樣拿到 google 登入後的資料了。
// API call to get user profile information
gapi.client.request({ path: 'https://www.googleapis.com/plus/v1/people/me' }).then(
function(success) {
// API call is successful
var user_info = JSON.parse(success.body);
// user profile information
console.log(user_info);
},
function(error) {
// Error occurred
// console.log(error) to find the reason
}
);
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
});
發表文章
