I'am trying to create an animation with a cube in CSS.
The animation is perfectly working in Chrome, but not in Firefox.
As soon as the cube goes out of the viewport, the animation freezes.
However, the animation runs if I move the mouse during the animation.
Here is the code (Note : the animation launches when face 4 is clicked):
//Retrieve elements
var leftArrow = document.getElementById("leftArrow");
var rightArrow = document.getElementById("rightArrow");
var frontFace = document.getElementById("face4");
var cube = document.getElementById("cube");
function rotateLeft()
{
cube.style.transform = "rotateY(180deg) translateX(-150px)";
cube.style.transition = 'transform 0.5s ease-out';
}
function rotateRight()
{
cube.style.transform = "rotateY(0deg) translateX(-150px)";
cube.style.transition = 'transform 0.5s ease-out';
}
function face4Click()
{
cube.style.animation = "face4Anim 7s ease-out";
document.getElementById('body').style.animation = 'fadeOut 2s linear 6s';
launchpage();
}
function face1Click()
{
console.log("face 1");
}
function launchpage()
{
setTimeout(function () {
document.location.href = 'index.html';
}, 8000);
}
/* Reset margins/paddings */
*
{
margin: 0;
padding: 0;
}
body
{
font-family: 'moon get!';
font-size: 1.4em;
color: white;
background-color: black;
}
header, #content
{
display: flex;
flex-direction: row;
justify-content: center;
}
footer
{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 8em;
}
h1
{
margin-top: 2em;
}
#content
{
display: flex;
flex-direction: row;
justify-content: space-around;
}
#leftArrow, #rightArrow
{
margin-top: 10em;
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
#leftArrow
{
border-right:100px solid blue;
}
#rightArrow
{
border-left:100px solid blue;
}
#cube
{
transform-style: preserve-3d;
transform-origin: center center;
transform: translateX(-150px);
animation: rotation 2s ease-out;
position: absolute;
margin-top: 8em;
}
#cube div
{
border: 1px solid grey;
position: absolute;
width: 300px;
height: 300px;
background: linear-gradient(red, yellow);
}
#face1
{
transform: rotateY(180deg);
}
#face2
{
z-index: 2;
transform-origin: center left;
transform: translateX(300px) rotateY(-90deg);
}
#face3
{
z-index: 2;
transform-origin: center right;
transform: translateX(-300px) rotateY(90deg);
}
#face4
{
z-index: 3;
transform: translateZ(300px);
}
#face5
{
z-index: 2;
transform-origin: center top;
transform: translateY(300px) rotateX(90deg) rotateY(180deg);
}
#face6
{
z-index: 2;
transform-origin: center bottom;
transform: translateY(-300px) rotateX(-90deg);
}
#keyframes translation
{
from{transform: translateY(-700px) translateX(-150px)}
to{transform: rotate(0) translateX(-150deg) translateY(0)}
}
#keyframes rotation
{
from{transform: rotateX(45deg) rotateY(180deg) translateY(-1300px)translateX(-150px)}
to{transform: rotate(0) translateX(-150deg) translateY(0)}
}
#keyframes fadeOut
{
from{opacity: 1}
to{opacity: 0}
}
#keyframes face4Anim
{
from{transform: rotateY(0deg) translateX(-150px)}
to{transform: rotateX(90deg) rotateY(180deg) translateZ(-800px) translateX(-750px) scaleX(5) scaleY(5) scaleZ(5)}
}
<body id="body">
<header>
<h1>JS Games</h1>
</header>
<div id="content">
<div id="leftArrow" onclick="rotateLeft()"></div>
<div id="cube">
<div id="face1" onclick="face1Click()">1</div>
<div id="face2">2</div>
<div id="face3">3</div>
<div id="face4" onclick="face4Click()">4</div>
<div id="face5"></div>
<div id="face6">6</div>
</div>
<div id="rightArrow" onclick="rotateRight()"></div>
</div>
<footer>
<h5>Developed by Tony Piton</h5>
</footer>
</body>
Does anyone can help me ?
Related
I made a HTML cube and animated its rotation after clicking on it. The cube rotates 90 degrees each time you click on it. I have an animation that makes 360 degrees.It pauses after 1/4 of animation total duration and runs again after click. That way we can see each of side faces in turn - 1,2,3,4.
But after about 10 clicks it is clear that angle is more than 90 but and view is not isometric anymore.
How to make this cube turn exactly 90 degrees and look right?
Probably it is not good to rely on duration. It could be easier if browser could watch angle and pause animation-play-state on 90, 180, 270, 360 degrees
var spinner = document.getElementById('spinner');
// get animation duration in ms
var animationDuration = parseFloat(window.getComputedStyle(spinner)['animation-duration'])*1000;
spinner.addEventListener('click', function () {
// run animation
spinner.style['animation-play-state'] = 'running';
// pause animation after animationDuration / 4
setTimeout(function () {
spinner.style['animation-play-state'] = 'paused';
}, animationDuration / 4);
});
body {
-webkit-font-smoothing: antialiased;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 100px;
color: black;
}
.scene {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
transform: rotatex(-33.5deg) rotatey(45deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 100px;
background: rgba(141, 148, 249, 0.5);
line-height: 100px;
border: 2px solid white;
}
.face-front {
transform: rotateY(360deg) translateZ(60px);
}
.face-right {
transform: rotateY(90deg) translatez(60px);
}
.face-back {
transform: rotateY(180deg) translatez(60px);
}
.face-left {
transform: rotateY(270deg) translateZ(60px);
}
.face-top {
transform: rotatex(90deg) translatez(60px);
}
.face-bottom {
transform: rotatex(-90deg) translatez(60px);
}
#spinner {
position: absolute;
display: inline-block;
width: 120px;
height: 120px;
left: 0;
top: 0;
transform-style: preserve-3d;
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-play-state: paused;
transform-style: preserve-3d;
}
#keyframes spinner {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
<!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>
</head>
<body>
<div class="container">
<div class="scene">
<div id="spinner">
<div class="face face-left">1</div>
<div class="face face-front">2</div>
<div class="face face-right">3</div>
<div class="face face-back">4</div>
<div class="face face-top">5</div>
<div class="face face-bottom">6</div>
</div>
</div>
</div>
</body>
</html>
Using the duration isn't recommended as you stated.
One other way is to use the transform css style, and add 90 degrees to it on each click:
Then we only need one more CSS rule to add some 'animation' to the transform:
transition: transform 1s ease;
var spinner = document.getElementById('spinner');
var scene = document.getElementsByClassName('scene')[0];
let currentRotation = 45;
spinner.addEventListener('click', function () {
currentRotation += 90; // Or change to -= to go clockwise
scene.style['transform'] = `rotatex(-33.5deg) rotatey(${currentRotation}deg)`;
});
body {
-webkit-font-smoothing: antialiased;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 100px;
color: black;
}
.scene {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
transform: rotatex(-33.5deg) rotatey(45deg);
transition: transform 1s ease;
}
.face {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 100px;
background: rgba(141, 148, 249, 0.5);
line-height: 100px;
border: 2px solid white;
}
.face-front {
transform: rotateY(360deg) translateZ(60px);
}
.face-right {
transform: rotateY(90deg) translatez(60px);
}
.face-back {
transform: rotateY(180deg) translatez(60px);
}
.face-left {
transform: rotateY(270deg) translateZ(60px);
}
.face-top {
transform: rotatex(90deg) translatez(60px);
}
.face-bottom {
transform: rotatex(-90deg) translatez(60px);
}
#spinner {
position: absolute;
display: inline-block;
width: 120px;
height: 120px;
left: 0;
top: 0;
transform-style: preserve-3d;
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-play-state: paused;
transform-style: preserve-3d;
}
#keyframes spinner {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
<div class="container">
<div class="scene">
<div id="spinner">
<div class="face face-left">1</div>
<div class="face face-front">2</div>
<div class="face face-right">3</div>
<div class="face face-back">4</div>
<div class="face face-top">5</div>
<div class="face face-bottom">6</div>
</div>
</div>
</div>
I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?
let baseDiv, lowerDiv, middleDiv, upperDiv;
document.addEventListener("DOMContentLoaded",()=>{
baseDiv = document.getElementById("base");
lowerDiv = document.getElementById("lower");
middleDiv = document.getElementById("middle");
upperDiv = document.getElementById("upper");
});
let backward = () => {
lowerDiv.classList.add("rotate0to90");
}
let forward = () => {
upperDiv.classList.add("rotate0to_90");
}
let upperHandler = () => {
upperDiv.classList.replace("zIndex4", "zIndex2");
middleDiv.innerHTML=baseDiv.innerHTML;
middleDiv.className = "lowerHalfCard-after zIndex4 rotate90to0 transform0to90"
}
let lowerHandler = () => {
lowerDiv.classList.replace("zIndex4", "zIndex2");
middleDiv.innerHTML=baseDiv.innerHTML;
middleDiv.className = "upperHalfCard-after zIndex4 rotate_90to0 transform0to_90";
}
let middleHandler = () => {
upperDiv.innerHTML=baseDiv.innerHTML;
lowerDiv.innerHTML=baseDiv.innerHTML;
upperDiv.className = "upperHalfCard-after zIndex4";
lowerDiv.className = "lowerHalfCard-after zIndex2";
middleDiv.className = "hide";
}
.fullCard,
.lowerHalfCard,
.upperHalfCard,
.fullCard-after,
.lowerHalfCard-after,
.upperHalfCard-after {
background-color: inherit;
border-radius: 10px;
height: 100%;
width: 100%;
position: absolute;
align-items: center;
display: flex;
justify-content: center;
vertical-align: middle;
}
.fullCard-after::after,
.upperHalfCard-after::after {
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard-after::after {
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard,
.lowerHalfCard-after {
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.upperHalfCard,
.upperHalfCard-after {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
.splitFlap {
background-color: black;
box-sizing: border-box;
border-radius: 10px;
width: 100px;
height: 150px;
position: relative;
}
.rotate0to90 {
animation-name: r0to90;
}
.rotate90to0 {
animation-name: r90to0;
}
.rotate0to_90 {
animation-name: r0to_90;
}
.rotate_90to0 {
animation-name: r_90to0;
}
.rotate0to90,
.rotate90to0,
.rotate0to_90,
.rotate_90to0 {
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes r0to90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(90deg);
}
}
#keyframes r90to0 {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
#keyframes r0to_90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(-90deg);
}
}
#keyframes r_90to0 {
from {
transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
}
}
.transform0to_90 {
transform: rotateX(-90deg);
}
.transform0to90 {
transform: rotateX(90deg);
}
.hide {
display: none
}
.zIndex2 {
z-index: 2;
}
.zIndex4 {
z-index: 4;
}
.zIndex10 {
z-index: 10;
}
.blue {
background-color: blue
}
.green {
background-color: green
}
.red {
background-color: red
}
.orange {
background-color: orange
}
<div class="splitFlap">
<div id="base" class="fullCard-after zIndex2">
<img src="img/1_100.png">
</div>
<div class="upperHalfCard-after zIndex4" id="upper" onAnimationEnd="upperHandler()">
<img src="img/0_100.png">
</div>
<div id="middle" class="hide" onAnimationEnd="middleHandler()">
</div>
<div class="lowerHalfCard-after zIndex2" id="lower" onAnimationEnd="lowerHandler()">
<img src="img/0_100.png">
</div>
</div>
<p>
<button onClick="forward()">
+
</button>
<button onClick="backward()">
-
</button>
</p>
After several tries, I have made it work properly by adding the following CSS attribute to the splitFlap class
transform-style: preserve-3d;
Use the -moz- extension before all your transitions in CSS. That will make sure Mozilla "understands" it.
Example:
#keyframes r_90to0 {
from {
transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
}
i'm doing my first project but i had some problems with divs: i want to put the firework behind the central text but i don't understand how to do it. Can you please help me?
i have to write more details otherwise i can't upload the question. If you want to know what is my project about, it's like a birhday invite for my 18° bithday, i'm trying to do something different .
here is the code, thanks.
body {
background-color: blue;
}
.centro {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 100px 0;
}
.text {
display: flex;
flex-direction: column;
align-items: center;
}
.center-text {
color: #E7ECEF;
text-align: center;
font-size: 50px;
text-shadow: 3px 2px 1px rgba(0, 0, 0, .3);
width: 30%;
}
.firework {
display: flex;
justify-content: center;
}
.explosion {
position: absolute;
width: 2px;
height: 40px;
transform-origin: 50% 100%;
overflow: hidden;
}
.explosion:nth-child(1) {
transform: rotate(0deg) translateY(-15px);
}
.explosion:nth-child(2) {
transform: rotate(30deg) translateY(-15px);
}
.explosion:nth-child(3) {
transform: rotate(60deg) translateY(-15px);
}
.explosion:nth-child(4) {
transform: rotate(90deg) translateY(-15px);
}
.explosion:nth-child(5) {
transform: rotate(120deg) translateY(-15px);
}
.explosion:nth-child(6) {
transform: rotate(150deg) translateY(-15px);
}
.explosion:nth-child(7) {
transform: rotate(180deg) translateY(-15px);
}
.explosion:nth-child(8) {
transform: rotate(210deg) translateY(-15px);
}
.explosion:nth-child(9) {
transform: rotate(240deg) translateY(-15px);
}
.explosion:nth-child(10) {
transform: rotate(270deg) translateY(-15px);
}
.explosion:nth-child(11) {
transform: rotate(300deg) translateY(-15px);
}
.explosion:nth-child(12) {
transform: rotate(330deg) translateY(-15px);
}
.explosion:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
width: 2px;
height: 20px;
animation: explosion 4s ease-in-out infinite;
}
#keyframes explosion {
0% {
top: 100%;
}
33%,
100% {
top: -50%;
}
}
#firework1 {
transform: scale(1);
transform: translateX(-60px) translateY(-150px);
}
#firework1 .explosion::before {
background-color: #ffde71;
animation: explosion 2s ease-in-out infinite;
}
<body>
<div class="centro">
<div class="text">
<div class="center-text">
compleanno di <span class="typing center-text"></span>
</div>
</div>
<div class="firework" id="firework1">
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
<div class="explosion"></div>
</div>
</div>
</div>
</div>
</body>
you can move it to the front with the z-index element.
.text {
display: flex;
flex-direction: column;
align-items: center;
z-index : 5;
}
I am trying to convert html div into image. I have a semi circle chart but when I am trying to download or preview image the image is not proper . Please help.
I took the reference of these two sites :
for semi circle : https://codepen.io/vineethtr/pen/xGjQOX
for html to image : https://codepedia.info/editor-example/jquery-convert-html-to-image-example/
Please help me to get the same exact image.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<script>
$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Semi Circle Donut Charts</title>
<style>
body {
background: #1F2428;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
margin: auto;
flex-wrap: wrap;
box-sizing: border-box;
height: 100vh;
padding: 30px;
}
.margin {
margin: 25px;
}
.semi-donut {
--percentage: 0;
--fill: #ff0;
width: 300px;
height: 150px;
position: relative;
color: #fff;
font-size: 22px;
font-weight: 600;
overflow: hidden;
color: var(--fill);
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
box-sizing: border-box;
}
.semi-donut:after {
content: '';
width: 300px;
height: 300px;
border: 50px solid;
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) var(--fill) var(--fill);
position: absolute;
border-radius: 50%;
left: 0;
top: 0;
box-sizing: border-box;
-webkit-transform: rotate(calc( 1deg * ( -45 + var(--percentage) * 1.8 ) ));
transform: rotate(calc( 1deg * ( -45 + var(--percentage) * 1.8 ) ));
-webkit-animation: fillAnimation 1s ease-in;
animation: fillAnimation 1s ease-in;
}
.semi-donut-model-2 {
width: 300px;
height: 150px;
position: relative;
text-align: center;
color: #fff;
font-size: 22px;
font-weight: 600;
border-radius: 150px 150px 0 0;
overflow: hidden;
color: var(--fill);
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
box-sizing: border-box;
}
.semi-donut-model-2:before, .semi-donut-model-2:after {
content: '';
width: 300px;
height: 150px;
border: 50px solid var(--fill);
border-top: none;
position: absolute;
-webkit-transform-origin: 50% 0% 0;
transform-origin: 50% 0% 0;
border-radius: 0 0 300px 300px;
box-sizing: border-box;
left: 0;
top: 100%;
}
.semi-donut-model-2:before {
border-color: rgba(0, 0, 0, 0.15);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.semi-donut-model-2:after {
z-index: 3;
-webkit-animation: 1s fillGraphAnimation ease-in;
animation: 1s fillGraphAnimation ease-in;
-webkit-transform: rotate(calc( 1deg * ( var(--percentage) * 1.8 ) ));
transform: rotate(calc( 1deg * ( var(--percentage) * 1.8 ) ));
}
.semi-donut-model-2:hover:after {
opacity: .8;
cursor: pointer;
}
.multi-graph {
width: 300px;
height: 150px;
position: relative;
color: #fff;
font-size: 22px;
font-weight: 600;
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
.multi-graph:before {
content: '';
width: 300px;
height: 150px;
border: 50px solid rgba(0, 0, 0, 0.15);
border-bottom: none;
position: absolute;
box-sizing: border-box;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
border-radius: 300px 300px 0 0;
left: 0;
top: 0;
}
.multi-graph .graph {
width: 300px;
height: 150px;
border: 50px solid var(--fill);
border-top: none;
position: absolute;
-webkit-transform-origin: 50% 0% 0;
transform-origin: 50% 0% 0;
border-radius: 0 0 300px 300px;
left: 0;
top: 100%;
z-index: 5;
-webkit-animation: 1s fillGraphAnimation ease-in;
animation: 1s fillGraphAnimation ease-in;
-webkit-transform: rotate(calc( 1deg * ( var(--percentage) * 1.8 ) ));
transform: rotate(calc( 1deg * ( var(--percentage) * 1.8 ) ));
box-sizing: border-box;
cursor: pointer;
}
.multi-graph .graph:after {
content: attr(data-name) " " counter(varible) "%";
counter-reset: varible var(--percentage);
background: var(--fill);
box-sizing: border-box;
border-radius: 2px;
color: #fff;
font-weight: 200;
font-size: 12px;
height: 20px;
padding: 3px 5px;
top: 0px;
position: absolute;
left: 0;
-webkit-transform: rotate(calc( -1deg * var(--percentage) * 1.8 )) translate(-30px, 0px);
transform: rotate(calc( -1deg * var(--percentage) * 1.8 )) translate(-30px, 0px);
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
-webkit-transform-origin: 0 50% 0;
transform-origin: 0 50% 0;
opacity: 0;
}
.multi-graph .graph:hover {
opacity: 0.8;
}
.multi-graph .graph:hover:after {
opacity: 1;
left: 30px;
}
#-webkit-keyframes fillAnimation {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
50% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
#keyframes fillAnimation {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
50% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
#-webkit-keyframes fillGraphAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes fillGraphAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div class="semi-donut margin" style="--percentage : 80; --fill: #039BE5 ;" id="html-content-holder" >
HTML5
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br/>
<h3>Preview :</h3>
<div id="previewImage">
</div>
I'm trying to get the background colour of the page to change on the gradient between black and white as the user scrolls. The colour will depend on where the user is currently scrolled to on the page if that makes sense? Here's some code I have already however the only problem with it is that when the user hasn't scrolled anywhere the webpage is not black.
function scroll(){
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
var color = Math.round(((body.scrollTop + html.offsetHeight) / height) * 255);
body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
height: 100%;
}
body{
height: 200%;
background: rgb(126,126,126);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>
</html>
Something like this?
$(window).on('scroll', function(){
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
var scrolledArea = (s / (d - c));
$("div").css("opacity", scrolledArea);
})
body{
margin: 0;
}
div{
height: 500vh;
background: #000;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
You have to use html.scrollTop instead of body.scrollTop.
That's because the html element becomes scrollable. The body element with 200% height overflows html with 100% height, which is the viewport height.
Body does not scroll here, so you always get body.scrollTop = 0.
But html does scroll, so you have to use html.scrollTop.
The elements body and html sometimes act as if they are one element. That's the case for scrolling behaviour. But sometimes they act as if they are two separate elements. That's the cases in styling with CSS.
To get from black to white (not grey to white), you have to change var height = html.scrollHeight - html.clientHeight; and var color = Math.round((html.scrollTop / height) * 255);
To make it work in IE you need to add:
<html onscroll="scroll()">
If you can, you should use jquery though (like Kushtrim suggested).
function scroll(){
var body = document.body,
html = document.documentElement;
var height = html.scrollHeight - html.clientHeight;
var color = Math.round((html.scrollTop / height) * 255);
body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
height: 100%;
}
body{
height: 200%;
background: rgb(0,0,0);
}
<!DOCTYPE html>
<html lang="en" dir="ltr" onscroll="scroll()">
<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>
</html>
Try it, read more here
.container {
width: 100%;
min-width: 1200px;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.container .overlay {
background: linear-gradient(to bottom, rgba(0, 160, 227, 0.5) 0%, rgba(176, 203, 31, 0.5) 50%, rgba(239, 127, 26, 0.5) 100%);
}
.container .slide {
width: 100%;
height: 600px;
position: relative;
}
.secs {
position: relative;
height: 100%;
}
.secs .inside {
width: 1200px;
margin: 0 auto;
height: 100%;
}
.secs.first {
text-align: center;
}
.secs.first h1 {
font-size: 60px;
font-weight: bold;
color: white;
position: absolute;
top: 50%;
left: 50%;
text-shadow: 1px 1px 1px #999,2px 2px 1px #999,3px 3px 1px #999,4px 4px 1px #999;
transform: translate(-50%, -155%);
z-index: 10;
}
.secs.first .inside {
display: flex;
justify-content: center;
padding-top: 100px;
position: relative;
}
.secs.first .bar {
width: 80px;
height: 350px;
opacity: 0.54;
box-shadow: 0px 0px 50px #fff;
display: inline-block;
margin-right: 25px;
background: #fff;
}
.secs.first .bar:nth-child(1) {
background: #00a0e3;
animation: bars 5s infinite;
}
.secs.first .bar:nth-child(2) {
transform: translateY(130px);
background: #00a0e3;
animation: bars1 5s infinite;
}
.secs.first .bar:nth-child(3) {
transform: translateY(30px);
background: #b0cb1f;
animation: bars2 5s infinite;
}
.secs.first .bar:nth-child(4) {
transform: translateY(80px);
background: #b0cb1f;
animation: bars3 5s infinite;
}
.secs.first .bar:nth-child(5) {
transform: translateY(-30px);
background: #ef7f1a;
animation: bars4 5s infinite;
}
.secs.first .bar:nth-child(6) {
transform: translateY(135px);
background: #ef7f1a;
animation: bars5 5s infinite;
}
.secs.first .bar:nth-child(7) {
transform: translateY(55px);
background: #e31e24;
animation: bars6 5s infinite;
}
.secs.first .bar:nth-child(8) {
background: #e31e24;
animation: bars7 5s infinite;
}
#keyframes bars {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(130px);
}
100% {
transform: translateY(0px);
}
}
#keyframes bars1 {
0% {
transform: translateY(130px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(130px);
}
}
#keyframes bars2 {
0% {
transform: translateY(30px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(30px);
}
}
#keyframes bars3 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(80px);
}
100% {
transform: translateY(0px);
}
}
#keyframes bars4 {
0% {
transform: translateY(-30px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(-30px);
}
}
#keyframes bars5 {
0% {
transform: translateY(135px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(135px);
}
}
#keyframes bars6 {
0% {
transform: translateY(55px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(55px);
}
}
#keyframes bars7 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(120px);
}
100% {
transform: translateY(0px);
}
}
<div class='container'>
<div class='overlay'>
<div class='slide secs first'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
</div>
</div>