I want to do this effect in my image (button)
http://osc4.template-help.com/wt_32608/index.html#
I want to make this animation whatever the method CSS3, HTML5 canvas , JS
If I will use Hover property , how can I make the image slide and back when roolout
First, make a < div > that will contain the animation.
<div id="image_holder"></div>
Then, place the < img > inside.
<div id="image_holder_1" class="image_holder">
<img id="image_1" class="image" ..... />
</div>
Next, add some CSS styling to the < div > like so:
.image_holder {
overflow: hidden;
}
And also some CSS to the < img >:
.image {
position: relative;
}
Now, animate the image with jQuery. Specifically, you will be animating the "top" CSS attribute for the image:
$('#image_holder_1').hover( function() {
$('#image_1').animate({
top: '-' + $(this).height() + 'px'
});
}, function() {
$('#image_1').animate({
top: '0px'
});
});
See it in action here: http://jsfiddle.net/trusktr/7hTDu/
Alternatively, you can do it with CSS3 animations. Do a search for "CSS3 transitions" on google: http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions
something like this.
$(".items").each(function() {
$(this).mouseover(function(){
$(this).find(".inner").slideDown();
});
$(this).mouseout(function(){
$(this).find("inner").slideUp();
});
});
but it would be better if you give us some code of your html struct, and something aboute your idea.
The easiest way is probably to position the images absolutely and then manipulate the top, something like this:
<img id="myimage" style="position: absolute" src="whatever"/>
<script>
$('#myimage').animate({top: '<whatever>px' },someDuration);
</script>
Read the jQuery animate docs here: http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=jquery+animate
It should not be that hard to figure out :)
If just an animated background to a button you want, why not use background-image and animate the background-position with jQuery?
Related
I have two images, what I want to happen is that when I hover on the image, the image will change to the second image, and then when I hover on the image again, the image will change to the first image.
How do I do that using JavaScript?
This is a Javascript solution. I highly suggest you look into Jquery once you understand the below. In your case you don't seems to need the onmouseout.
HTML
<img src="urImg.png" onmouseover="chgImg(this)" onmouseout="normalImg(this)">
Javascript
function chgImg(x) {
x.src = "newImg.png";
}
function normalImg(x) {
x.src = "urImg.png";
}
HTML
<div class="image_container">
<img src="foo.png" class="first"/>
<img src="bar.png" class="last"/>
</div>
jQuery
$(".image_container").hover(function(){
$(this).toggleClass("switch");
});
CSS
.image_container .last{display:none;}
.image_container.switch .last{display:block;}
.image_container.switch .first{display:none;}
You can do this!
<a href="#" id="name">
<img title="Hello" src="images/view2.jpg>
</a>
$('#name img').hover(function() {
$(this).attr('src', 'images/view1.jpg');
}, function() {
$(this).attr('src', 'images/view2.jpg');
});
For anyone who do not want to use Javascript, just HTML, CSS.
You just need create second image with position: absolute; and put it with original image into a div (with position: relative;)
After that, you can use CSS to control opacity of second image when you hover it.
Below is my sample code using TailwindCSS
<div className="relative">
<img
src="/image1.png"
className="w-[100px] h-[100px]"/>
<img
src="/image1.png"
className="w-[100px] h-[100px] absolute opacity-[0] hover:opacity-[1]"/>
</div>
How can I make my inline styled div to change it background image url after 5 second?
Example:
<div class="foobar" style=" background:(url'red.png')"> </div>
After 5 seconds, it need to be:
<div class="foobar" style=" background:(url'blue.png')"> </div>
and After 5 seconds, it need be:
<div class="foobar" style=" background:(url'yellow.png')"> </div>
So, It can cycle 3 images in this foobar, Red, Blue and Yellow background images.
Here is what I tried so far: Working fiddle
You have to use setInterval() instead :
setInterval(nextBackground, 5000);
If you want smooth fade in use the fadeIn() function :
imagrep.hide().fadeIn();
NOTE : fadeIn() works only on hidden elements that why we have to hide the element first.
Hope this helps.
$(function() {
var imagrep = $('.foobar');
var backgrounds = ['url(http://images.huffingtonpost.com/2016-03-02-1456944747-2376497-naturehike.jpg)', 'url(http://www.mindful.org/wp-content/uploads/2016/03/nature.jpg','url(http://www.planwallpaper.com/static/images/3d-nature-wallpaper1.jpg)'];
var current = 0;
function nextBackground() {
imagrep.css('background',backgrounds[current]);
imagrep.hide().fadeIn();
if(current==backgrounds.length-1)
current=0;
else
current++;
}
setInterval(nextBackground,2000);
});
.foobar {
height: 400px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foobar" style="background:url(http://www.planwallpaper.com/static/images/3d-nature-wallpaper1.jpg);">
</div>
You can't animate the background-image (or background with an image) property, but you can get a similar effect like this :
imagrep.animate({opacity: 0}, 'slow', function() {
imagrep.css({'background-image': backgrounds[current = ++current % backgrounds.length]}).animate({opacity: 1});
});
This animate the opacity to 0, then change the image, and finally animate the opacity to 1.
Here is a jsfiddle: http://jsfiddle.net/m61u51xt/3/
The best way is to use jquery Cycle plugin.
You can download it from
http://jquery.malsup.com/cycle/
It's open source and easy to impliment and in addition you can add various effect like fadein, zoom and suffle etc.
I would like to "close" a modal window. It's a wordpress template and it's ugly...
I have a div :
<div class="modal">
<section style="position:relative;z-index:10;">
<div style="margin-bottom: -50px; margin-right: 50px; text-align: right;">
<img src="./wp-content/img.png" alt="Close">
</div>
<p><img src="./wp-content/img2.png" alt="test"></p>
</section>
</div>
And when the img with alt="Close" is clicked, I would like to close or set the opacity of all the div.modal at 0. Is it possible with JS?
jQuery
$('img[alt*=Close]').click(function() {
$('.modal').hide();
});
JS
var img = document.querySelector('img[alt*=Close]'),
modal = document.querySelector('.modal');
img.addEventListener('click', function() {
modal.style.display = 'none';
});
when the img with alt="Close" is clicked, I would like to close or set the opacity of all the div.modal at 0.
Absolutely!
First i want to mention that there is some attribute selectors which are now officially available in css3, so that can be used as a jQuery selector like:
$('body').on('click', 'img[alt="Close"]', function(e){
$(this).closest('.modal').fadeOut(); // to fade out the entire div.
// $(this).closest('.modal').hide(); // hide will hide the modal
});
If your modal is dynamically created then you have to follow the technique of event delegation, which has the syntax like:
$(staticParent).on(event, selector, callback);
Yep! Just set thee css property opacity
$(".modal").css({ opacity: 0.5 });
You can listen for click events on the img div with:
document.querySelector("img[alt=Close]").addEventListener("click", yourHandler);
However, accessing an image using its alt attributes looks like a terrible idea. alt is to display infotip and accessibility message for the user, not to identify a DOM element.
It would much better if you can give this image an id or a class:
document.getElementById("yourImgId").addEventListener("click", yourHandler);
Then:
var modal = document.querySelector(".modal");
function yourHandler(){
modal.style.opacity = 0;
}
or
function yourHandler(){
modal.style.display = "none";
}
A last solution can be to define the style properties in a stylesheet like:
.modal.disabled {
display: none;
}
And then add the class to modal to disable it.
function yourHandler(){
modal.classList.add("disabled");
}
This last solution is more flexible and easier to maintain as it separates the logic to the style.
I am working on a responsive template.
I have pages with images and I want them to look like this : http://www.chanel.com/fr_FR/
I can't figure out a css way to achieve it so I am trying jquery although I ain't the best jquery coder...
This is what I end up with :
html
<html>
<body>
<div class="text" >
<p>some text</p>
<div>
<div class="image" >
<img class="adapt" src="my-image.jpeg" alt="my image">
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
function imageResize() {
var wrapH = $('div.image').height();
var imgH = $('img.adapt').height();
var wrapW = $('div.image').width();
var imgW = $('img.adapt').width();
$("img.adapt").css("height", (wrapH < imgH) ? wrapH : "auto");
$("img.adapt").css("width", (wrapW < imgW) ? wrapW : "auto");
}
imageResize();
$(window).bind("resize", function(){
imageResize();
});
});
</script>
css
div.text {
position : absolute;
width : 40%
left : 0;
top : 0;
}
div.image{
position: absolute;
top : 0;
right : 0;
left : 40%;
width : 60%;
bottom : 150px;
}
This seems to work when I enlarge the browser but when I make it smaler, the image flickers and its ugly...
If some pro jquery coder can explain this problem to me, I would be very graitfull.
If you download Google Chrome, browser to that page again, and look under the resources tab in developer tools, view the author's styles.css file. Around line 800 and lower, you will see that the author is using media queries to get that responsive feel that you are looking for. The author is also taking advantage of percentages to design width, height, margin and padding of elements and various items. No need for jQuery just yet. Simply dive into the world of media queries first to get a feel for true responsive design. Then when you become comfortable, go ahead and apply some creative animations via jQuery to spice things up.
i have read several posts on this but none seems to solve my issue,
when I fadeout a gallery, the other fades in, that works fine...but the item that fades in seems to 'refresh' or fade in again (real quick) after the fadein animation completed, here's my code:
what I have is basically a photo gallery (photographySection) contained inside a 'mediaContainer', this is the css:
.mediaContainer {
position: relative;
}
.photographySection {
top: 10px;
left:0;
position: absolute;
}
html:
<div class='mediaContainer'>
<div class='photographySection hidden' id='photographyExperimental'>
<ul><li><img src...></li></ul>
</div>
<div class='photographySection hidden' id='photographyFaces'>
<ul><li><img src...></li></ul>
</div>
</div>
js:
$(".photographyMenu").click(function(event){
$(".photographySection").hide(1,function() { // hide all sections
var section = $(event.target).attr("section"); // read new section to show
$("#"+section).fadeIn(500); // for example $("#photographyFaces")
});
});
everything works smoothly, but sometimes after the chosen div fades in, it flickers/blinks once for some reason
thanks!
Do you really need all that markup for such a simple task? If all you want is just fade a bunch of images in and out, you could do something like this:
html markup:
<div class="mediaContainer">
<img src="" />
<img src="" />
<img src="" />
</div>
jQuery:
function fadeInOut(){
var imgs = $('.mediaContainer > img');
imgs.wrapAll('<div class="slideshow" />');
$('.slideshow > img:gt(0)').hide();
setInterval(function(){
$('.slideshow > img:first')
.fadeOut(500)
.next('img')
.fadeIn(500)
.end()
.appendTo('.slideshow');
}, 5000);
}
Maybe someone more experienced can improve upon this code. You can also set vars to those "magic numbers" (500/5000) and some other things, but that should solve the problem with much less code (just an option).
Just don't use the 500, and it will work smoother, slow is 600miliseconds and normal is 400miliseconds
You can try this one: http://jsfiddle.net/S4sbm/
$(".photographySection:gt(0)").hide();
$(".photographyMenu").click(function(event){
$(".photographySection").fadeOut(500);
var section = $(event.target).attr("section"); // read new section to show
$("#"+section+':hidden').fadeIn(500); // for example $("#photographyFaces")
});
checkout the fiddle and see if this helps.