i made some several html files. at the main page i just wrote down some codes like this
<a href="new.html>
<img src="img/button" id="buttonid">
</a>
when i click the button, i see that the web starts new.html activity. I want to put some smooth page transitions when i open that "new.html". I searched through internet, and found out that most of the page transitions are done by putting other class into format. Whatever, are there any methods for page transitions that can be implemented when using ??
You have to hijack your <a> tag and handle its behaviour through javascript.
FadeOut part
Start with giving it an empty target :
...
So when you click it, nothing happens.
Then, use a custom attribute to store the URL you want to load when clicking this tag :
...
Then add some class that will allow javascript / jQuery to target your link :
...
In your javascript, target your smoothLinks and write a delayed action (using jQuery here) :
$("a.smoothLink").click( function(e){
$("body").fadeOut(function(){ // This will fade out your entire page in about half a second. When it's done, execute the callback function
window.location = e.currentTarget.attributes['data-url'].value;
});
}
However, for performance reasons, I strongly advise you to prefer CSS3 opacity animations (opacity 1 --> 0 --> 1) because, unlike jQuery's fade functions, they're hardware accelerated.
Here's how to do :
(JS)
$("a.smoothLink").click( function(e){
$("body").addClass("fadeOut"); // anything with the "fadeOut" class will become transparent in 1s in our CSS
setTimeout( function(){ // wait 1s, then change URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
(CSS)
.fadeOut {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
FadeIn part
Once your new page is loaded, it has to be blank, then fade in. Start with making the whole body transparent :
(CSS)
body{
opacity :0;
}
Then, fade it in.
Using the jQuery method :
$("body").fadeIn()
Using the CSS3 method :
In your HTML, give the body a "fadeIn" class :
(HTML)
<body class="fadeIn">
Back to your CSS, write an instruction for fading in anything with the "fadeIn" class :
(CSS)
.fadeIn {
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
So, on page load, your body will gradually get visible in 1 second.
I have to say this in untested, but should be a nice hint :)
EDIT - **
**Simpler solution with a white overlay
Just cover your whole page with a full white overlay, that you can make transparent or opaque at will :
(HTML)
<div id="overlay"></div>
(CSS)
div#overlay{
position: absolute;
z-index:999;
top:0;
left:0;
width: 100%;
height: 100%;
background:white;
pointer-events:none; // so you can click through
opacity : 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
(JS)
$("div#overlay").css("opacity",0); // will fade out the overlay on page load
$("a.smoothLink").click( function(e){
$("div#overlay").css("opacity",1);
setTimeout( function(){ // wait 1s, then change URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
The only way to make some transition is to use ajax as Jquery Mobile does in example (have a look at http://demos.jquerymobile.com/1.0a4/docs/pages/docs-transitions.html).
There is one way to sort of spoof it, I use Jquery for ease of use here.
in your css set the body tag to display none then with jquery on document load set it to fade in, I've done it at 3 seconds for effect and done an alert etc. muck around with it..
$( "body" ).fadeIn( 3000, function() {
alert('Billys spoofed slow sort of fade in');
$('body').css('color','red');
});
body{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello from fade in</h1>
Related
I use javascript function for each menu and call that function onClick event. What i face is the image is not changing smoothly, Some times its loading slowly.
Lets consider 2 links each link calls a function for changing the background of the body
This is how i change now
function events(){
$("body").css('background-image','url(./wp-content/Uploads/img3.jpg)');
}
function projects(){
$("body").css('background-image','url(./wp-content/Uploads/img2.jpg)');
return false;
}
HTML
<li id="projectsm">Projects</li>
<li id="eventsm">Events</li>
So when i click the menu it must transform like fade out or something smoothly not like flashing
If I understand your problem, you can change body background image with jQuery on click on a link, but it's not smooth / fast enough.
I think it's mainly because when you change your background, the new background isn't loaded yet. So it have to load, then to change when it's loaded.
Solutions :
you can load all the backgrounds on document load
you can load the new background and then call your switch function
In both case, you can use ImagesLoaded plugin to load your images when you want (https://github.com/desandro/imagesloaded).
Then if you want a smooth transition, you can use CSS3 Transition on your body selector :
transition: background-image 1s ease-in-out;
But I'm not sure transition works on background-image property...
Try this code, if that's what you want:
You need load image first, then use javascript.
HTML:
<img src="http://lorempixel.com/400/200/city" alt="" width="0" height="0" />
<img src="http://lorempixel.com/400/200/people" alt="" width="0" height="0" />
<ul>
<li id="projectsm">Projects</li>
<li id="eventsm">Events</li>
</ul>
JS:
$(function(){
$('#projectsm').click(function(){
$('body').css('background-image','url(http://lorempixel.com/400/200/city)')
});
$('#eventsm').click(function(){
$('body').css('background-image','url(http://lorempixel.com/400/200/people)')
});
});
and for smooth transition, use css3 transition property
CSS:
body{
background-image:url(http://lorempixel.com/400/200/animals);
background-repeat:no-repeat;
background-size:cover;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
http://jsfiddle.net/sL8q7nbb/1/
When my webpage loads, I want there to be links. Once all the links are clicked, I want an image to fade in on the bottom of the page (the image says 'complete' which basically means the user has completed clicking all the links). I first hide the image when the webpage loads, like so;
<html>
<body>
<!-- links which need to be clicked go here -->
<img id='complete' src='../images/complete.png' alt='' />
</body>
</html>
<style>
#complete {
visibility: hidden;
}
</style>
<script>
// once all links are clicked
$('#complete').fadeIn();
</script>
With this code, #complete does not fade in (probably because visiblity is set to hidden). I tried making visiblity set to visible right before the fade in command but that still didn't make it fade in. I also tried making the css
#complete {
filter: alpha(opacity = 0);
}
and the script
$('#complete').fadeTo('slow', '100');
and that doesn't work, #complete just appears really fast rather than fading in slowly.
I am using IE8 with CSS, any idea on how to fix this?
on css
#complete {
display: none;
}
and on javascript
$('#complete').fadeIn();
And try to use latest jquery
<body>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
See it on action: http://jsfiddle.net/KUqJL/ your problem is what I said about css
#complete {
visibility: hidden;
} replace with: display:none
Change your css to:
#complete {
display:none;
}
and if you'd like to use .fadeTo(), the second parameter must be an integer between 0 and 1.
$('#complete').fadeTo("slow", 1);
"slow" could also be replaced with a millisecond value such as 3000 (3 seconds), for an even slower fade.
$('#complete').fadeTo(3000, 1);
Here is a fiddle that may help.
visibility cannot be animated. Something is either visible or hidden, there are no middle stages.
But you can achieve this effect by using opacity instead of visibility, since visible elements have an opacity between 0 and 1.
#complete {
visibility: visible; /* this is the default so this line is not required */
opacity: 0;
}
And use the .animate() method.
$('#complete').animate({
opacity: 1.0
}, 'slow');
jQuery has methods like .fadeIn() .fadeTo() and .fadeOut() which animates opacity with the addition of setting the display property to none on 0 opacity and vica-versa when animating.
Since display: none not only makes elements invisible, but collapses them (width and height are 0 and the element is not part of the layout), I think the opacity property is more suitable for you.
This can also be done with CSS transitions:
#complete {
opacity: 0;
-moz-transition: opacity 0.8s linear;
-o-transition: opacity 0.8s linear;
-webkit-transition: opacity 0.8s linear;
transition: opacity 0.8s linear;
}
#complete.fadedIn {
opacity: 1;
}
And the JavaScript than changes to:
$('#complete').addClass('fadedIn');
For a site I am working on I'd quite like to use a similar drop down effect as here http://shop.jack-hughes.com/ when you click info a hidden div drops down.
I can't work out if it uses only CSS3 or Javascript/CSS can anyone point me in the right direction or tell me the name of the effect; pretty simple I guess but for the life of me can't find another example.
combination of CCS3 and js
Here is what is used in the website you refer
js:
Event.observe(window, 'load', function () {
Event.observe('info', 'click', function () {
$('aside').toggleClassName('open');
});
});
Event.observe is from the prototype framework - http://prototypejs.org/doc/latest/dom/Event/observe/
The equivalent in jQuery(http://jquery.com/) for instance would be:
$(document).ready(function () {
$('.info').click(function () {
$('aside').toggleClass('open');
})
});
css:
aside.open {
height: 21.25em;
}
aside {
position: relative;
background-color: #3f4642;
width: 100%;
color: white;
letter-spacing: 0.1em;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
The HTML element is <aside>....</aside> but it's no difference if you choose div.
They have a small piece of Javascript that does this that can be easily done on any website. Basically you need a hidden div at the top of your page, and upon clicking a link you simply show the div.
The code that they used was:
Event.observe('info', 'click', function(){
$('aside').toggleClassName('open');
});
But if you take a look at jquery then you will see that manipulation of elements is quite easy to do.
One thing that they do use in addition is a CSS3 transition in their open class:
.aside {
transition: all 0.3s ease-out 0s
}
This is what is causing the smooth transition effect. So you can use either jQuery or the CSS3 transition, both give the same effect. I would say that the CSS3 transition is nicer, but then again you will be alienating certain browsers if they do not support transitions.
Probably using jQuery. Something like:
http://api.jquery.com/toggle/
In addition to what Deif discovered they're also using CSS transition
transition: all 0.3s ease-out;
and also make use of the "::selection" pseudo class for their "aside" class, see developer.mozilla.org
I have some pictures and I want to navigate through them by clicking a button in my HTML. I need the effect to occur when the user clicks - I do not want to reload my page. Is there any Javascript or CSS that can help?
I mean by pressing the "Next" button the next image can softly fade into the screen.
If you have a div like this:
<div id="yourDivId" >
<img id="image_1_Id" class="" src="image_1.png" />
<img id="image_2_Id" class="transparent" src="image_2.png" />
</div>
Insert this code to your css file:
#yourDivId img.transparent
{
opacity:0;
}
#yourDivId img
{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
And add this script to your javascript file or html head script:
function btnClicked(){
document.getElementById("image_1_Id").className += "transparent";
document.getElementById("image_2_Id").className = "";
}
Check this site http://css3.bradshawenterprises.com/cfimg/ for more examples!
Try jQuery Cycle. It has a bunch of available transitions and you can set it up with external previous/next controls.
Main plugin page: http://jquery.malsup.com/cycle/
Demo using previous/next links: http://jquery.malsup.com/cycle/int2.html
I was trying to make fade out transition with css3 but found out that display is not working with transitions.
i have a group object <div id=groupID> with <h2> title and <div class='group'> and i have onclick event bind to <h2> that should make group class to dissapear. i've tried to overcome display problem with {opacity: 0; height: 0; overflow: hidden;} This works fine as it has same effect as {display:none} BUT with
CSS
transition: all 2s ;
-webkit-transition: height 2s ease-out;
transition: opacity 2s ease-out ;
display: block;
-webkit-transition: opacity 2s ease-out;
JS
//collapse function
block.setStyle({opacity: 0});
block.setStyle({height: 0});
//expand function
block.setStyle({opacity: 1});
block.setStyle({height: 'auto'});
it doesn't do any animation on close but it fades in on reappearance. It just disappear instantly.
yes i need it in CSS3. NO, i can't use jQuery
any idea?
Thanks
Don't try and transition to and from auto. It won't work.
You may be able to calculate the height in pixels of the element with JavaScript and use that in your block.setStyle() calls.