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>
Related
Good day everyone,
I have tried to create a scrolling animation for text to appear when visible to atleast 50%.
The only code I have is an animated Header with Onscroll Event and the Intersection Observer for the Text.
It works just fine, the only thing I can't figure out is, when you scroll fast up and down, the Text will randomly scroll through the header and appear on top of everything...
I've added borders so you can see them overlapping with the header.
Can someone help me figure out how to make the Text stay behind the header at all time?
Thank you very much!
Greetings Marcel
var navbar = document.getElementById("navbar");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
// placeholder.classList.add("display");
nav.classList.add("shrink");
} else {
navbar.classList.remove("sticky");
// placeholder.classList.remove("display");
nav.classList.remove("shrink");
}
}
const options = {threshold: 0.5};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
:root{
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: var(--background-color);
}
nav{
height: var(--navbar-height);
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
transition-property: height;
transition-duration: 0.5s;
}
.navbar {
position:absolute;
left:0;
right:0;
top:0;
}
.navbar-placeholder {
position:relative;
height:80px;
transition: height 0.5s;
}
.text1{
padding: 30px;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.disappear {
opacity: 0%;
transition-duration: 0.5s;
}
.shrink {
height: 40px;
transition-property: height;
transition-duration: 0.5s;
}
.display {
display: block;
height: var(--navbar-height);
}
h1, p{
font-size: 50px;
color: white;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
border: 5px solid white;
}
.hidden {
opacity: 0;
transition: all 1s;
}
.show {
opacity: 1;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="de">
<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>WeSoDev</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar_placeholder" class="navbar-placeholder">
<div id="navbar">
<nav id="nav">
<h2 id="header">header</h2>
</nav>
</div>
</div>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<script src="index.js"></script>
</body>
</html>
var navbar = document.getElementById("navbar");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
// placeholder.classList.add("display");
nav.classList.add("shrink");
} else {
navbar.classList.remove("sticky");
// placeholder.classList.remove("display");
nav.classList.remove("shrink");
}
}
const options = {threshold: 0.5};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
:root{
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: var(--background-color);
}
nav{
height: var(--navbar-height);
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
transition-property: height;
transition-duration: 0.5s;
}
.navbar {
position:absolute;
left:0;
right:0;
top:0;
}
.navbar-placeholder {
position:relative;
height:80px;
transition: height 0.5s;
}
.text1{
padding: 30px;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}
.disappear {
opacity: 0%;
transition-duration: 0.5s;
}
.shrink {
height: 40px;
transition-property: height;
transition-duration: 0.5s;
}
.display {
display: block;
height: var(--navbar-height);
}
h1, p{
font-size: 50px;
color: white;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
border: 5px solid white;
}
.hidden {
opacity: 0;
transition: all 1s;
}
.show {
opacity: 1;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="de">
<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>WeSoDev</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar_placeholder" class="navbar-placeholder">
<div id="navbar">
<nav id="nav">
<h2 id="header">header</h2>
</nav>
</div>
</div>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<script src="index.js"></script>
</body>
</html>
Read about z-index. You can just put z-index: 2; onto the .sticky class and you should be fine :)
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.
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 am trying to build a card which when it is not hovered, you can see only the image.
When the image is hovered, it should grow up and a div pops to the right of the image presenting some information.
For some reason, when I hover the image, everything works fine. But when my mouse hovers to the div besides it, everything starts to shake as if the hover is not working well.
I've tried to change the hover effect both to the image and the parent div which contains both divs but nothing fixed it.
What should I do?
$(document).ready(function(){
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards{
display: flex;
}
.personCard{
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active{
transform: scale(1.5);
}
.imgCard{
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img{
height: 200px;
width: 130px;
}
.personalInfoCard{
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active{
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!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://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard" >
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
Change your target to be the card container so that when it grows, you'll still be hovering over it. As it is now, your target is the image - which when it animates left triggers the mouseout
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards {
display: flex;
}
.personCard {
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active {
transform: scale(1.5);
}
.imgCard {
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img {
height: 200px;
width: 130px;
}
.personalInfoCard {
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active {
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!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://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard">
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>