I am setting up a custom scrollbar that works across browsers, but my problem is that it is only being applied to the body (which is static), instead of the div scroll area, listed as 'content'. I believe the problem is in the javascript that lies at the end of the HTML, but I cannot unravel it.
The HTML is as follows:
<body>
<div class="banner">
<video autoplay="" muted="false" loop="">
<source src="Media/BackgroundClip.mp4" type="video/mp4">
</video>
<div class="content">
<header> <img src="Media/DOE_TMP.gif"> </header>
<div class="content-wrapper">
<div id="progressbar"></div>
<div id="scrollPath"></div>
<img src="Media/Dialogue4.png">
<div class="text-wrapper">
>>>CONTENT
</div>
</div>
</div>
<script type="text/javascript">
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function(){
let progressHeight = (window.pageYOffset / totalHeight) * 100;
progress.style.height = progressHeight + "%";
}
</script>
</body>
And the CSS used looks like:
::-webkit-scrollbar{
width: 0;
}
#scrollpath {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255,255,255,0.05);
}
#progressbar {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
animation: animate 5s linear infinite;
}
#keyframes animate {
0%,100%
{
filter: hue-rotate(0deg);
}
50%
{
filter: hue-rotate(360deg);
}
}
#progressbar:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(10px);
}
#progressbar:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(30px);
}
Thanking you in advance,
Betty.
you are using the position : 'fixed' for the progressbar. It should be absolute and the parent (.content) must be none static element (ex: relative). You can check it here: custom scrollbar
::-webkit-scrollbar{
width: 0;
}
#scrollpath {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255,255,255,0.05);
}
#progressbar {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
animation: animate 5s linear infinite;
}
#keyframes animate {
0%,100%
{
filter: hue-rotate(0deg);
}
50%
{
filter: hue-rotate(360deg);
}
}
#progressbar:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(10px);
}
#progressbar:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(30px);
}
.content {
position: relative
}
Related
I am trying to create a linear animation with pipes just like the flappy bird game. When I have one single pipe, I see a random gap and it works well, but when I clone all the pipes, there is no longer a gap at a random position.
How can I give the gaps in the pipe a random position when I have multiple pipes, and why is it not working as expected?
var block = document.getElementById("block");
//clone the pipe multiples times
var blockClone;
for (var i = 0; i < 4; i++) {
blockClone = block.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
block.appendChild(blockClone);
//remove animtion from clones
blockClone.style.animationName = "none";
}
//gap inbetween each pipe
var hole = document.getElementById("hole");
var holeClone;
for (var i = 0; i < 4; i++) {
holeClone = hole.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
blockClone.appendChild(hole);
block.appendChild(hole);
//remove animtion from clones
holeClone.style.animationName = "none";
hole.addEventListener('animationiteration', () => {
var random = -((Math.random() * 300) + 150);
hole.style.top = random + "px";
});
}
body {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
}
* {
padding: 0;
margin: 0;
}
#game {
width: 100%;
height: 500px;
border: 1px solid red;
margin: auto;
overflow: hidden;
}
/* pipe version 1 */
#block {
width: 60px;
height: 500px;
background-color: green;
background-image: url("https://l.dropbox.com/s/4jz7uq4e25o8su5/sketch-1664244879.png?dl=0");
background-size: cover;
position: absolute;
left: 100px;
animation: block 5s infinite linear;
}
#hole {
width: 60px;
height: 210px;
background-color: red;
position: absolute;
left: 0px;
top: -10px;
/* animation: block 5s infinite
linear;*/
background-image: url("https://dldropbox.com/s/j7enawgtuepj7au/sketch-166428805830.png?dl=0");
background-size: cover;
}
#character {
width: 40px;
height: 40px;
background-color: none;
position: absolute;
top: 100px;
left: 40px;
border-radius: ;
z-index: 1;
background-color: red;
}
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
cursor: none;
opacity: 0.3;
text-align: center;
}
/* used to prevent user from tapping even after the game has ended*/
.mainoverlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: none;
opacity: 0;
}
#blokhold {
animation: block 5s infinite linear;
}
#keyframes block {
0% {
left: 350px
}
100% {
left: -890px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="game">
<div id="blokhold">
<div id="block">
<div id="hole"></div>
</div>
</div>
<div id="character"></div>
</div>
So I made this site using css, javascript and html. On my local system, the internal css that i've added to my html file loads perfectly. But when i deploy it online (I use netlify) that internal css seems not loaded and I cant see any content.
I even tried to remove that internal css and make another file and link to my html document, still no signs of work. It is now too brainstorming to me, as i am not able to find any solutions.
I am sharing the links of the file if anyone of you would like to help me, please?
gsap.to('#moon',{
scrollTrigger:{
scrub: 1
},
scale: 1.5,
})
gsap.to('#bg',{
scrollTrigger:{
scrub: 1
},
scale: 1.2,
})
gsap.to('#santa',{
scrollTrigger:{
scrub: 1
},
scale: 1.5,
y: -500,
x: 2400
})
gsap.to('#tree',{
scrollTrigger:{
scrub: 1
},
x: -250
})
gsap.to('#cloud1',{
scrollTrigger:{
scrub: 1
},
x: -150
})
gsap.to('#cloud2',{
scrollTrigger:{
scrub: 1
},
x: 200
})
gsap.to('#text1',{
scrollTrigger:{
scrub: 1
},
y: -950
})
gsap.to('#text2',{
scrollTrigger:{
scrub: 1
},
y: -950
})
#import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Frijole';
font-weight: 200;
}
body{
/* background: rgb(97, 0, 0); */
height: 200vh;
}
section{
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0, 10, 68);
mix-blend-mode: screen;
}
section img#bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#cloud1{
position: absolute;
top: 100px;
left: 50px;
max-width: 600px;
z-index: 2;
}
section img#cloud2{
position: absolute;
top: 200px;
right: 50px;
max-width: 600px;
z-index: 2;
}
section img#santa{
position: absolute;
bottom: 50px;
left: -600px;
z-index: 1;
max-width: 600px;
transform: scale(0.5);
}
section #tree{
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 266px;
background: url(../images/tree.png);
background-position-y: 266px;
z-index: 10;
}
section #text1{
position: absolute;
bottom: -500;
left: 0;
width: 100%;
text-align: center;
color: #fff;
text-shadow: 2px 2px 12px #000;
font-size: 5.5em;
z-index: 9;
}
section #text2{
position: absolute;
bottom: -600;
left: 0;
width: 100%;
text-align: center;
font-family: 'Balsamiq Sans', sans-serif;
transition: .093s;
color: #fff;
text-shadow: 2px 2px 12px #000;
font-size: 2em;
z-index: 9;
}
<html>
<head>
<title>Merry Christmas</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Balsamiq Sans' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Frijole' rel='stylesheet'>
<link rel="icon" href="images/favicon.png" type="image/png" size="32x32">
<link rel="stylesheet" type="text/css" href="css/snow.css">
<style>
.snow, .winter-is-coming {
z-index: 100;
pointer-events: none;
}
.winter-is-coming {
overflow: hidden;
position: absolute;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background: url(../images/bg.jpg);
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
}
.snow--near {
animation-duration: 10s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
background-size: contain;
}
.snow--near + .snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");
background-size: contain;
}
.snow--mid + .snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png");
background-size: contain;
}
.snow--far + .snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
</style>
</head>
<body>
<section>
<div class="winter-is-coming">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
</div>
<img src="images/bg.jpg" id="bg">
<img src="images/moon.png" id="moon">
<img src="images/cloud1.png" id="cloud1">
<img src="images/cloud2.png" id="cloud2">
<img src="images/santa.png" id="santa">
<div id="tree"></div>
<h2 id="text1">Merry Christmas!</h2><br>
<h4 id="text2">And a very happy new year from us! Enjoy Holidays!!</h4>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>
You have a class .winter-is-coming with CSS z-index:100;. Change it to z-index:1; then everthing should be fine now.
i want to position items dynamically using javascript but i really don't know how to do this i am still learning javascript , i want to add for example 4 icons 1 in the top and 1 in the bottom and 1 in the left and right but using css when you need to add more items you have to add more css code and position statically , here is the code :
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: white;
}
.container-circle {
text-align: center;
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
transition: all 1s ease;
}
.container-circle .container-circle-img {
height: 250px;
width: 250px;
border-radius: 50%;
object-fit: cover;
}
.container-circle::before {
content: '';
position: absolute;
top: -3;
left: -3;
right: -3;
bottom: -3;
border-radius: 50%;
z-index: -1;
background-image: linear-gradient(180deg, red, blue, yellow, green);
animation: rotate 3s linear infinite;
}
.container-circle-icons {
text-align: center;
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
border-radius: 60%;
animation: rotate 10s linear infinite;
padding: 0;
margin: 0;
}
.container-circle-icons .ico {
width: 50px;
height: 50px;
}
.container-circle-icons .ico1 {
content: '';
position: absolute;
top: -20%;
left: 35%;
}
.container-circle-icons .ico2 {
content: '';
position: absolute;
top: 50%;
right: -30%;
}
.container-circle-icons .ico3 {
content: '';
position: absolute;
left: 35%;
bottom: -30%;
}
.container-circle-icons .ico4 {
content: '';
position: absolute;
top: 50%;
left: -60%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="container-circle">
<img class="container-circle-img" src="picture.jpg" alt="pic1">
<div class="container-circle-icons">
<img src="icon1.png" class="ico ico1" alt="">
<img src="icon2.png" class="ico ico2" alt="">
<img src="icon3.png" class="ico ico3" alt="">
<img src="icon4.png" class="ico ico4" alt="">
</div>
</div>
The position of the elements will end up being dictated by the CSS, but if you want to add the elements dynamically and move them around, you can set that CSS using javascript.
Lets say you insert a new element with id='test'
You can dynamically change its position by doing this:
const newElement = document.getElementById('test');
element.style.left = '150%' // whatever value you want
element.style.top= '75px' // make sure you include units
I have a problem with a parallax page.
the scrollbar is hidden (by pushing it to the side with inner&outer divs and "right: -17px;")
got some parallax div elements which should float over the page with different speed
The code for the hidden scrollbar separately works and also the code for the the parallax elements separately does work.
My Problem: I tried to combine these codes but only the hidden scrollbar works. I haven't figured out the problem ... Maybe the js code of the parallax cannot work with the "inner div" hidden scrollbar? The "inner div" have to be a kinda <body>. If I give the body a height of for example 3000px, then the parallax does work, but then I get a 2nd scrollbar.
I'd prefer to solve this without using 3rd party libraries.
var elementOne = document.querySelector("#elementOne");
var elementTwo = document.querySelector("#elementTwo");
var elementThree = document.querySelector("#elementThree");
function setTranslate(xPos, yPos, el)
{
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
window.addEventListener("DOMContentLoaded", scrollLoop, false);
var xScrollPosition;
var yScrollPosition;
function scrollLoop()
{
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
setTranslate(0, yScrollPosition * -0.2, elementOne);
setTranslate(0, yScrollPosition * -1.5, elementTwo);
setTranslate(0, yScrollPosition * .5, elementThree);
requestAnimationFrame(scrollLoop);
}
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#elementOne
{
width: 400px;
height: 300px;
top: 150%;
left: 50%;
position: fixed;
z-index: 10;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
opacity: .75;
}
#elementTwo
{
width: 300px;
height: 300px;
top: 350%;
left: 55%;
position: fixed;
z-index: 8;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
opacity: .75;
}
#elementThree
{
width: 300px;
height: 300px;
top: 50%;
left: 25%;
position: fixed;
z-index: 9;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
opacity: .75;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1"></div>
<div id="frame_2"></div>
<div id="frame_3"></div>
<div id="elementOne"></div>
<div id="elementTwo"></div>
<div id="elementThree"></div>
</div>
</div>
</body>
</html>
When i hover once, transition is proper, but on second time, transition becomes wierd, as if the perspective: 800px starts working after transition has taken place.
Please also tell how can i set rotation about an edge except center.
I know about transform-origin but nothing such as transform-axis.
I want that when i hover over the , these images should open like a window.
var left=document.getElementById("left");
var right=document.getElementById("right");
function curtain() {
left.style.transform="rotateY(70deg)";
right.style.transform="rotateY(-70deg)";
}
function back() {
left.style.transform="rotateY(0deg)";
right.style.transform="rotateY(0deg)";
}
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
<html>
<head>
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>
<script src="script/script.js"></script>
</body>
</html>
There seems to be an issue with perspective and the onmouseout. back() (in onmouseout) and curtain() (in onmouseover) are called quite inconsistently. onmouseout is called whenever the mouse moves outside the element (#animate in this case) or its children (the images). The children are animated - they move - and the onmouseout is thereby called multiple times.
I wouldn't recommend onmouseover / onmouseout for this - instead I would use CSS :hover.
That aside, transform-origin defines the center of rotation.
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
#animate {
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position: absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: left;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: right;
}
<div id = 'animate'>
<div id = 'left'><img src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG'></div>
<div id = 'right'><img src = 'http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png'></div>
</div>
I don't know the origin of the problem, but it works ok if you are using CSS hover instead of JS hover.
And the transform origin is the way to go, it does what your wanted transform-axis would do.
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: left center;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: right center;
}
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>