I have published a web release of my flutter application. I edited the index.html in the built files after running flutter build web.
here is the index.html file:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter application.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="wb">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>wb</title>
<link rel="manifest" href="manifest.json">
<style>
:root {
--yellow: #5194C0;
--red: #2D6AAB;
--blue: #164588;
--violet: #0E3476;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #D5E6EF;
background-image: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,153,212,0) calc(15% + 100px), rgba(0,99,138,0) calc(85% + 100px), rgba(0,0,0,0.15) 100%);
}
div.container {
display: flex;
justify-content: center;
align-items: center;
}
div > div {
width: 2vw;
height: 2vw;
border-radius: 100%;
margin: 2vw;
background-image: linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%);
animation: bounce 1.5s 0.5s linear infinite;
}
.yellow {
background-color: var(--yellow);
animation-delay: 0.0s;
}
.red {
background-color: var(--red);
animation-delay: 0.15s;
}
.blue {
background-color: var(--blue);
animation-delay: 0.3s;
}
.violet {
background-color: var(--violet);
animation-delay: 0.45s;
}
#keyframes bounce {
0%, 50%, 100% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
75% {
transform: scale(1.2);
}
}
</style>
</head>
<body>
<div class="container">
<div class="yellow"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="violet"></div>
</div>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
At the very first time it gets stuck at the loading screen displayed in the beginning and nothing will happen, no matter how much you wait. But the second time the loading animation will disappear and the first page will be displayed. I have tried different things like the code in the flutter gallery web app but I got the same result.
I wonder why this happens.
Related
I am trying to have a video play before the site loads. After a few successful reloads, the video stopped playing and I cannot get it to work again. I am not sure why this is happening as it did work a couple times initially! I followed the instructions in this video but am not getting the same results (yes, my loader content is different than theirs). Please help! Thanks!
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>My Website</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="loaderWrap">
<span class="loader">
<span class="loader-inner">
<div class="content">
<video autoplay>
<source src="video_source.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</span>
</span>
</div>
<h1>HELLO WORLD</h1>
<script>
window.addEventListener("load",function () {
const loader = document.querySelector(".loader");
loader.loaderWrap += " hidden"; // class hidden loader
});
</script>
</body>
</html>
CSS:
h1 {
color: black;
font-family: sans-serif;
}
body {
background-color: black;
}
.content{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.loaderWrap {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.loader{
display: inline-block;
width: 100%;
height: 100%;
position: relative;
background-color: black;
animation: loader-inner 2s infinite ease-in;
}
.loader-inner{
vertical-align: top;
display: inline-block;
width: 100%;
background-color: black;
animation: loader-inner 2s infinite ease-in;
}
I'm trying to make an div which follows your cursor but I want it to like, disappear if someone uses a touch screen device. Is it possible to do this with only CSS or plain JAVASCRIPT?
<!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" />
<title>Document</title>
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
background: #111;
}
#box {
position: fixed;
z-index: 824809238;
border-radius: 50%;
width: 50px;
height: 50px;
border: 3px solid dodgerblue;
top: var(--y);
left: var(--x);
transform: translate(-50%, -50%);
filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
animation: animate 2s linear infinite;
}
#keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById("box");
window.addEventListener("mousemove", (e) => {
box.style.top = `${e.clientY}px`;
box.style.left = `${e.clientX}px`;
box.style.opacity = "1";
});
window.addEventListener("mouseout", () => {
box.style.transition = "opacity 0.5s ease";
box.style.opacity = "0";
});
</script>
</body>
</html>
This is my code but I have no idea how to make it disappear with touch screen devices as I said.
Any Ideas?
Use touchstart/touchend events:
window.addEventListener("touchstart", () => {
box.style.display = 'none';
})
window.addEventListener("touchend", () => {
box.style.display = 'block';
})
I made an animation to the h1 element using CSS, now I want the animation to occur when the h1 element comes into the viewport completely when the user scrolls down.
By the time the user scrolls down the page, the animation has already occurred.
I want the animation to occur only when the h1 element enters the viewport by adding the class .showtext to the span element.
Cannot set up a proper intersection observer, plz help
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
display: inline-block;
overflow: hidden
}
.page1{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.page2{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.showtext{
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
#keyframes reveal {
0% {
transform: translate(0,100%);
}
100% {
transform: translate(0,0);
}
}
<!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" />
<title>LNPD02</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page1">
<h1>Scroll down</h1>
</div>
<div class="page2">
<h1 class="text"><span class="hidetext showtext">Animated Text</span></h1>
</div>
</body>
</html>
You can check it with javascript. A function is triggered every time the user scrolls the page. If the element's position is greater than the screen's top and less than the screen's bottom that is in the viewport, toggle the classes to make the animaiton.
var text = document.querySelector('.text')
function scrolListener(e){
var screenTop = document.scrollingElement.scrollTop;
var screenBottom = screenTop + innerHeight;
var textTop = text.getBoundingClientRect().top
if ( textTop < screenBottom && textTop < screenTop)
{
text.children[0].classList.add("showtext");
text.children[0].classList.remove("hidetext");
}
}
document.onscroll = scrolListener
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
display: inline-block;
overflow: hidden;
}
.page1 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.page2 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.text span {
transition: .3s;
}
.showtext {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.hidetext {
opacity: 0;
transform: translate(0, 100%);
}
#keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
<!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" />
<title>LNPD02</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page1">
<h1>Scroll down</h1>
</div>
<div class="page2">
<h1 class="text"><span class="hidetext">Animated Text</span></h1>
</div>
</body>
</html>
I've tried looking for a fix everywhere but couldn't find a single clue on why this isn't working. It works over everything that isn't inside another div/container/wrapper.
This is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://kit.fontawesome.com/1b75432c09.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<body>
<div>
<p>Some text i want the cursor to expand on</p>
</div>
<div class="cursor"></div>
<div class="cursor1"></div>
var cursor = document.querySelector(".cursor");
var cursor1 = document.querySelector(".cursor1");
document.addEventListener("mousemove", function(e) {
cursor.style.cssText = cursor1.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px";
});
</body>
</html>
.cursor {
position: fixed;
width: 50px;
height: 50px;
border: 1px solid rgb(255, 208, 106);
background: none;
border-radius: 50%;
pointer-events: none;
left: 0;
top: 0;
transform: translate(-50%, -50%);
transition: 0.1s;
z-index: 11;
}
.cursor1 {
position: fixed;
width: 8px;
height: 8px;
background-color: rgb(255, 253, 106);
border-radius: 50%;
pointer-events: none;
left: 0;
top: 0;
transform: translate(-50%, -50%);
transition: 0.15s ease;
z-index: 10;
}
div p:hover ~ .cursor {
transform: translate(-50%, -50%) scale(1.25);
background-color: white;
opacity: 0.5;
}
div p:hover ~ .cursor1 {
opacity: 0;
}
It only works on parents like div, footer, header, but as soon as I become more explicit, for example footer p it just doesn't do anything
Explanation
In A ~ B, ~ is a general sibling selector which selects all the B elements that are sibling to A. Note both the elements must have the same parent.
Like in your condition:
div p:hover ~ .cursor here ~ general sibling selector only works when both p and .cursor elements have same parent div
I am making a website and I want it to be completely mobile responsive. I thought I had achieved that with the header until I had a look at it with my ipad. The "Trasnform: translateX(-100%);" statement works on everything except IOS devices I tried it on my android phone and it worked perfectly. I have tried plenty of things including using prefixes like -webkit- and using the "!important" statement. I have been searching around the web but I can't find anything that solves my problem. Here's the code.
HTML
<!DOCTYPE html>
<h<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="js/header.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="wrapper">
<div class="menu-icon">
<div class="line first"></div>
<div class="line second"></div>
<div class="line third"></div>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Forums</li>
<li>About Us</li>
<li>Role Finder</li>
<li>ORBAT</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="featured">
<h1 class="devMode"> Development Mode</h1>
<p class="devModeText">Our 100% mobile friendly website is still under development. If you would like to provide feedback or suggestion please post them here, anything is helpful!</p>
</div>
</div>
</body>
</html>
CSS
#media screen and (max-width: 810px) {
/*header*/
.nav {
margin: 15px -40px ;
background-color: #3f3f3f;
transform: translateX(-100%);
transition: 0.6s ease;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
}
.menu-icon {
position: relative;
margin-left: 10px;
display: block;
height: 54px;
width: 54px;
background-color: #2a2a2a;
/*border: 0.75px solid #000;*/
border-radius: 50%;
}
.line {
width: 38px;
height: 2px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.logo {
float: right;
}
.nav ul li {
list-style: none;
display: block;
padding: 10px 120px 10px 30px;
}
.open {
transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
}
.first {
position: relative;
top: 15px;
margin: auto;
}
.second {
position: relative;
top: 20px;
margin: auto;
}
.third {
position: relative;
top: 25px;
margin: auto;
}
/*end of header*/
.container {
margin: 0 10px 0 10px;
}
}
JS
$(function() {
$('.menu-icon').on('click', function(){
$('.nav').toggleClass('open');
});
});
UPDATE: My website was actually cached so opted into development mode with Cloudflare and turns out both methods work. Thank you so much to everybody who responded so quickly unlike me.
While you shouldn't have to, you might want to try translate3d(x,y,z) instead of translateX(x). For example:
-webkit-transform: translate3d(-100%,0,0);
Reasoning is taken from this GitHub issue
I just spoke to one of the engineers at Apple regarding this. He confirmed that both 2d and 3d transformations are hardware accelerated when using CSS3 transitions and keyframe animations. We shouldn't have to change anything.
He did clarify that when NOT using transitions and keyframes to animate, that 2d transformed elements are not accelerated to save memory. But, in our case, our transitions always use keyframe animation.