how to make an image "coming" to foreground - javascript

My goal is to show an image and bring it slowly to the foreground (and extend it in the main time). I wish this can be done when I detect the event onmouseover on a div/img.
Currently, I use the hidden attribute but I dislike it because it's like: appear/vanish, without transitions.
I hope there were a solution with a CSS/CSS3 attribute which will do that. But I found none. I try something with the animate. but it hardly failed.
Do somebody know how to do such of thinqs? I'm using basic html/css/js but I can use bootstrap (if it has a good solution).
Thanks.

You can achieve this with CSS transition and transform. You could use the scale function. Here's something you can play around to get what you want:
http://jsfiddle.net/v2kHU/1/
img{
transition: all 1s;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
}
Edit:
If you want it to be hidden at the beginning then fade in and scale, you could play with the opacity:
http://jsfiddle.net/v2kHU/2/
img{
transition: all 2s;
opacity:0;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
opacity:1;
}

Related

Anime.js How to animate the transition of an element to the center of the page?

There is an element that, when the page is loaded, should smoothly move to the center from the left side of the screen, depending on the resolution of the device. TranslateX parameter: 0, does not accept percent. It is necessary that this be implemented precisely on the Anime.js plugin.
You can simply do it using the transition property in CSS, example:
.example {
transform: ....;
transition: transform 1s ease-in-out;
}
this is the simple use case of this, but you'd have to adapt it to your existing code because you didn't post any for me to drop this into.

How to add a hover delay on a menu for a Volusion site?

First of all, I'm using Volusion. Here's my website: www.gtsimulators.com
So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:
I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.
Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.
I do have access to the main html, css and js files.
I will be glad to provide more information if needed.
Please help. Thanks!
UPDATE:
First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.
Just added this code into my CSS file and it worked perfectly:
.vnav__subnav, .overlay{
transition: opacity 0.2s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
transition-delay: .5s;
}
Again, thanks Adam for the prompt response.
Try something like this
(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)
<style>
a{
color:black;
transition:color 0s;
transition-delay:0;
}
a:hover{
color:red;
transition-delay:0.5s;
}
</style>
Well i wanted to show you generic usage.
You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)
<style>
.vnav__subnav, .overlay{
transition: opacity .5s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
}
</style>
This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)

Hide div when "animate-delay: 1s;" still ongoing and display after the delay

I am using the following CSS file in order to add some animations to my website that I'm building:
http://www.justinaguilar.com/animations/scrolling.html
Its concept is pretty simple - You add class names to your div to have it animated when you get to it when you scroll the page up/down.
I want to add a tweak there, which will add a slight delay between each animation. That way, all the animations in the same line, would appear one by one, and not all by together at the same time.
My idea was to add a class name, for instance: delay-1, and it will add animate-delay: 1s; to it.
Here's a live example of what I want to do. Scroll down and see how "Our Progress" displays each animation with a delay:
http://demo.qodeinteractive.com/river/home-anchors/#home_presentation
Is this something I can do with CSS3 only? whether the answer is yes or no I would be much appreciate any help.
Yes, CSS3 transition will do the trick , i have a demo page set up long time ago. You can refer to it..
As you can see, the first item has a 2s delay and the second item has no delay. Good Luck
#demo:hover {
width: 300px;
transition-delay: 2s
}
#demo1:hover {
width: 300px;
transition-delay: 0s
}
http://jsfiddle.net/zFbkL/
try to define class like this:
.delay-1 {
animation-delay:1s !important;
-webkit-animation-delay:1s !important;
}
no idea if it will work ...but worth trying
..yes ...it will do the job - it worked for me
You would still need to add a class to the section when you scroll to it via Javascript but you can use nth-child() to target each one.
Let's say there's 4 steps you could do:
.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }
Though, with an unknown number of steps you're better off scripting this out I think.
$('.steps .step').each(function(i){
$(this).css('animation-delay', i + 's');
});
Then, set off the animations by adding a class to .steps.
.steps .step { trainsition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }
Hopefully this is what you were aiming for.

Jquery and IE8 animate opacity solution

I am trying to animate opacity with Jquery an it is working fine in every browser except, you guess it dreaded IE8! Problem: on animation I am seeing some ugly artifacts:(
I know that I can solve this by removing background and adding the same background color to my animated div and to my container div,but it is NOT an option in my case. Can somebody suggest solution to this?
My code:
$(document).ready(function() {
$(".img").animate({
opacity: 0
});
$(".glow").click(function() {
$(".img").animate({
opacity: 1
}, 5000);
});
});
By adding IE filters to my CSS I have partially solved this issue (much better now and no black halo).
Lost whole day with this so I hope it will help someone more fortunate than me:)
.img{
display:block;
width:230px;
height:300px;
owerflow:hidden;
position:relative;
outline:none;
/*Notice (ugly) IE filter here and Source to my PNG image */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.robertpeic.com/glow/glow.png) alpha(opacity=0);
background:none;
margin:0px auto;
padding-top:10px;
}
That's what you get when you change opacity of the images with alpha transparency in IE7 and IE8. There is another question about the same IE GIF/PNG Transparency issue with jQuery

Brighten images from dark to light on hover

I'm looking for a script of some sort that will select all images on a page within a certain div.class, apply a transparent black shadowing to it, and then fade it out on hover. Does anyone know of a system of doing this? I can't really modify the site itself (http://cargocollective.com/maureengriswold) or I'd have figured out some shoddy way of doing it already.
Typically you would do this by putting a black background behind your images and the set the opacity of the images to some value < 1.
On your site, you would add the following CSS:
.cardimgcrop {
background-color: black;
border-color: white;
}
.cardimgcrop img {
opacity: 0.7;
}
.cardimgcrop img:hover {
opacity: 1;
}
UPDATE:
If you want an animated fading, you would leave out the :hover CSS definition and add the following Javascript lines (using jQuery 1.4.2 as already used on your site):
$(document).delegate('.cardimgcrop img', 'mouseover', function() {
$(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
$(this).fadeTo(500, 0.7);
});
Of course you could also native CSS transitions instead for this effect (as suggested in Howard's answer), but you would need to take care of browser capabilities.
Not entirely sure what you mean by transparent black shadowing, but I think you mean an effect like a veil over it, which lifts on hover and returns on mouseout?
You can probably achieve this effect entirely using css. Something like this:
DIV.myClass{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(0,0,0,0.6);
}
DIV.myClass:hover{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(255,255,255,1);
You'll want to play around with the exact CSS to achieve the effect you want, and also you'll want to test in various browsers as CSS transition support is not 100%.
You can read more on CSS Transitions at the MDN documentation site.
CSS filters are another option http://html5-demos.appspot.com/static/css/filters/index.html

Categories

Resources