Is there a way to make a transparent element appear on top of a visible element? I want NAV2 that is transparent to be on top of the yellow square like NAV1 does despite being transparent.I need the nav to be transparent and the square that appears when you click on the button to go beneath it.
Thank you!
Here is the code:
buttons = document.querySelectorAll('button');
elements = document.querySelectorAll('.element');
buttons.forEach((button, i) => {
button.addEventListener('click', function() {
elements[i].classList.add('animate-element');
})
});
elements.forEach(element => element.addEventListener('animationend', function() {
element.classList.remove('animate-element');
}))
.nav1, .nav2 {
position: relative;
width: 100vw;
height: 20vh;
color: white;
}
.nav1 {
background: red;
}
.nav2 {
border: 2px solid black;
}
button {
margin-top: 10px;
}
.button1 {
margin-bottom: 120px;
}
.element1, .element2 {
position: absolute;
width: 100px;
height: 80px;
background: yellow;
bottom: -105%;
right: 5%;
opacity: 0;
z-index: -1;
}
.animate-element {
animation: animate 1.2s ease forwards;
}
#keyframes animate {
0% {
transform: scale(0);
opacity: 1;
}
35% {
transform: scale(1);
opacity: 1;
}
70% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1) translateY(-140%);
opacity: 1;
}
}
<div class="nav1">
<div class="element1 element"></div>
NAV1
</div>
<button class="button1">Button1</button>
<div class="nav2">
NAV2
<div class="element2 element"></div>
</div>
<button class="button1">Button2</button>
Do you want to see the page Background? This is not possible. But you can use z-index: n; to move your transparent Element n layers above the others. You can't see this but it's above.
Related
I've set up a menu as pictured in the snippet below. I want the user to be able to hover over the central icon and then be able to select one of the buttons on the side. I've had some success by placing another, larger element in front of the icon when the icon is hovered on and then chaining some hovers together but then as soon as they hovered over a button all the other ones disappeared. I've also tried expanding the padding of the #navCont element but the buttons disappear when hovering over any of them (it also pushes all my content up if I expand the bottom area)
body {
background: #000;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.main {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
}
#title {
color: white;
width: 40%;
margin-bottom: 3vh;
}
#navCont {
position: relative;
top: 0;
}
#sqlogo {
opacity: .75;
width: 3em;
animation: pulse 1.8s cubic-bezier(.28, 0, .55, 1) 1s infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.25);
}
}
#sqlogo:hover {
opacity: 1;
animation-play-state: paused;
}
#navCont .btn {
opacity: .75;
height: 1.5em;
display: none;
position: absolute;
}
#navCont:hover img.btn {
display: block;
}
#navCont .btn:hover {
opacity: 1;
}
#navCont #btnWork {
left: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnAbout {
right: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnContact {
top: 4em;
left: 50%;
transform: translateX(-50%);
}
<body>
<div class="main">
<div id="title"> Title </div>
<div id="navCont">
<img id="sqlogo" src="http://drive.google.com/uc?export=view&id=1nybF_-lqMK9k0_X8EfgU8tKbiIzM459U" />
<img id="btnWork" class="btn" src="http://drive.google.com/uc?export=view&id=1o2pds3XK3Wh78pQPfC5cgsqWRHEIHy-Q" />
<img id="btnAbout" class="btn" src="http://drive.google.com/uc?export=view&id=1XGf88jotbT8n4NmBPc979gI1oYbhjgXb" />
<img id="btnContact" class="btn" src="http://drive.google.com/uc?export=view&id=1EjimLtnyIZRsfPbX3yc2wJ_s1Qxpwj45" / />
</div>
</div>
</div>
</body>
https://i.stack.imgur.com/qZDam.jpg
Ideally, I'd like the buttons to remain active while the cursor is in this area (see link above) after they have appeared via the icon, however, a rectangular area of that size would also be ok.
You could create an on hover event on your squid icon using javascript that when triggered keeps the menu content visible until a mouseout event on some larger parent area is triggered
Something like this:
document.getElementById("sqlogo").onmouseover = function(){
// show the buttons
getElementsByClassName("btn").style.display = "block"
};
document.getElementById("navCont").onmouseout = function(){
// hide the buttons
getElementsByClassName("btn").style.display = "none"
};
You might have to undo some of your CSS so that JS controls the visibility instead of CSS :hover
I found a workaround using JQuery. I just toggled the button visibility if the mouse didn't move to them fast enough after leaving the main icon
$("#sqlogo").mouseenter(function() {
$("#sqlogo").addClass("freeze");
$(".btn").addClass("vis");
});
let t;
$("#sqlogo").mouseleave(function() {
t = setTimeout(function() {
$("#sqlogo").removeClass("freeze");
$(".btn").removeClass("vis");
}, 500);
});
$(".btn").mouseenter(function() {
clearTimeout(t);
});
$(".btn").mouseleave(function() {
$("#sqlogo").removeClass("freeze");
$(".btn").removeClass("vis");
});
body {
background: #000;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.main {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
}
#title {
color: white;
width: 40%;
margin-bottom: 3vh;
}
#navCont {
position: relative;
top: 0;
}
#sqlogo {
opacity: .75;
width: 3em;
animation: pulse 1.8s cubic-bezier(.28, 0, .55, 1) 1s infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.25);
}
}
#sqlogo:hover {
opacity: 1;
}
#sqlogo.freeze {
animation-play-state: paused;
}
#navCont>.btn {
opacity: .75;
visibility: hidden;
height: 1.5em;
position: absolute;
}
#navCont>.vis {
visibility: visible;
}
#navCont>.btn:hover {
opacity: 1;
}
#navCont > #btnWork{
left: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnAbout {
right: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnContact {
top: 4em;
left: 50%;
transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div id="title"> Title </div>
<div id="navCont">
<img id="sqlogo" src="http://drive.google.com/uc?export=view&id=1nybF_-lqMK9k0_X8EfgU8tKbiIzM459U" />
<img id="btnWork" class="btn" src="http://drive.google.com/uc?export=view&id=1o2pds3XK3Wh78pQPfC5cgsqWRHEIHy-Q" />
<img id="btnAbout" class="btn" src="http://drive.google.com/uc?export=view&id=1XGf88jotbT8n4NmBPc979gI1oYbhjgXb" />
<img id="btnContact" class="btn" src="http://drive.google.com/uc?export=view&id=1EjimLtnyIZRsfPbX3yc2wJ_s1Qxpwj45" / />
</div>
</div>
</div>
</body>
I am using an animated arrow with the following code:
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
The issue is that when I click on the two arrow lines, the onclick() does not work. It works only if I click in the surrounding area of the two lines, that is enclosed by the border of the parent div with id start-arrow.
The desired behavior is for the onclick to work in the entire area enclosed by the start-arrow div.
I tried using z-index to make the start-arrow div be on top, but it's not working. I tried messing with display and also with position of the elements in CSS but no luck as well. However I should mention that I'm looking for a solution that does not include changing the position attributes of the elements.
How can I make the onclick fire regardless of where I click in the start-arrow div area?
EDIT: it seems to be working a lot better inside Stack Overflow, why? However if a click on top of the border of each line, it doesn't always work. I am opening mine (exact same code) in Firefox (it doesn't work inside my asp.net either).
Why don't we simply wrap the elements into another parent element and bind the event on that? I am able to solve it using a parent element ('parent-id').
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div id="parent-id" onclick="startDownload()">
<div class="arrow" id="start-arrow" style="z-
index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
</div>
let parent = document.getElementById("start-arrow");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
This is not the most optimize solution, but it should do the trick, other solution is to increase click box by adding it padding.
let parent = document.getElementById("filterInput");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
The problem is you're attaching a click event listener. That means if you want it to fire, the element needs to be clicked & released.
If you click on your element, it moves to the upper-left. Now if you're slow enough the element isn't below your mouse pointer anymore, thus the click event won't fire because you released the mouse somewhere below.
So simply replace
onclick="startDownload()"
by
onmousedown="startDownload()"
and make sure you don't have an alert dialog in the callback function since it would stop the movement of your arrow. Simply trace something using console.log("fired");
Do it with jquery. Use the id start-arrow
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
Try this:
$(document).on('click','#start-arrow',function(){
alert('Hi');
});
I'm trying to make a loading screen for my project. I need the javascript to remove the CSS property "Display: none" from (page) I can't figure out why my code doesn't work.
The Problem was:
window.onload is not a function and i should use something like
"window.onload = loader;" instead. Afterwards I should make it "display:inline"
Worked perfectly!
window.onload(loader)
function loader(){
document.getElementById("page").style.removeProperty("display");
}
#page{
display: none;
}
/* Loading */
#loading{
width: 100%;
height:100vh;
background-color: #428BCA;
}
.loading_container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#spin {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#loading h1{
color: #FFF;
margin-left:10px;
}
<div id="page">
Content!
</div>
<div id="loading">
<div class="loading_container">
<div id="spin"></div>
<h1>Loading...</h1>
</div>
</div>
window.onload is not a function.
You need to assign it to the function as follows.
window.onload = loader;
I'm assuming you want the loading animation to disappear upon successfully loading. The snippet in the loader() function emulates loading by waiting 3 seconds.
I set the css attributes differently. You initialise #page to display: none, so I simply set it to the default value inline.
document.getElementById("page").style.display = "inline";
I would favor this method instead of removing the attribute entirely and letting it default. This way you can specify a particular display value of your desire. I.e. inline-block, block etc.
window.onload = loader;
function loader(){
setTimeout(function() {
document.getElementById("loading").style.visibility = "hidden";
document.getElementById("page").style.display = "inline";
}, 3000);
}
#page{
display: none;
}
/* Loading */
#loading{
width: 100%;
height:100vh;
background-color: #428BCA;
}
.loading_container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#spin {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#loading h1{
color: #FFF;
margin-left:10px;
}
<div id="page">
Content!
</div>
<div id="loading">
<div class="loading_container">
<div id="spin"></div>
<h1>Loading...</h1>
</div>
</div>
If I understand you correctly, you want to show the content of the page with the function 'loader', correct? If so, you can't try to get rid of the display property, because it needs to be set. You want to change it from none to initial or inline.
First of all window.onload is not a function. It's a property. You can simply assign your callback to it.
removeProperty("display"); is also wrong. It should be style.display = "none"
window.onload = loader;
function loader() {
document.getElementById("page").style.display = "none";
}
loader();
#page {
display: none;
}
/* Loading */
#loading {
width: 100%;
height: 100vh;
background-color: #428BCA;
}
.loading_container {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#spin {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loading h1 {
color: #FFF;
margin-left: 10px;
}
<div id="page">
Content!
</div>
<div id="loading">
<div class="loading_container">
<div id="spin"></div>
<h1>Loading...</h1>
</div>
</div>
I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.
http://www.samnorris.net/portfolio-ss/
The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.
is my CSS incorrect, or something else...?
Here is the Codepen which shows the animation that should be displaying:
http://codepen.io/devilishalchemist/pen/emOVYQ
HTML:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS from my page:
/* ==========================================================================
PAGE LOADER
========================================================================== */
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
#windowloader {
&:after {
content: '';
display: block;
position: absolute;
z-index: 999999;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
animation: loader 1.2s infinite ease-in-out;
span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #EE4040;
animation: loaderBlock 1.2s infinite ease-in-out both;
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(3) {
bottom: 0;
left: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
/*LOAD FINISH*/
.loaded {
top: -100%;
}
}
}
#keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
#keyframes loaderBlock {
0%, 30% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(90deg);
}
}
#keyframes loaderBlockInverse {
0%, 20% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(-90deg);
}
}
FWIW, I have also tried:
#windowloader:after { }
Javascript:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});
Bah, nevermind - I just put the animation in a separate div inside the #windowloader div which probably works well enough I guess..
Was goofing around with css3 animation
check it up http://codepen.io/rokki_balboa/pen/eNVEyq
<section>
<div></div>
<div></div>
</section>
Change
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
body {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
section {
width: 100%;
height: 100%;
position: relative;
perspective: 500px;
}
section:hover {
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
#keyframes cool {
0% {
transform: perspective(1000px) translateZ(0px);
}
45% {
transform: perspective(1000px) translateZ(-400px);
}
55% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn);
}
100% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn) translateZ(-400px);
}
}
div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:nth-child(1) {
background: url(http://i.imgur.com/dLBSLQu.jpg) top center no-repeat;
background-size: cover;
}
div:nth-child(2) {
background: url(http://i.imgur.com/uL0mXb6.jpg) top center no-repeat;
background-size: cover;
transform: rotateY(.5turn);
backface-visibility: hidden;
}
#trigger {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-size: 14px;
}
.ghoster {
display: none;
}
As you can see it works when hovering section. But my goal is to trigger hovering on section when you click an anchor.
1. you click on change anchor
2. animation comes on section element
3. click again
4. animations comes again
I have no idea how to achieve such a result. Can you please help me.
p.s. It would be better if you do it on pure javascript.
CSS
<style>
section.activateHover
{
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
</style>
HTML
<section id="sectionToChange">
<div></div>
<div></div>
</section>
Change
Javascript
<script type="text/javascript">
var trigger = document.getElementById('trigger');
var sectionToChange = document.getElementById('sectionToChange');
trigger.onclick = function(e)
{
//toggle hover
sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
//restart animation
if(sectionToChange.className != 'activateHover')
{
sectionToChange.className = 'activateHover';
}
}
</script>