JS,CSS,jQuery DIV 3D effect - javascript

I'm looking for one specific effect but I'm not sure what's it called or how should I search for it.
Basically, I'm after a 3D effect.
I have a DIV element, I'd like it to behave like it's placed on a ball (which is located below the center of it).
So when you mouse over the edges that edge will zoom out/in.
Has anyone seen anything like it? Is this achievable at all?
Edit:
Behaviour in this example best describes what I was after but with DIVs not text.
I think I'll be able to adjust this example for my needs.
Sorry if my description was too general, I wasn't sure how to describe what I needed.

You can use CSS Transition for this.
with css transition you can animate divs or objects.
Look at this great tutorial
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
an example:
JSFIDDLE
<body>
<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
<div class="box"></div>
</body>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
Hope it is what you mean.

Related

add transparency on hover on a div but with time delay

I want my div to become partially transparent 1 second after I hover cursor on it. When no longer hovering I want it to return to its default full opacity immediately without any time delay.
I know very very javascript so I don't know how to do this.
Any help much appreciated thanks in advance
Actually, you shouldn't use js in this case. CSS Transitions would be better, cause they are smoother and more efficient than js/jQuery animations.
Below you have example with 2 seconds delay on hover.
.btn{
display: inline-block;
padding: 5px 10px;
background: rgba(0,0,0,1);
color: #fff;
text-decoration: none;
-webkit-transition: background 0.5s ease 0s;
transition: background 0.5s ease 0s;
}
.btn:hover{
-webkit-transition: background 0.5s ease 2s;
transition: background 0.5s ease 2s;
background: rgba(0,0,0,0.5);
}
Text

What causes div elements to move when hovering over one element?

So basically I float all my div elements (icons) to the left and margin left them to create space In between them and I display them inline. The problem I have now is that whenever I hover over one element(icon) the rest of the elements moves. Please can you explain what causes this, thanks a lot. Examples will be gladly appreciated.
css:
.facebookIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-facebook-circled:hover{
color: #3b5998;
font-size: 90px;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.twitterIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-twitter-circled:hover {
font-size: 90px;
color: #00aced;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.contactContent{
position: relative;
height: auto;
width:100%;
background: #b7d84b;
opacity: 0.8;
overflow:auto;
padding: 20px 20px;
}
html:
<section id = "contactContent" class="contactContent">
<div>
<i class="icon-gplus-circled gplusIc"></i>
<i class="icon-facebook-circled facebookIc"></i>
<i class="icon-mail-circled mailIc"></i>
<i class="icon-twitter-circled twitterIc"></i>
<i class="icon-soundcloud-circled soundcloudIc"></i>
</div>
</section>
There could be a number of factors, the most obvious would be in your CSS having a :hover set on the element to increase a font-size or change something which would affect its position or size.
We would need to see code to be sure and verify thats the problem.
EDIT
So looking through your code, i can see one major flaw. As i guessed the :hover was affecting the placement.
Your setting the font-size to be 80px and then on the hover, upping that to be 90px. That will then increase the size the container needs to be. Unless you set a max-height/width on the element or set the overflow to hidden it will always increase in size when you modify something that will increase in size, even by a single pixel.
Its hard to try and amend the code for you without seeing the full code (the piece you added was only a snippet) and also needing to know how it looks.
If you could get it into a jsFiddle then i could try fix it up but its best to learn yourself where your going wrong and then how to fix it yourself.
Hope this all makes sense to you.
Your elements are most likely wired up with a mouse over effect that changes the border around each element. Hovering over the element will change the dimensions of the element. Since they are all floated they will move around as best they could to accommodate the altered element.

AngularJS ng-show animation cross-fade inside ng-repeat

Simple (but not for me!) angularjs show/hide animation problem.
I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".
First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/
The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?
The HTML:
<div>
<div data-ng-repeat="k in kitties" >
<img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
</div>
</div>
CSS:
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
.animate-hide.animate-hide-active {
opacity:0;
}
I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.
Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.
FYI - this is using angular 1.1.5
Thank you!!! Adam
You actually have it all correct! You're just missing a little CSS.
I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.
The bulk of the new stuff is:
.container{
position: relative;
/* you have to add a height here if your container isn't otherwise set
becuse the absolutely positioned image divs won't calculate the height
for you */
height: 100px;
}
.image-repeat{
position: absolute;
top: 0;
left: 0;
}
With the classes applied in your HTML as needed.
Check it out: http://jsfiddle.net/QErPe/2/
Hope that helps!
This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.
You can also do plain CSS3 on the .ng-hide class. For example:
div img {
border: medium none;
margin: 0;
padding: 0;
opacity: 1;
-webkit-transition: opacity 1s ease 0s;
-moz-transition: opacity 1s ease 0s;
-o-transition: opacity 1s ease 0s;
transition: opacity 1s ease 0s;
}
div img.ng-hide {
opacity: 0;
}
So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.

How to position a div relatively to the parent node while doing a rotation transition?

Here is my problem
Fiddle
I have 4 divs, that are in position:absolute and their position is defined depending on their ids.
When the user clicks on a div, the div makes a transition in rotation and scaling.
My goal is to position the resulting div (yellow) at a very particular place: in the center of the parent node.
Right now in my Fiddle, it does rotate on itself which is not what I want.
What I tried among other things;
add to my transform transform:translate(x,y), but this is relative
to the div before it was clicked, which means each div will send the
transformed div to another position.
add left:5%;top:5%; in the hope that it would work, but it does
not.
add a transform-origin but again, it is relative to the div itself
and not the parent or body
My question: is it possible to define the position of a div during a transition with respect to the parent node instead of itself ?
The reason your top and left override wasn't working is because ID selectors are more specific than class selectors, and therefore take precedence. You can fix this using !important:
.isTurning{
background-color:yellow;
z-index:1;
-webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
-webkit-transform: scale(2) rotateY(180deg);
left:27% !important;
top: 25% !important;
}
or using specificity:
#b_1.isTurning, #b_2.isTurning, #b_3.isTurning, #b_4.isTurning{
background-color:yellow;
z-index:1;
-webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
-webkit-transform: scale(2) rotateY(180deg);
left:27%;
top: 25%;
}​
Here is a demonstration: http://jsfiddle.net/Fs6Zw/
I removed the flipping effect that you didn't want.
I added position:relative on parent. So now when you position: absolute the children, they are positioned based on the parent.
And I placed the yellow squares in the center by doing this :
top:50% !important;
left:50% !important;
margin-top: -75px;
margin-left: -75px;
Forgot to include the link : http://jsfiddle.net/hZfhQ/2/

CSS3 transition fade-out display property

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.

Categories