This code redirects to example-page.php:
setTimeout(function() {
window.location.href = "/example-page.php";
}, 5000);
I'm trying to add a transition effect, so when it redirects, it looks like it's scrolling left or right off the page to the other. Any help would be greatly appreciated! I've tried using Jquery but i'm still fairly new and struggling.
You could try something like this:
var elements = document.getElementsByTagName('body');
setTimeout(function(){
elements[0].style.opacity = 1;
(function fade(){
var opacloader = parseFloat(elements[0].style.opacity);
(elements[0].style.opacity = opacloader - .1)<0.1?window.location.href='example':setTimeout(fade,40)})();
},4800);
What basically happens here is:
After 4.8 seconds, the actual page's body is faded out. (You can add another effect if you want to.) When the body's oppacity of the actual page is 0, the redirect will happen.
On the next page, you could do a fadeIn effect, which might come close to what you expect
HERES A DEMO
To fade the body in on the next page, you can use this:
var elements = document.getElementsByTagName('body');
elements[0].style.opacity = 0;
(function fadeIn() {
var opacity = parseFloat(elements[0].style.opacity);
if (opacity == 1) return;
elements[0].style.opacity = opacity + 0.1;
setTimeout(fadeIn, 100); //<<<<<<<< here you set the speed!
})();
DEMO FADE IN
(function(){
document.body.classList.add("fadeout");
window.setTimeout(function(){
window.location.href = "http://www.newlocation.com";
},5000)
})()
body{
transition:opacity 5000ms;
opacity:1;
}
body.fadeout{
opacity:0;
}
You should put the transition effect in the landing page (example-page.php).
For example, you can hide the whole body with a css rule #wrapper{display:none}, and show it sliding with jquery
$(document).ready(function () {
$('#wrapper').slideToggle(1000);
Related
I want to make a fixed background changes with jQuery.
I put the style of body as follows
body {
background-attachment:fixed;
}
Untill now everything is ok and the background is not scrolling, but when I use the jQuery to make it change it start scrolling again.
This is the jquery code :
$(function () {
var body = $('body');
var backgrounds = [
'url(./images/001.jpg)',
'url(./images/02.jpg)','url(./images/03.jpg)','url(./images/04.jpg)','url(./images/05.jpg)'];
var current = 0;
function nextBackground() {
body.css(
'background',
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
body.css('background', backgrounds[0]);
});
Can any one help please?
Edit body.css('background', backgrounds[0]);
to
body.css('background-image', backgrounds[0]);
because the first code changes its entire background properties including background-attachment
so background-attachment changes backs to its default value, ie scroll
I'm trying to create a slider preview (3 pages). Each page is 80vw large and the box has overflow-x: hidden.
I'm able to slide each page by clicking on a bullet whit this code
function slideIntro (){
var slideLeft = $(this).data('slide'),
slidePerc = '-' + slideLeft + '%';
$('.pallino').removeClass('pallino-attivo');
$(this).toggleClass('pallino-attivo');
$('.page-slide-wrap').css('margin-left', slidePerc);
}
The problem is that I'd love to make it scroll on .mouseout() every 4 seconds what I tried to do is calculate each case and write the code but I'm sure that there is a shorter solution than this
function slideShow1 (){
$('.pallino').removeClass('pallino-attivo');
$('.page-slide-wrap').css('margin-left', '-100%');
$('.pallino').slice(1,2).addClass('pallino-attivo');
}
function slideShow2 (){
$('.pallino').removeClass('pallino-attivo');
$('.page-slide-wrap').css('margin-left', '-200%');
$('.pallino').last().addClass('pallino-attivo');
}
function slideShow3 (){
$('.pallino').removeClass('pallino-attivo');
$('.page-slide-wrap').css('margin-left', '0%');
$('.pallino').first().addClass('pallino-attivo');
}
function slideShow (){
setTimeout(slideShow1, 4000);
setTimeout(slideShow2, 8000);
setTimeout(slideShow3, 12000);
}
What I would like to do is add a rule able to stops the function when the mouse is over the gallery box .page-slide-wrap and cycle the whole function.
I forgot to say that the slides now move using margin-left as you can see in bot codes
PLEASE FEEL FREE TO TELL ME IF I AM NOT CLEAR ENOUGH
I'm using a mixture of CSS/JS to create some simple page slide transitions for new pages, that will eventually be loaded dynamically by AJAX, however on creation of the new element "main2" which has the necessary -webkit-transition etc. it does not slide in like it should, but simply appears. The previous page however slides out fine, using basically the same code.
As well as this, changing the slide in to after the animation for the previous page has finished like so:
function newPage() {
var newMain = document.createElement("div");
newMain.className = "main";
newMain.style.left = "100vw";
newMain.id = "main2";
newMain.style.zIndex = 1999;
newMain.style.background = "#AAA";
document.body.appendChild(newMain);
oldMain = document.getElementById("main");
oldMain.style.left = "-50vw";
setTimeout(function() {
newMain.style.left = "50vw";
oldMain.parentNode.removeChild(oldMain);
newMain.id = "main";
}, 1000);
}
makes it animate in, just not at the right time.
Any help would be appreciated, I'm sure it's just something glaringly simple that I've missed.
Demo: JSFiddle
Try this: http://jsfiddle.net/5raj05th/8/
I changed the code so you do trigger the transition by adding the style:
newMain.style.left = "100vw";
and later:
newMain.style.left = "0";
Trying to do a simple fade in using the opacity property of an h1 element. I'm learning javascript, so would like to try this using plain javascript (yes, I know it is much easier using jQuery).
Pasting only relevant snippets:
<body onload="fadeIn()">
...
<div class = "container">
<div class = "row">
<div class = "col-md-3">
<img class = "img-responsive" src="icons/Website_Logo.png">
</div>
<div class = "col-md-9 page-header">
<h1 id="welcomeHeader" style="opacity:0">
Welcome to the world!
</h1>
</div>
</div>
</div>
...
<script>
function fadeIn() {
var el = document.getElementById("welcomeHeader");
var op = parseFloat(el.style.opacity);
var timer = (function () {
if(op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, 50);
}
</script>
</body>
Help is much appreciated! Thanks!
jsFIDDLE
You need to call the setInterval function first in order to invoke a timer. Rest is fine. Here is a working fiddle
Code Snippet:
function fadeIn() {
var el = document.getElementById("welcomeHeader");
var op = parseFloat(el.style.opacity);
var timer = setInterval(function () {
console.log('here');
if(op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, 50);
}
You need to change your function to use setInterval like so:
var timer = setInterval(function () { // notice the setInterval added.
if(op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, 50);
Notes:
I give you this answer to help you LEARN javascript as you mentioned, otherwise,
it would be better done with pure css of course.
Also, make sure your opacity is set to 0 in your css as a starting point.
You don't need a timer for this - all you need to do is change the class. Here's an example:
the CSS:
element{
/* whatever styles you have */
}
element_faded{
transition: opacity .5s;
opacity: 50%; /* or whatever values you want */
}
the javascript
var element = document.getElementById('element');
// in order to trigger the fade, just change the class
element.className = "element_faded";
In the transition will happen between the values of the original and new class, so if you want a fade-in, have the original opacity be 0% and the new one be 100% or something higher than zero, depending on what you want the final opacity to be. Also, remember that the transition characteristics are determined by the transition attribute in the new class.
Doing this without CSS will just make things more complicated unless you need to do something more sophisticated than just plain fading in or out. If that's the case, then use setInterval or perhaps even something like requestAnimationFrame if you're feeling adventurous.
Honestly, this isn't really the kind of thing you need to learn when first learning javascript. Eventually this will be really easy once you get some confidence under your belt doing things that work more easily in javascript (setTimeout and the like can have their own weird caveats). Try to set a meaningful, practical goal and fulfill it first, using whatever mix of javscript/css/html you can and you'll soon have the basics down well enough to find things like this obvious.
I am using javascript to make text inside a div fade in on page load. It seems to work but most times the text initially shows on page load for about half a second, disappears and then fades in like it's supposed to. I've tried moving the javascript into the header, above body tag and below /body tag. It always runs the same. Thanks.
<body onload="javascript:ShowDiv('Layer63');">
<div id="Layer63" class="style1z">
<span class="style16">“Line 1 of fade in text"<br />
“Line 2 of fade in text"</span><br />
-<span class="style12">“Line 3 of fade in text"</span></div>
</body>
<script>
function ShowDiv(name){
//duration of transition (1000 miliseconds equals 1 second)
var duration = 1500;
// how many times should it should be changed in delay duration
var AmountOfActions=30;
var diiv= document.getElementById(name);
diiv.style.opacity = '0'; diiv.style.display = 'block'; var counte=0;
setInterval(function(){counte ++;
if ( counte<AmountOfActions) { diiv.style.opacity = counte/AmountOfActions;}
},
duration / AmountOfActions);
}
</script>
Try putting these css attributes:
#Layer63 {
opacity: 0;
display: none;
}
Since you're animating opacity from 0 anyway and set ur display to block with js why not have them hidden at pageload?
Have you considered using the fadeIn() method in jQuery?
$(document).ready(function() {
$("#Layer63").fadeIn(1000);
});
Or you could pull the code from there, if you want to use pure JavaScript:
http://youmightnotneedjquery.com/