Change Background Colour Along a Gradient as User Scrolls - javascript

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>

Related

Section snapping whilst scrolling

I'm trying to implement page/section snapping as you scroll page to page, for some reason the class="outer" seems to be interfering with the first page title, button and the nav bar? The nav bar was functional before I added the classes "outer" and "page" the title and button also remained on the first page and did not pass through to the other pages. anyone know what this problem is? have a feeling it's something simple
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
#media (min-height: 30em) {
.section__content > * {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay),
transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content > * {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
box-sizing:border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center ;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y:auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start; height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%, 30%, 40%, 50%, 70%, 80%, 90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%, 60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%, 85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"> <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one" >
<div class="page">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

Two things,
Because btn-centering is not wrapped into any position: relative element, so it behaves like position: fixed, It was working for you previously because .outer didn't have overflow, overflow also affects positions
another thing is you have added overflow-y: auto to .outer so it has scroll now and body doesn't, but in jquery, you are trying to scroll the body.
I have added relative to .page element of first .section
I have added z-index: 1 to .nav because the relative element is affecting .nav
I have changed $('html,body').animate to $('.outer').animate
After doing all the above changes the page was scrolling to wrong sections, I found that Jquery will change the offset top when the page scroll is changed, So I also changed target.offset().top to target[0].offsetTop (target[0].offsetTop is supported in all browsers including IE)
html,
body {
margin: 0;
height: 100%;
width: 100%;
padding: 0;
}
.relative {
position: relative;
}
#media (min-height: 30em) {
.section__content>* {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content>* {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height: 100%;
width: 100%;
box-sizing: border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start;
height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient( 45deg, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%,
15%,
25%,
35%,
55%,
65%,
75%,
95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%,
30%,
40%,
50%,
70%,
80%,
90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%,
60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%,
85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
z-index: 1;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('.outer').animate({
scrollTop: target[0].offsetTop
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one">
<div class="page relative">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
</div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

Why my code work fine on chrome but not firefox?

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);
}
}

CSS cube animation not working in Firefox

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 ?

choose a specific css animation frame

I'm trying to make a spinner where it'll stop on a certain frame. I'm trying to use CSS for the animation to negate JS animations but not sure I can get it to stop on a specific frame. I've got a simple spinner with my 3 numbers here. I'd like to randomly get number 1-3(0-2) and have it stop on that given frame.
Is that possible with JS/cCSS?
body {
font-family: 'Lucida Grande', Verdana, Arial;
font-size: 12px;
}
#stage {
margin: 80px auto;
width: 600px;
height: 400px;
perspective: 5000;
}
#rotate {
margin: 0 auto;
width: 600px;
height: 400px;
}
.ring {
margin: 0 auto;
height: 110px;
width: 600px;
-webkit-transform-style: preserve-3d;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.ring > :nth-child(odd) {
background-color: #995C7F;
}
.ring > :nth-child(even) {
background-color: #835A99;
}
.poster {
position: absolute;
left: 250px;
width: 100px;
height: 100px;
opacity: 1;
color: rgba(0,0,0,1);
-webkit-border-radius: 10px;
}
.a {
transform: rotateX(0deg) translateZ(40px);
}
.b {
transform: rotateX(120deg) translateZ(40px);
}
.c {
transform: rotateX(240deg) translateZ(40px);
}
.done {
transform: rotate(0deg);
}
.poster > p {
font-family: 'Georgia', serif;
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 28px;
}
#ring-1 {
-webkit-animation-name: x-spin;
-webkit-animation-duration: .6s;
}
#ring-2 {
-webkit-animation-name: back-y-spin;
-webkit-animation-duration: 4s;
}
#ring-3 {
-webkit-animation-name: y-spin;
-webkit-animation-duration: 3s;
}
#-webkit-keyframes x-spin {
0% { -webkit-transform: rotateX(360deg); }
50% { -webkit-transform: rotateX(180deg); }
100% { -webkit-transform: rotateX(0deg); }
}
#-webkit-keyframes y-spin {
0% { -webkit-transform: rotateY(0deg); }
50% { -webkit-transform: rotateY(180deg); }
100% { -webkit-transform: rotateY(360deg); }
}
#-webkit-keyframes back-y-spin {
0% { -webkit-transform: rotateY(360deg); }
50% { -webkit-transform: rotateY(180deg); }
100% { -webkit-transform: rotateY(0deg); }
}

It would be better to use css transitions for this. And yes, if you want to randomize the animation frame, definitely JavaScript. That way you can use it in code.
function goToNum(num) {
var angle = 0;
if (num == 2) {
angle = 110;
}
if (num == 1) {
angle = 220;
}
$('#ring-1').css('transform', 'rotateX(' + angle + 'deg)');
}
var rand = Math.floor(Math.random() * 3);
goToNum(rand);
JSFiddle: http://jsfiddle.net/foreyez/r8a4m0L5/

How to hide div under another during CSS3 animation

The CSS code :
.mainDiv{
width: 600px;
height: 600px;
background-color: blue;
}
.innerDiv{
width: 400px;
margin: auto;
height: 400px;
background-color: green;
}
.innerDiv div{
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
.removing{
-webkit-animation: slideout 1s;
animation: slideout 1s;
}
#-webkit-keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
#keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
Here is a jsFiddle of the problem.
What i would like it to do is this :
When the first red block moves outside of the green block, i would like it to be behind the blue block instead of in front of it.

add the line: overflow:hidden; to your .innerDiv css rule

Use z-index.
Example:
#somethingBehind {
z-index: 1;
}
#somethingAtTheFront {
z-index: 2;
}

Categories

Resources