I am from a not developer background and I am making a WordPress webpage in divi theme for my photography thing.
I want a fade out element in the slider module. So what it does is when we scroll down the page the element moved up and fade out. Example like this: http://codepen.io/nickcil/pen/sfutl/
So I put this code (below) and got the desired effect:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 150);
});
</script>
</head>
<body>
<div class="top">
<div class="title">
Fade Away
</div>
</div>
</body>
</html>
What I did, put the above codes in xyz Html(wordpress plugin) and get the Snippet Short Code and put this Snippet Short Code in the module.
But the issue is after the page loaded. The header transition/effect on scrolling to the logo is gone and I am not able see my logo on scrolling (center inline logo header style).
Can someone please help me to resolve this issue. A flow/steps/procedure to do the fade-out effect will help me a lot.
Related
CSS:
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sidebar {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 20px 5px;
grid-template-areas: "1"
"box"
"3";
height: 100%;
width: 275px;
background: black;
}
#sidebar-box {
grid-area: box;
height: 20px;
width: auto;
margin: 0 12.5px 0 12.5px;
background-color: white;
}
#sidebar-open-button {
margin-top: 40%;
height: 50px;
width: 50px;
background-color: blue;
}
#sidebar-close-button {
height: 15px;
width: 15px;
background-color: red;
margin-left: 5px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="sidebar">
<div id="sidebar-box">
<button id="sidebar-close-button"></button>
</div>
</div>
</body>
</html>
What Im looking for is whenever you press the "sidebar-close-button" button the "sidebar" and its contents slowly (over 0.5s) move off screen to the left and while that is moving off screen the "sidebar-open-button" does the exact same thing but to the right (comes onto screen, sliding in from the left). Also when "sidebar-open-button" is sliding onto screen I want it to be on top of "sidebar" and its contents.
The end product of pressing "sidebar-close-button" should look like just having your html like this:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button id="sidebar-open-button"></button>
</body>
</html>
Any help is appreciated, even links to some documentation because I currently have no idea how to do this.
You can try this.
I wrapped everything into a div that includes your opener button and your visible sidebar with the closer button so everything about the sidebar are contained together.
Then I simply added click event listeners to your buttons to toggle the opened and closed classes on the sidebar-container.
Then I set the CSS so that when the .sidebar-container is .opened, it hides the #sidebar-open-button and shows the #sidebar-box, and when it is .closed, it shows the #sidebar-open-button and hides the #sidebar-box. The CSS transition provides the animation.
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
const container = document.getElementsByClassName('sidebar-container')[0];
container.querySelectorAll('#sidebar-open-button, #sidebar-close-button').forEach((elem) => {
elem.addEventListener('click', (event) => {
container.classList.toggle('opened');
container.classList.toggle('closed');
});
});
}
};
.sidebar-container {
height: 100vh;
width: 50vw;
position: relative;
}
#sidebar-open-button {
position: absolute;
top: 0;
left: 0;
transition: all 0.5s;
}
.opened #sidebar-open-button {
left: -100%
}
#sidebar {
background-color: cyan;
height: 100%;
transition: all 0.5s;
}
.closed #sidebar {
transform: translateX(-110%);
}
<div class="sidebar-container closed">
<button id="sidebar-open-button">Open</button>
<div id="sidebar">
<div id="sidebar-box">
<button id="sidebar-close-button">Close</button>
</div>
</div>
</div>
You may be looking for CSS animations.
As in this answer, you can add a class to an element apon a javascript event to trigger an animation.
This adapted code may help.
let sideBarRevealed = false;
button.on("click",function () {
if(!sidebarRevealed) {
//If not revealed then reveal
if(sideBar.hasClass("animateHide")){
sideBar.removeClass("animateHide")
}
sideBar.addClass("animateReveal");
sideBarRevealed = !sideBarRevealed;
}
else {
//If revealed then hide
sideBar.addEventListener('animationend', () => {
sideBar.removeClass("animateReveal");
});
sideBar.addClass("animateHide");
sideBarRevealed = !sideBarRevealed;
}
});
If you are planning to use this kind of components in your website, maybe using a frontend framework such as angular or react may be better suited since you won't have to design and script each component.
I have a div that is set to:
{
height: 100vh;
width: 100%;
background-color: black;
opacity: 0;
position: absolute;
z-index: 2;
}
This div is also at the top of the page.
I want to make it so that as I scroll down (and away from the div), it slowly fades in, and when I scroll back up it fades out.
How would I do this?
You may refer following code snippet. The point I am trying to make is in the script tag at the bottom just added the window scroll function which sets the opacity to your entire window of desired height in your css class ".top". So when you try to scroll in and out it will dynamically add an animation effect to your window.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
</style>
</head>
<body>
<div class="top">
<div class="title">Fade Away</div>
</div>
</body>
</html>
<script>
$(window).scroll(function() {
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
</script>
document.body.addEventListener('wheel', (e) => {
let faceLayer = document.getElementById('your_id');
faceLayer.style.opacity = Math.abs(faceLayer.getBoundingClientRect().top / faceLayer.clientHeight).
})
I got an animation from here: http://codepen.io/jschr/pen/GaJCi
I am using it in my project.
#content {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 700px;
}
#animation {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: 600px;
left: 350px;
}
#animation2 {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: -25px;
left: 340px;
}
Inside the animation.css:
h1 {
position: absolute;
font: 12vmin/12vmin 'Special Elite', cursive;
left: 0;
top: 30%;
margin-top: -4vmin;
width: 100%;
text-align: center;
padding: 2vmin 0;
text-shadow: 0.15vmin 0.15vmin rgba(0, 0, 0, 0.5);
}
In the main html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="content">
<div id="animation"></div>
<script>
$("#animation").html('<object data="./animation/animation.htm">');
</script>
<div id="animation2"></div>
<script>
$("#animation2").html('<object data="./animation/animation2.htm">');
</script>
</div>
And the animations witch i load into te main html:
<head>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
<link rel="stylesheet" href="animate.css" charset="utf-8" />
<link rel="stylesheet" href="animation.css" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.fittext.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<h1 class="tlt">Hello to my website and welcome</h1>
<script>
$('.tlt').textillate({
in: { effect: 'splat' },
out: { effect:'hinge', sync: true },
loop: true
});
</script>
</body>
The second animation looks almost same.
What i want is the ability to set the width, to be able to see the whole phrase with the font almost at 30px. The problem is, the first animation i am able to set the font at 8vmin while the second animation i come to 12vmin to get the phrases as one string. If i make it bigger, it will break to more strings or even cut the phrase, depends were i try to set the width. I saw the animation does inject spans into my html and they are width 300, while i need almost width 700. I was trying to find away online also tried to change my css with no result. I also tried to catch the span injection and make it larger, but not helped so fare. Still hope to find a solution to this. If someone knows how, please show me, thanks.
I found out, i can this:
<script>
$("#animation").html('<object data="./animation/animation.htm">');
</script>
simply to this:
<script>
$("#animation").html('<object width="600px" data="./animation/animation.htm">');
</script>
And this is how it worked for me, it increased the width inside the loaded object data, thanks anyway.
So I'm currently working on a single screen which has multiple content views which will be accessed from a button to the side of the dynamic area. I found this repo (https://github.com/ian-de-vries/Multi-Screen.js) which achieves something very similar to what I want, only it expects a full screen, as opposed to just a certain area. So far, I've got it very close to performing as I would hope, but the last couple of hours have had me stumped. Currently there are two issues:
1) The relative divs use the % width value of their containing div, while the animation of the divs uses a % width of the entire screen, making the animated divs larger. I think the way around this is to calculate the fixed width during the animation then remove it post animation. If you set a fixed width in the css (which isn't appropriate for the site) the animation is smooth and has the correct width whilst animating, but then leads to the next issue.
2) Because of the original functionality of the js, the animations come straight down the centre, which again adds to a worse animation because of the offset content.
While I've tried to solve both of these issues, JS is beyond me despite the experience I have in other programming languages. I thought I was onto something when editing the pre/post/animation_css variables, but I couldn't get what I wanted to achieve. Anyway, below is a quick dummy site which replicates the code on the actual site well, and creates the same issues. To get this working, put these two files in a folder with the multi-screen.js file from the repo.
<!DOCTYPE html>
<html>
<head>
<!-- Scrolling Pages -->
<!-- latest jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<!-- link the css and js scripts -->
<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="multi-screen.js"></script>
<!-- run the plugin -->
<script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
</head>
<body>
<div class="wrapper">
<div class="header">My Header</div>
<div class="contentarea">
<div style="float:left; width: 20%; background-color: red; height: 500pt;"></div>
<div style="width:80%; float: right; height: 600pt; background-color: grey;">
<div id="entry_screen" class="ms-container ms-default" style="">
go down<br>
go down 2
</div>
<div id="screen2" class="ms-container" style="">
go up<br>
go down
</div>
<div id="screen3" class="ms-container" style="">
go up<br>
go up 2
</div>
</div>
</div><!---------- Close "content-area" --------->
</div><!---------- Close "wrapper" --------->
</body>
</html>
CSS:
.ms-container {
position: fixed;
z-index: 1;
display: none;
}
.ms-default {
position: absolute;
z-index: 2;
display: block;
}
#entry_screen {
height: 500pt;
width: 80%;
background-color: green;
left: 0;
margin-left: 20%;
}
#screen2 {
height: 500pt;
width: 80%;
//float: right;
background-color: blue;
//margin-right: 10%;
margin-left: 20%;
}
#screen3 {
height: 500pt;
width: 80%;
background-color: magenta;
margin-left: 20%;
}
.wrapper {
min-height: 100%;
padding: 0 10% 0 10%;
height: auto !important;
height: 100%;
margin: 0 auto 0pt;
}
.contentarea {
position: relative;
}
.header {
text-align: center;
width: 100%;
height: 50pt;
}
a {
color: white;
}
Ended up using another alternative. The one I chose was fullPage.js. It can be used for the desired functionally despite being for full screen sites. Hope this helps anyone who wanted to achieve something similar.
I have a loading mask that I would like to fadeOut() once the entire page has loaded. It works perfectly on the first time the user enters the page, but if they refresh, the loading mask disappears before the page has loaded. I have read quite a few articles out there and it seems that the common problem is that $(window)load usually doesn't fire events because of cache, but in my case it is fired too quickly upon refresh...What could be the issue?
1. <html>
2. <head><script type="text/javascript">
3. Ext.onReady(function() {....});
4. $(window).load(function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);});
5. </script></head>
6. <body>
7. <div id="loading-mask"></div>
8. <div id="loading">
9. <span id="loading-message">Loading Tibet...</span>
10. </div>
11. </body>
12. </html>
Any help or guidance would be greatly appreciated :)
Thanks,
elshae
Ok so I found out that it's best if JavaScript code is placed in the body..
So now I have all my code in the body including the Ext.onReady, so here goes...
<html>
<head></head>
<body onload="">
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading Tibet...</span>
</div>
<script type="text/javascript">
//Default blank image needed for some ExtJS widgets/if no image is found...
Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif";
Ext.onReady(function() {
.............
});
//Outside Ext.onReady
window.onload = function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);}
</body></html>
//The css is:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #D8D8D8;*/
/* background: #6E6E6E;*/
background: #000000;
opacity: .8;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
}
#loading span {
/*background: url('ajax-loader.gif') no-repeat left center;*/
background: url('globe.gif') no-repeat left center;
color: #BDBDBD;
width: 60%;
height: 30%;
padding: 60px 70px;
display: block;
}