I'm developing a website but I want to set a random background in CSS.
Right now, I have this code CSS:
#bg {
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
-webkit-backface-visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
#bg:before, #bg:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#bg:before {
-moz-transition: background-color 2.5s ease-in-out;
-webkit-transition: background-color 2.5s ease-in-out;
-ms-transition: background-color 2.5s ease-in-out;
transition: background-color 2.5s ease-in-out;
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s;
background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png");
background-size: auto, 256px 256px;
background-position: center, center;
background-repeat: no-repeat, repeat;
z-index: 2;
}
#bg:after {
-moz-transform: scale(1.125);
-webkit-transform: scale(1.125);
-ms-transform: scale(1.125);
transform: scale(1.125);
-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
background-image: url("../../images/bg_01.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
body.is-article-visible #bg:after {
-moz-transform: scale(1.0825);
-webkit-transform: scale(1.0825);
-ms-transform: scale(1.0825);
transform: scale(1.0825);
-moz-filter: blur(0.2rem);
-webkit-filter: blur(0.2rem);
-ms-filter: blur(0.2rem);
filter: blur(0.2rem);
}
body.is-loading #bg:before {
background-color: #000000;
}
And I made this JS code to change the background:
var images = ['bg_01.jpg',
'bg_02.jpg',
'bg_03.jpg',
'bg_04.jpg',
'bg_05.jpg',
'bg_06.jpg',
'bg_07.jpg',
'bg_08.jpg',
'bg_09.jpg',
'bg_10.jpg'];
$('body').css({'background-image' : 'url(../../images/' + images[Math.floor(Math.random() * images.length)] + ')']);
I want to use the JS code in #bg:after, how can I do that? do I need to change something in the js code? the backgrounf works good because I'm using a free template but I want to keep that code because has animations, etc. and I just would like to make it random every refresh.
PS: Sorry, but I'm noob in this.
CODE UPDATED AND WORKING
I've found the solution. First I had to remove the line:
background-image: url("../../images/bg_01.jpg");
From #bg:after block. Then, I changed my javascript code like this:
var images = ['bg_01.jpg',
'bg_02.jpg',
'bg_03.jpg',
'bg_04.jpg',
'bg_05.jpg',
'bg_06.jpg',
'bg_07.jpg',
'bg_08.jpg',
'bg_09.jpg',
'bg_10.jpg'];
$('#bg').css({'background-image' : 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
Now, my website change the background every refresh :)
Thanks a lot for your help!
Your question is not very clear. I assume that you want to have a div with a random background and transition between image and color.
First you js line should be...
$('body').style.backgroundImage = "url(../../images/" + images[Math.floor(Math.random() * images.length)] + ")";
Here is an example of what I think you want to achieve.
var div = document.getElementById("myDiv");
var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/1200px-Kitten_in_Rizal_Park%2C_Manila.jpg",
"https://www.sdhumane.org/wp-content/uploads/2017/06/10k_nova-0.jpg",
"https://4fi8v2446i0sw2rpq2a3fg51-wpengine.netdna-ssl.com/wp-content/uploads/2016/06/KittenProgression-Darling-week3.jpg",
"http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg"
];
div.onmouseover = function()
{
div.style.backgroundImage = "url(" + images[Math.round(Math.random() * images.length)] + ")";
}
#myDiv
{
width: 250px;
height: 250px;
background-size: 250px 250px;
}
#colorOverlay
{
width: 250px;
height: 250px;
background: gold;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
#colorOverlay:hover
{
opacity: 0;
}
<div id="myDiv">
<div id="colorOverlay">
</div>
</div>
(*This example has issues if you change the images too fast because completely loads them again every time.)
It sets a new image when the mouse is hovered over the div. You can instead do it once when the page loads. To fade from color to the image, the only way I think there is is to have two divs, one with the image, one with the color.
Related
As you can see in the image attached, the airplane image is moving to left intentionally. But I don't want its position to move out of the alignment. I want to have something like parallax effect but on hover like this website is doing. https://digitalsilk.com/. I have just started website development.
I want to know how I can have these image transition from https://digitalsilk.com/. But I am not able to recreate that transition. I am having trouble with one thing that is moving the back airplane image a little to the left without moving its position (like a parallel effect) You can see the main page gallery of the website attached in desktop view.
<div id="outter-image">
<div class="tilt-box">
<div class="tilt-bg-image-box">
<img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
</div>
<img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
</div>
</div>
<style>
.overlay-image {
top: -20px;
right: -20%;
position: absolute;
width: 60%;
aspect-ratio: auto 299 /566;
height: 120%;
transition: transform .6s ease-in-out, opacity .5s;
opacity: 0;
transform: perspective(1000px) rotateY( -60deg);
}
.tilt-bg-image-box {
transition: transform .6s ease-in-out, opacity .5s, -webkit-transform .6s ease-in-out;
}
.bg-image {
transition: transform 1s .4s linear, opacity .5s, -webkit-transform 1s .4s
}
.tilt-box:hover .bg-image {
transform: translate3d(-8%, 0, 0);
}
.tilt-box:hover .overlay-image {
opacity: 1;
-webkit-transform: perspective(1000px) rotateY( -20deg);
transform: perspective(1000px) rotateY( -20deg);
}
.tilt-box:hover .tilt-bg-image-box {
transform: perspective(1000px) rotateY(20deg);
}
.tilt-box:hover .bg-image {
transition: transform 4s .4s linear, opacity .5s, -webkit-transform 4s .4s
}
</style>
The trick is to set the width to the image wrapper and overflow:hidden.
I know the picture of plane is cut of a bit. You need to scale the picture and position it a little bit different. Or change the picture itself.
When I checked your code, I would recomand you also to wrap everything to some wrapper with fixed size. It doesnt look like you expected on full screen.
<div id="outter-image">
<div class="tilt-box">
<div class="tilt-bg-image-box">
<img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
</div>
<img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
</div>
</div>
<style>
.overlay-image {
top: -20px;
right: -20%;
position: absolute;
width: 60%;
aspect-ratio: auto 299 /566;
height: 120%;
transition: transform .6s ease-in-out, opacity .5s;
opacity: 0;
transform: perspective(1000px) rotateY( -60deg);
}
.tilt-bg-image-box {
width: 600px;
height: auto;
overflow: hidden;
transition: transform .6s ease-in-out, opacity .5s;
}
.bg-image {
transition: transform 1s .4s linear, opacity .5s;
}
.tilt-box:hover .bg-image {
transform: translate3d(-8%, 0, 0);
}
.tilt-box:hover .overlay-image {
opacity: 1;
-webkit-transform: perspective(1000px) rotateY( -20deg);
transform: perspective(1000px) rotateY( -20deg);
}
.tilt-box:hover .tilt-bg-image-box {
transform: perspective(1000px) rotateY(20deg);
}
.tilt-box:hover .bg-image {
transition: transform 4s .4s linear, opacity .5s;
}
</style>
have this problem as stated in description.
I would like, that the :hover effect would be applied only to the parent element and its children, and not to the entire website.
Tried to add pointer-events to none, but it did not help. Also the effect is on the parent but not the sibling, as advised in other questions, but it also did not help.
Here is my code:
App.js:
import "./styles.css";
export default function App() {
return (
<div>
<div className="parent">
<div className="child1">child1</div>
<div className="child2">child2</div>
</div>
<div className="sibling">sibling</div>
</div>
);
}
CSS:
.App {
font-family: sans-serif;
text-align: center;
}
.parent::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background-color: #1a38e2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s, -webkit-transform 0.2s;
transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s,
-webkit-transform 0.2s;
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s;
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s, -webkit-transform 0.2s;
}
.parent:hover::before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
width: 100%;
z-index: -1;
}
I also have an SCSS, but do not know, how to deal with it on codesandbox, but I apply it anyway:
SCSS
.parent::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background-color: #1a38e2;
transform: scaleY(0);
transition: transform .2s, width .4s cubic-bezier(1, 0, 0, 1) .2s,
background-color .1s;
}
parent::before {
transform: scaleY(1);
width: 100%;
z-index: -1;
}
Link to my codesandbox: link
And am, as always, very happy about any help provided.
Give position relative to div
.parent div {
position: relative;
}
instead of
parent::before
use this
.parent div::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background-color: #1a38e2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s, -webkit-transform 0.2s;
transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s,
-webkit-transform 0.2s;
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s;
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s, -webkit-transform 0.2s;
}
.parent div:hover::before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
width: 100%;
z-index: -1;
}
I have developed a code which
There is two arrays containing unique images as url but Type numbered 1 to 6 in each array
I selects 3 items from array item1 and 3 items from array item11. These 6 items are pushed to mixarray1 with corresponding Type to identify it.
i have given url from mixarray1 to six boxes given in html into the class pad of each hover panel class img tag.
On each Click Each hover panel is flipped an image in behind are shown corresponding names of clicked hover panel is pushed to selectedclassnamesFirstLevel
imageurl corresponding to click is stored in link for finding the Type of imageurl and stored in Clickeditemslevel1.
after two clicks the elements in Clickeditemslevel1(ie Types the digits labelled 1-6) are compared if two digits are equal then..... The two classnames collected in selectedclassnamesFirstLevel(ie hover panel names) are flipped back.
my problem is that
after two clicks if when the imageType are different the two hover panel flips back.... after that when a two clicks contains imageType are same the hover panels stays there......
and comes the problem,
after that when two clicks contains different imageTypes the hover panels dont flips back
when i checked in at that point the array selectedclassnamesFirstLevel which have the names of hover panels have ClickeditemType...
How to avoid this ClickeditemType digits coming in selectedclassnamesFirstLevel Array
var array2 = [];
var array21 = [];
var forpurchase = [];
var notes = [];
var itempurchase = [];
var curruspondingnotes = [];
var mixarray1 = [];
var clikeditemslevel1 = [];
var emptyarray = [];
var selectedclassnamesFirstLevel = [];
var clickcounter = 0;
var items1 = [{
label: '38.jpg',
url: "https://i.ibb.co/Rp7MZrj/38.jpg",
type: '1'
},
{
label: '55.jpg',
url: 'https://i.ibb.co/Fs7P75q/55.jpg',
type: '2'
},
{
label: '75.jpg',
url: 'https://i.ibb.co/rwdV3mw/75.jpg',
type: '3'
},
{
label: '100.jpg',
url: 'https://i.ibb.co/NsTJwMg/100.jpg',
type: '4'
},
{
label: '125.jpg',
url: 'https://i.ibb.co/h707xz4/125.jpg',
type: '5'
},
{
label: '150.jpg',
url: 'https://i.ibb.co/zPKQXCY/150.jpg',
type: '6'
}
];
var items11 = [{
label: '38.jpg',
url: 'https://i.ibb.co/xL7Pb80/t38.jpg',
type: '1'
},
{
label: '55.jpg',
url: 'https://i.ibb.co/Gd4sThr/t55.jpg',
type: '2'
},
{
label: '75.jpg',
url: 'https://i.ibb.co/xgFyTqq/t75.jpg',
type: '3'
},
{
label: '100.jpg',
url: 'https://i.ibb.co/3MNsCch/t100.jpg',
type: '4'
},
{
label: '125.jpg',
url: 'https://i.ibb.co/4d2zr54/t125.jpg',
type: '5'
},
{
label: '150.jpg',
url: 'https://i.ibb.co/Sy4CDm0/t150.jpg',
type: '6'
}
];
array2 = items1.slice();
array21 = items11.slice();
function rvalue() {
for (let index = 0; index < 3; index++) {
var itempurchase = array2[index];
var curruspondingnotes = array21[index];
try {
forpurchase.push({
label: itempurchase.url,
type: itempurchase.type
});
notes.push({
label: curruspondingnotes.url,
type: curruspondingnotes.type
});
mixarray1.push({
label: curruspondingnotes.url,
type: curruspondingnotes.type
});
mixarray1.push({
label: itempurchase.url,
type: itempurchase.type
})
} catch (err) {}
}
}
rvalue();
//----------------------------setting images to src--------------------------------
for (i = 0; i < 6; i++) {
new1 = document.getElementById(i + 1);
imagee = mixarray1[i].label;
var path = imagee;
$(new1).attr('src', path);
}
//new1.style.backgroundImage = 'url(images/' + imagee + ')';
//----------------------flip function starts------------------------------------
$(document).ready(function() {
$('.hover').click(function() {
$(this).toggleClass('flip');
var k = $(this).attr('class');
var fileNameIndex = k.lastIndexOf("/") + 1;
var filename = k.substr(fileNameIndex);
var result0 = filename.slice(0, -5);
selectedclassnamesFirstLevel.push(result0);
console.log("result0 is" + result0);
console.log("selectedclassnamesFirstLevel" + selectedclassnamesFirstLevel);
console.log(selectedclassnamesFirstLevel);
var takenpad = $(this).find('.pad');
var imagcheck = $(takenpad).find('img');
var link = imagcheck.first().attr("src");
var fileNameIndexforsearch = link;
var filenameurl = link.substr(fileNameIndexforsearch);
let toSearch = 'filenameurl';
clickcounter = clickcounter + 1;
let resultType = mixarray1.filter(obj => {
return obj.label === filenameurl
})
let clickedtype = resultType[0].type;
clikeditemslevel1.push(clickedtype);
//--------------->Remove hoverpanel coming in clikeditemslevel1[] array ---------------------------
for (i = 0; i < clikeditemslevel1.length; i++) {
if (clikeditemslevel1[i].length > 2) {
clikeditemslevel1.splice(i, 1);
}
}
console.log("!!!!!!!!!CLICKED ITEM TYPE ARRAY BELOW!!!!!!!!!");
console.log(clikeditemslevel1);
//--------------->Checking wether clicked two types are Not Equal--------------------------------------
if (typeof clikeditemslevel1[0] !== "undefined" && typeof clikeditemslevel1[1] !== "undefined" && clikeditemslevel1[0] != clikeditemslevel1[1]) {
flipthisTypehoverpanel();
}
//--------------->Checking wether clicked two types Are Equal------------------------------------------
if (typeof clikeditemslevel1[0] !== "undefined" && typeof clikeditemslevel1[1] !== "undefined" && clikeditemslevel1[0] == clikeditemslevel1[1]) {
selectedclassnamesFirstLevel = emptyarray;
selectedclassnamesSecondLevel = emptyarray;
}
if (clickcounter == 2) {
clikeditemslevel1 = emptyarray;
while (clikeditemslevel1.length > 0) {
clikeditemslevel1.pop();
}
clickcounter = 0;
}
});
});
function flipthisTypehoverpanel() {
firstpanel = selectedclassnamesFirstLevel[0];
secondpanel = selectedclassnamesFirstLevel[1];
m = firstpanel.replace(/\s+/g, '.');
n = secondpanel.replace(/\s+/g, '.');
m = "." + m;
n = "." + n;
setTimeout(function() {
$(m).toggleClass('flip');
$(n).toggleClass('flip');
}, 800);
var emptyarray = [];
selectedclassnamesFirstLevel = emptyarray;
selectedclassnamesSecondLevel = emptyarray;
console.log(selectedclassnamesFirstLevel);
}
html,
body {
background-color: #78D6CC !important;
}
.panel1 {
position: fixed;
width: 15vw;
height: 15vh;
left: 20vw;
bottom: 80vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel1 .front {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel1.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel1 .back {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel1.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
/*-------------------------------second box--------------------*/
.panel2 {
position: fixed;
width: 15vw;
height: 15vh;
left: 38vw;
bottom: 80vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
visibility: visible;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel2 .front2 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel2.flip .front2 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel2 .back2 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel2.flip .back2 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
/*-------------------------------third box--------------------*/
.panel3 {
position: fixed;
width: 15vw;
height: 15vh;
left: 55vw;
bottom: 80vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
visibility: visible;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel3 .front3 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel3.flip .front3 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel3 .back3 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel3.flip .back3 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
/*-------------------------------fourth box--------------------*/
.panel4 {
position: fixed;
width: 15vw;
height: 15vh;
left: 20vw;
bottom: 57vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel4 .front4 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel4.flip .front4 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel4 .back4 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel4.flip .back4 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
/*-------------------------------fifth box--------------------*/
.panel5 {
position: fixed;
width: 15vw;
height: 15vh;
left: 38vw;
bottom: 57vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel5 .front5 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel5.flip .front5 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel5 .back5 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel5.flip .back5 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
.panel6 {
position: fixed;
width: 15vw;
height: 15vh;
left: 55vw;
bottom: 57vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel6 .front6 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel6.flip .front6 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel6 .back6 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel6.flip .back6 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hover panel1" style="border:px solid blue;">
<div class="front">
<div class="top" style="border:px solid red; width:100%; height:100%;">
<p></p>
</div>
</div>
<div class="back">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="1" style="width:100%; height:100%; border:px solid black; " />
</div>
</div>
</div>
<div class="hover panel2" style="border:px solid blue;">
<div class="front2">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back2">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="2" style="width:100%; height:100%;" />
</div>
</div>
</div>
<div class="hover panel3" style="border:px solid blue;">
<div class="front3">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back3">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="3" style="width:100%; height:100%;" />
</div>
</div>
</div>
<div class="hover panel4" style="border:px solid blue;">
<div class="front4">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back4">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="4" style="width:100%; height:100%;" />
</div>
</div>
</div>
<div class="hover panel5" style="border:px solid blue;">
<div class="front5">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back5">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="5" style="width:100%; height:100%; " />
</div>
</div>
</div>
<div class="hover panel6" style="border:px solid blue;">
<div class="front6">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back6">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="6" style="width:100%; height:100%;" />
</div>
</div>
</div>
Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.
I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)
If anyone could take the time to help me out that'd be highly appreciated, thanks!
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).
In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#slide1:hover:before {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
I am trying to create a splash screen for my website and I have made a progress bar to make it look nicer. I also have some links for the user to login or register.
What I want to achieve is, right after the window loads, have the progress bar do its thing for 4 seconds then have it fade out in .5 seconds and then have the links fade in in its place in .5s for a total of 5 seconds before the user can proceed.
I have put together some code to make this work using mainly:
setTimeout();
but despite having no errors as far as both I and the Google Chrome console can tell, no visible result is produced.
How can I fix my code to work properly? Any suggestions would be greatly appreciated. I would prefer a solution in plain JavaScript, but if there's no other way, I would be satisfied with a jQuery one too.
To help you, I have assembled a demo for you here.
No doubt to switch to jquery. FadeIn and fadeOut do it easily:
$(window).load(function(){
var t=setTimeout(function(){
$("#progressbar").fadeOut(500);
$("#splashscreen-links").fadeIn(500);
},4000)
})
#-webkit-keyframes greenglow {
from {
left:-120px;
}
to {
left:100%;
}
}
#-moz-keyframes greenglow {
from {
left: -120px;
}
to {
left: 100%;
}
}
#-ms-keyframes greenglow {
from {
left: -120px;
}
to {
left: 100%;
}
}
#-o-keyframes greenglow {
from {
left: -120px;
}
to {
left: 100%;
}
}
#keyframes greenglow {
from {
left: -120px;
}
to {
left: 100%;
}
}
#progressbar {
/* Dimensions */
width: 250px;
height: 16px;
overflow: hidden;
/* Positioning */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 5px;
padding-top: 4px;
padding-left: 17px;
/* Styling */
background: #E6E6E6;
border:1px solid #bbb;
border-radius:0px;
}
#progressbar:after {
content: " ";
display: block;
width: 120px;
top: -50%;
height: 250%;
position: absolute;
animation: greenglow 2s linear infinite;
-webkit-animation: greenglow 2s linear infinite;
z-index: 2;
background: #1CAE30;
}
#splashscreen-links {
/* Text */
color: #999999;
font-family: "Arial";
text-decoration: none;
/* Positioning */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 5px;
padding-top: 4px;
padding-left: 17px;
/* Visibility */
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progressbar"></div>
<p id = "splashscreen-links"><a>Login</a> • <a>Register</a></p>
You are already using CSS animations. Just keep going down that path!
#keyframes progresshide {
0% {opacity: 1; display:block; }
80% { opacity: 1; }
100% { opacity: 0; display:none; }
}
#keyframes linksshow {
0% {opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
#progressbar {
animation: progresshide 5s linear forwards;
}
#splashscreen-links {
animation: linksshow 5s linear forwards;
}
https://jsfiddle.net/bcwtz8rr/3/
In the case that you'd rather go JS than JQuery, it is still possible using .className to switch the class, setting up classes with transitions of the .5s you mentioned, and using setTimeout appropriately.
First, we start by introducing another two rather simple classes:
.showObject {
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
opacity: 1;
}
.hideObject {
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
opacity: 0;
}
Then, JS with appropriate setTimeout usage:
window.onload = function SwitchProgress() {
// Declaration
'use strict';
// Fade in
document.getElementById('progressbar').setAttribute('style', 'display: block;');
document.getElementById('progressbar').className = 'showObject';
// Waiting 4s for bar animation, then fading it out
setTimeout(function () {
document.getElementById('progressbar').className = 'HideObject';
// .5s while the bar fades out, removing bar, displaying links
setTimeout(function () {
document.getElementById('progressbar').setAttribute('style', 'display: none;');
document.getElementById('splashscreen-links').setAttribute('style', 'display: block;');
// .01s for display change, links fade in
setTimeout(function () {
document.getElementById('splashscreen-links').className = 'showObject';
}, 10);
}, 990);
}, 4000);
};
Just wanted to note: I got this to work on Codecademy (codebits), which refreshes the file every time you make a change. JSFiddle didn't work as well. Should be fine for usage on a page that's actually going to experience proper onload execution.