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
Related
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>
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/
The following code snippet shows how I made popups with CSS and JS. Is there any chance to let it fade when opening/closing it, without changing the way I used to work, I mean just popping up the box by changing its display style?
function lightbox_open(){
window.scrollTo(100,500);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
You could use either use jQuery to do the fading $().fadeIn() or use CSS3 animations if you want to stick to bare JS. In the latter case, set the opacity to 0 by default and change it to 1 via Javascript. You need to add this to your stylesheet:
selector {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
You can use jquery fadein() on open and fadeout() on close, but if you want to do it with pure javascript, i recommend reading this source code. they did it it wonderfully.
You can use jQuery:
.fadeIn()
function lightbox_open(){
window.scrollTo(100,500);
$('#light,#fade').fadeIn();
}
.fadeOut()
function lightbox_close(){
$('#light,#fade').fadeOut();
}
I have a website, and a slideshow of pictures on the main page. Before a photo is removed, I write the next photo behind it and then remove it. I wanted to know how I can add a fading effect before the photo is removed. my website is: guyzyl.org, so you can check out what im talking about. Also I dont know how to use Jquery, so please dont offer that solution. Thanks for any help. Guy Z.
.photo{
-webkit-transition: opacity .5s ease-in-out; /*Webkit*/
-moz-transition: opacity .5s ease-in-out; /*Firefox*/
-o-transition: opacity .5s ease-in-out; /*Opera*/
transition: opacity .5s ease-in-out; /*CSS3 Standard*/
opacity: 1;
}
.photo.fade{
opacity: 0;
}
document.querySelector(".photo").classList.add("fade");
See Demo: http://jsfiddle.net/DerekL/jzLZZ/
I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!
CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.