Now I change the gradient based on some logic in the application.
<template>
<div :style="`background-image: ${backgroundImage}`" class="background">
<snackbar />
<nuxt />
<default-footer />
</div>
</template>
<style lang="scss">
.background {
min-height: 100vh;
padding-top: 35px;
padding-bottom: 75px;
text-align: center;
background-image: radial-gradient(circle at 50% 95%, #ffa400, #fd6e6a);
}
</style>
But I need to get the gradient changed gradually from one combination of two colors to another.
What is the best way to do this?
Another way to think about it
<div id="app"></div>
#app {
height: 300px;
width: 300px;
min-height: 50vh;
padding-top: 35px;
padding-bottom: 75px;
text-align: center;
background-image: radial-gradient(circle at 50% 95%, #ffa400ff 0%, #fd6e00ff 33.3333%, black 60%, black 100%);
background-size: 100% 300%;
background-position: 50% 100%;
transition: background-position 1s;
}
#app:hover {
background-position: 50% 0%;
}
Or two layers of background
<div id="app"></div>
#app {
height: 300px;
width: 300px;
min-height: 50vh;
padding-top: 35px;
padding-bottom: 75px;
text-align: center;
background-color: red;
background-image: linear-gradient(180deg, #ffa400ff 0%, #ffa400ff 50%, #ffa40000 100%), radial-gradient(circle at 50% 95%, #ffa400ff, #fd6e00ff);
background-size: 100% 200%, 100% 100%;
background-position: 0 200%, 0 0;
background-repeat: no-repeat;
transition: background-position 1s;
}
#app:hover {
background-position: 0 0, 0 0;
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,body,ul,li{
height: 100%;
margin: 0;
padding: 0;
}
.flip-list-enter-active, .flip-list-leave-active {
transition: all 1s;
}
.flip-list-enter, .flip-list-leave-active {
opacity: 0;
}
.demo {
position: relative;
height: 100%;
}
.demo > ul {
position: absolute;
z-index: 0;
height: 100%;
width: 100%;
}
.demo .bg-color-li {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.demo .bg-color-li div {
height: 100%
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-shadow: 0 0 3px #ffffff;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="demo">
<transition-group name="flip-list" tag="ul">
<li v-for="curColor in curColors" v-bind:key="curColor" class="bg-color-li">
<div :style="`background-image: ${curColor}`"></div>
</li>
</transition-group>
<div class="content">
content...
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
curColors: [],
colors: [
'linear-gradient(45deg, blue, black)',
'linear-gradient(45deg, red, orange)',
'linear-gradient(45deg, pink, purple)',
'linear-gradient(45deg, green, brown)'
],
index: 0
},
mounted: function () {
this.curColors = [this.colors[0]];
this.startChange();
},
methods: {
startChange () {
setInterval(() => {
if (this.index < this.colors.length - 1) {
this.index++
} else {
this.index = 0
}
this.curColors.splice(0, 1, this.colors[this.index]);
}, 2000);
}
}
})
</script>
</body>
</html>
I've done that by creating a computer property that returns the style that you need, by creating a string with it. In the template you use that property on the style of the component, and that's it!
<v-card-title primary-title :style="productStyle">
<h3 class="headline text-capitalize word-break-none mb-0">{{title.toLowerCase()}}</h3>
</v-card-title>
computed: {
productStyle () {
return 'background-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 40%, rgba(255,255,255,0) 60%)'
}
}
Like that you can build your style with whatever logic you want and return it. Remember that a computer property always is calculated when one of its dependencies gets updated, so you'll get that style updated right away!
Related
how would you make progress bar in CSS that would have colours based on values etc. from 0% to 20% red colour, 20% to 40% blue... Also, I would want to show the colours all the time, not only when it hits the value(so that part of a progress bar would be red, part blue and the other colours from the beggining and that the colours would disappear as the value would go down).
If you are trying to achieve a gradient progress bar as per the current progress, then try linear-gradient() property in CSS.
Here is a working model:
#prog-bar-cont {
width: 75vw;
height: 2.5em;
}
#prog-bar-cont #prog-bar {
background: #ffff;
width: 100%;
height: 100%;
border-color: #000;
border-style: solid;
border-radius: 50px;
overflow: hidden;
position: relative;
}
#prog-bar-cont #prog-bar #background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/*Actual Stuff*/
background: linear-gradient(-90deg, violet, #30b3fc, #70dc23, yellow, orange, #ff1076);
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
transition: all 3s;
-webkit-transition: all 3s;
}
#prog-bar-cont:hover #prog-bar #background {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
<h1>Rainbow Progress Bar</h1>
<p>Try hovering over the bar</p>
<div id='prog-bar-cont'>
<div id="prog-bar">
<div id="background"></div>
</div>
</div>
You can accomplish that by nesting the progress bar in a parent element and applying the css property overflow: hidden.
You can change the width of the class bar-clipper to the desired percentage. i.e. calc(300px * 0.6) will show 60% of the bar.
.bar-clipper {
width: calc(300px * 0.8);
height: 20px;
overflow: hidden;
position: absolute;
}
.bar-wrapper {
width: 300px;
height: 20px;
display: flex;
position: absolute;
}
.bar-wrapper span {
width: 100%;
height: 100%;
}
.bar-wrapper .bar1 {
background-color: #163f5f;
}
.bar-wrapper .bar2 {
background-color: #21639b;
}
.bar-wrapper .bar3 {
background-color: #3caea3;
}
.bar-wrapper .bar4 {
background-color: #f6d65b;
}
.bar-wrapper .bar5 {
background-color: #ed543b;
}
<body>
<div class="bar-clipper">
<div class="bar-wrapper">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
<span class="bar4"></span>
<span class="bar5"></span>
</div>
</div>
</body>
Link to fiddle: https://jsfiddle.net/L13yrgbm/
I know that gradients simply match the dimensions of whichever element they are applied to. Although, is there a way to visually make the gradient static and mask out parts that should not be visible?
My intention is to have the countdown timer become darker as it approaches the end of its evolution. Currently, my gradient retains the left and right color while simply reducing the colors in between:
(function() {
function resetCountdown() {
window.requestAnimationFrame(function() {
document.getElementById("countdown-evolution").classList.remove("countdown-reset");
window.requestAnimationFrame(function() {
document.getElementById("countdown-evolution").classList.add("countdown-reset");
});
});
}
resetCountdown();
document.getElementById("countdown-evolution").addEventListener("transitionend", resetCountdown);
})();
/* Background */
#countdown-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background-color: #ffffff;
}
/* Fill */
#countdown-evolution {
height: 100%;
width: 100%;
transform-origin: left;
background: linear-gradient(to right, #6419cd, #3273fa);
}
/* Reset */
.countdown-reset {
transition: transform 15s linear;
transform: scaleX(0);
}
/* Reference */
.fixed-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
</head>
<body>
<div id="countdown-background">
<div id="countdown-evolution"></div>
</div>
<div class="fixed-background"></div>
</body>
</html>
I have already tried to make countdown-background a gradient and countdown-evolution a solid color, which is basically what I am after. However, this causes more problems than it solves; because now I have to fix my countdown timer and I cannot seem to make it look the same as before:
(function() {
function resetCountdown() {
window.requestAnimationFrame(function() {
document.getElementById("countdown-evolution").classList.remove("countdown-reset");
window.requestAnimationFrame(function() {
document.getElementById("countdown-evolution").classList.add("countdown-reset");
});
});
}
resetCountdown();
document.getElementById("countdown-evolution").addEventListener("transitionend", resetCountdown);
})();
/* Background */
#countdown-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
/* Fill */
#countdown-evolution {
height: 100%;
width: 100%;
transform-origin: left;
background-color: #ffffff;
}
/* Reset */
.countdown-reset {
transition: transform 15s linear;
transform: scaleX(0);
}
/* Reference */
.fixed-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
</head>
<body>
<div id="countdown-background">
<div id="countdown-evolution"></div>
</div>
<div class="fixed-background"></div>
</body>
</html>
I appreciate any suggestion that can help me achieve the described outcome. Thank you.
Use another element as a curtain and absolute positioning along with css keyframes:
document
.querySelector("#countdown-evolution-curtain")
.addEventListener('animationend', () => {
console.log('Animation ended');
});
/* Background */
#countdown-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background-color: #ffffff;
position: relative;
}
#countdown-background div {
position: absolute;
right: 0;
top: 0;
}
/* Fill */
#countdown-evolution-curtain {
background: #fff;
height: 100%;
width: 0%;
animation: reveal 10s linear;
}
#countdown-evolution {
height: 100%;
width: 100%;
background: linear-gradient(to right, #6419cd, #3273fa);
}
#keyframes reveal {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div id="countdown-background">
<div id="countdown-evolution"></div>
<div id="countdown-evolution-curtain"></div>
</div>
There is different ways to achieve this with only one element:
Using an extra white layer on the above with another gradient
Using fixed value for the gradient color stops
Using background-clip to clip the background in the content area by animating the padding
Using a mask layer
Using a pseudo element as extra layer
/* Reference */
.reference {
height: 50px;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
/* (1) */
.first {
background:
linear-gradient(#fff,#fff) right no-repeat,
linear-gradient(to right, #6419cd, #3273fa);
animation:first 5s linear forwards;
}
#keyframes first{
from {
background-size:0% 100%,auto;
}
to {
background-size:100% 100%,auto;
}
}
/* (2) */
.second {
background:linear-gradient(to right, #6419cd 0, #3273fa 100vw) left no-repeat;
animation:second 5s linear forwards;
}
#keyframes second{
from {
background-size:100% 100%;
}
to {
background-size:0% 100%;
}
}
/* (3) */
.third {
background-clip:content-box;
animation:third 5s linear forwards;
}
#keyframes third{
from {
padding-right:0%;
}
to {
padding-right:100%;
}
}
/* (4) */
.fourth {
-webkit-mask:linear-gradient(#fff,#fff) left no-repeat;
mask:linear-gradient(#fff,#fff) left no-repeat;
animation:fourth 5s linear forwards;
}
#keyframes fourth{
from {
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
}
to {
-webkit-mask-size:0% 100%;
mask-size:0% 100%;
}
}
/* (5) */
.fifth{
position:relative;
}
.fifth::before {
content:"";
position:absolute;
background:#fff;
top:0;
right:0;
bottom:0;
animation:fifth 5s linear forwards;
}
#keyframes fifth{
from {
left:100%;
}
to {
left:0%;
}
}
<div class="first reference"></div>
<div class="second reference"></div>
<div class="third reference"></div>
<div class="fourth reference"></div>
<div class="fifth reference"></div>
<div class="reference"></div>
I've come up with this simple code, but for some reason, it does not always work exactly the way I would like it to.
Here's what I have. There are tiles that flip on hover. There are two possible scenarios and two reactions.
If I mouse is hovered over a tile, the tile is supposed to flip 180° and stay in this possition. This happens, if mouseleave happens in longer time than 1 second. After unhover, the tile should flip back to its original state.
If mouse is hovered over a tile and unhover immediately, the tile is supposed to do a full 180° flip before returning to its original state. This happens when mouse leaves in the 1 second timeframe. In this case, the JS scripts waits for the CSS transition to end before fliping the tile back.
Now, this works fine until the second scenario takes place. Then for some reason, the tile returns to its original state after a full transition despite the mouse not leaving the tile. Why is that? Any ideas on how to overcome this issue?
Thanks.
$(function() {
var timeoutId;
$(".tile").mouseenter(function() {
$(this).addClass("flip");
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;}, 1000);
}
});
$(".tile").mouseleave(function() {
if (timeoutId) {
$(this).on('transitionend webkitTransitionEnd oTransitionEnd', function () {
$(this).removeClass("flip");
window.clearTimeout(timeoutId);
timeoutId = null;
});
}
else {
$(this).removeClass("flip");
}
});
})
body {
text-align: center;
background-color: #FFFFFF;
color: #454545;
}
.flex-container {
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
}
.tile {
background: #454545;
margin: 0px;
font-weight: bold;
flex: 1 0 auto;
height: auto;
border: 1px solid #454545;
border-radius: 10%;
}
.tile:before {
content: '';
float: left;
padding-top: 100%;
}
.tile-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 10%;
transform-style: preserve-3d;
transition: transform 4s;
}
.tile.flip .tile-inner {
transform: rotate3d(-1, 1, 0, 180deg);
transition: transform 1s;
}
.tile-front, .tile-off, .tile-semi, .tile-rsemi, .tile-on {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10%;
}
.tile-front {
background-color: #1c1c1c;
background-size: 100%;
}
.tile-off {
background-color: #252525;
transform: rotate3d(-1, 1, 0, 180deg);
}
.tile-semi {
background: linear-gradient(to right bottom, #252525 50%, #dedede 50%);
transform: rotate3d(-1, 1, 0, 180deg);
}
.tile-rsemi {
background: linear-gradient(to right bottom, #dedede 50%, #252525 50%);
transform: rotate3d(-1, 1, 0, 180deg);
}
.tile-on {
background-color: #dedede;
transform: rotate3d(-1, 1, 0, 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<div class="flex-container">
<div class="tile">
<div class="tile-inner">
<div class="tile-front"></div>
<div class="tile-semi"></div>
</div>
</div>
<div class="tile">
<div class="tile-inner">
<div class="tile-front"></div>
<div class="tile-on"></div>
</div>
</div>
<div class="tile">
<div class="tile-inner">
<div class="tile-front"></div>
<div class="tile-rsemi"></div>
</div>
</div>
</div>
</body>
You are sharing one variable and using it on all of the other tiles. So the timeout for tile 1 will also be with tile 2 when you mouseover it. You should be setting the timeouts for each one individually. Basic idea with data.
$(function() {
$(".tile").mouseenter(function() {
var elem = $(this);
elem.addClass("flip");
if (!elem.data('timeoutId')) {
var tid = window.setTimeout(function() {
elem.removeData('timeoutId')
}, 1000);
elem.data('timeoutId', tid)
}
});
$(".tile").mouseleave(function() {
var elem = $(this);
var timeoutId = elem.data('timeoutId')
if (timeoutId) {
window.clearTimeout(timeoutId);
elem.removeData('timeoutId')
elem.off('transitionend webkitTransitionEnd oTransitionEnd')
elem.on('transitionend webkitTransitionEnd oTransitionEnd', function() {
elem.removeClass("flip");
});
} else {
$(this).removeClass("flip");
}
});
})
body {
text-align: center;
background-color: #FFFFFF;
color: #454545;
}
.flex-container {
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
}
.tile {
background: #454545;
margin: 0px;
font-weight: bold;
flex: 1 0 auto;
height: auto;
border: 1px solid #454545;
border-radius: 10%;
}
.tile:before {
content: '';
float: left;
padding-top: 100%;
}
.tile-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 10%;
transform-style: preserve-3d;
transition: transform 4s;
}
.tile.flip .tile-inner {
transform: rotate3d(-1, 1, 0, 180deg);
transition: transform 1s;
}
.tile-front,
.tile-off,
.tile-semi,
.tile-rsemi,
.tile-on {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10%;
}
.tile-front {
background-color: #1c1c1c;
background-size: 100%;
}
.tile-off {
background-color: #252525;
transform: rotate3d(-1, 1, 0, 180deg);
}
.tile-semi {
background: linear-gradient(to right bottom, #252525 50%, #dedede 50%);
transform: rotate3d(-1, 1, 0, 180deg);
}
.tile-rsemi {
background: linear-gradient(to right bottom, #dedede 50%, #252525 50%);
transform: rotate3d(-1, 1, 0, 180deg);
}
.tile-on {
background-color: #dedede;
transform: rotate3d(-1, 1, 0, 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<div class="flex-container">
<div class="tile">
<div class="tile-inner">
<div class="tile-front"></div>
<div class="tile-semi"></div>
</div>
</div>
<div class="tile">
<div class="tile-inner">
<div class="tile-front"></div>
<div class="tile-on"></div>
</div>
</div>
<div class="tile">
<div class="tile-inner">
<div class="tile-front"></div>
<div class="tile-rsemi"></div>
</div>
</div>
</div>
</body>
The problem is that when you run:
if (timeoutId) {
$(this).on('transitionend webkitTransitionEnd oTransitionEnd', function () {
$(this).removeClass("flip");
window.clearTimeout(timeoutId);
timeoutId = null;
});
}
The event stays in the element indefinitely. So, next time you hover the element, when it finishes transition, this event triggers again.
What you probably want is to run the event only once:
if (timeoutId) {
$(this).once('transitionend webkitTransitionEnd oTransitionEnd', function () {
$(this).removeClass("flip");
window.clearTimeout(timeoutId);
timeoutId = null;
});
}
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>
I want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 id.
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}
html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}
<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}
#import url('https://fonts.googleapis.com/css?family=Spirax');
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?
You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() {
toggleClass(document.getElementById('page'), 'hidden');
toggleClass(document.getElementById('loading'), 'hidden');
});
function onReady(callback) {
var intervalID = window.setInterval(function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}, 1000);
}
// http://youmightnotneedjquery.com/
function toggleClass(el, className) {
if (el.classList) el.classList.toggle(className);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: "Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#loading {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.9);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
.hidden {
display: none !important;
}
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div id="page" class="hidden">
<h1>The standard Lorem Ipsum passage</h1>
<div class="content" data-lorem="7s"></div>
</div>
<div id="loading"></div>