On my webpage, I have the background image set with CSS, using the HTML selector. The background image is basically like a blueprint schematic background. (i.e. A white grid on a blue background.)
CSS:
html
{
display: block;
position: absolute;
background: url(../assets/background.jpg) repeat;
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
}
When the end user clicks a button, I want the background image mentioned above to slide off the screen, towards the top-right direction, making the page appear to be going to a different area on the large blueprint schematic. I am using jQuery, but I cannot figure out how to access the background image from the CSS.
JavaScript:
$("#button").click(function()
{
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate({left: "-=10000px", top: "-=5000px"}, 1250);
});
I have tried using a div in the body that matches the width and height of the end user's screen, but a thick, white border appears around the blueprint schematic image, so I guess I will have to stick with adding the image through CSS, on the HTML selector.
How do I achieve the effect that I desire?
https://jsfiddle.net/zaevzm5p/
Working Fiddle
Don't animate the complete HTML as it will animate your whole website so I created a div with the background you wanted instead of setting the background of HTML.
HTML
<body>
<div id="div1"></div>
<button id="button">Click Me</button>
</body>
CSS
#div1 {
position: absolute;
background: url(http://www.austintexas.gov/sites/default/files/files/Animal_Services/cute-kitten-playing.jpg) repeat;
top:0; left:0; height:100%; width:100%;
/* I want *only* this background image to move on the button click */
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
z-index:-1;
}
jQuery
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("#div1").animate({
left: "-=10000px",
top: "-=5000px"
}, 1250);
});
I use a div instead of the html itself,try this
solution 1
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("#div1").animate({
left: "-=10000px",
top: "-=5000px"
}, 1250);
});
It can be achieved with CSS transitions too:
Fiddle Example
Less JS, plus CSS
-webkit-transition: 1.25s ease-in-out;
-moz-transition: 1.25s ease-in-out;
-o-transition: 1.25s ease-in-out;
transition: 1.25s ease-in-out;
You could create a div as in void's answer and just animate it's position.
The best and easiest solution would be to use css3 (just google it).
To provide a solution to your original question, you can (if the browser supports it), animate the background position like so:
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate({
'background-position-x': "100px",
'background-position-y': "100px"
}, 1250);
});
But this is not best practice.
Working fiddle
Related
When we expand transition is smooth but when we collapse transition is not good... when its about to collapse I see a shake.
I played with transition but its not working. Can you help me providing my code in the fiddle?
.accordion-section {
border-bottom: solid 1px #000;
}
.accordion-section > h3 {
padding: 6px;
font-size: 16px;
background-color: #CCC;
margin: 0;
}
.accordion-section > .body {
height: 0;
padding: 0 10px;
overflow-y: hidden;
transition: height .5s;
transition: height .5s, padding-top .5s, padding-bottom .5s;
}
You can transition max-height instead of height and enclose the body content with padding, etc inside of the element you're transitioning (added .body-inner in .body). I also added a transition for scale() as it will cause a more "accordion" style collapse, but you can try it without that.
with scale() - http://jsfiddle.net/b4L6kyg4/93/
without - http://jsfiddle.net/b4L6kyg4/94/
Just give the initial div background color green. when the accordion is closing it doesn't have any background so it makes it look as if the div is flickering.
.accordion-section > .body {
background: green;
}
There are a couple of things you can do:
First, accelerate some device's hardware by using -webkit-transform: translate3d(0,0,0); . Second, use the CSS animation property transition timing function. I am not sure which effect you are trying to achieve, but you have "ease" on certain elements. Try experimenting with "ease-out". Third, the CSS transitions you're using may not be aligned perfectly with your elements, so when the transition finished running, the div snaps back to its place. A quick patch for this problem may be animation-fill-mode: forwards; . Your fiddle does not have the actual #keyframes for animation, so it is hard to give you any further advice.
I have two elements, and the top one's visibility is controlled by a v-if on a simple boolean.
transition(name="fade")
#element1(v-if="showFirst")
p Foo
#element2
p Bar
The first element is wrapped in a <transition> tag, exactly as per the Vue documentation.
However, while this does create a fading animation, the rest of the content on the page still jumps very jarringly.
How can I create a transition that will also smoothly transform the position of any and all siblings that follow?
A fiddle demoing this issue.
You need to use a transition-group and key your dynamic div and static div
<transition-group name="fade">
<div v-if="switc" key="dynamic" class="animated">
...
</div>
<div key="main-content" class="animated">
...
</div>
</transition-group>
And use this css classes
.fade-enter,
.fade-leave-active {
opacity: 0;
transform: translateY(-10px);
}
.fade-leave-active {
position: absolute;
}
.animated {
transition: all 0.5s;
/*display: flex;*/
width: 100%;
}
The real trick is to change position to absolute when leaving, then any other content can take correct position.
To know more about how Vue animate things please see this FLIP explanation post
And please see this working fiddle
https://jsfiddle.net/bjfhth7c/4/
Edit
By mistake I did set display: flex; in .animated class, that was causing to every inner element to render in a strange way.
So now, I completely remove .animate class, and instead apply transition: all 0.5s and width:100% to every direct inner element of .wrapper
My final scss looks like this:
.wrapper {
display: flex;
flex-direction: column;
>* {
transition: all 0.5s;
width:100%;
};
}
.fade-enter,
.fade-leave-active {
opacity: 0;
transform: translateY(-10px);
}
.fade-leave-active {
position: absolute;
}
Flex layout is a extend subject, but in short for this particular case flex-direction: column is arranging elements one bellows previous one.
If one of those elements has absolute position will be ignored in flex layout so any other elements will be redistributed on available space.
Please see this guide about flexbox and last working fiddle hope it helps.
You can use a slideDown/slideUp animation instead. For achieve this you don't need to know a height of a sliding element, the principles of max-height transition explained there.
So, as a result it will cause animated moving of elements below target.
Check out my example based on your fiddle.
vue js provides different transition classes, you have to use those properly to smooth the transition, I have tried with your example in this fiddle with some CSS, have a look.
.fade-enter-active, .fade-leave-active {
transition: all .5s;
height: 100px;
opacity: 0.5;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
height: 0px;
opacity: 0;
}
Some details from documentation:
There are six classes applied for enter/leave transitions.
v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
v-enter-to: Only available in versions >=2.1.8. Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes.
v-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
v-leave-to: Only available in versions >=2.1.8. Ending state for leave. Added one frame after a leaving transition is triggered (at the same time 7. v-leave is removed), removed when the transition/animation finishes.
You can as well use CSS animations where you can provide on different phases of transition what will be your css property to make your transitions more smooth, like following and demo fiddle:
.fade-enter-active {
animation: bounce-in .5s;
}
.fade-leave-active {
animation: bounce-out .5s;
}
#keyframes bounce-in {
0% {
height: 5px;
}
30% {
height: 30px;
}
50% {
height: 50px;
}
100% {
height: 100px;
}
}
#keyframes bounce-out {
0% {
height: 90px;
}
50% {
height: 50px;
}
100% {
height: 0px;
}
}
I am working on an image gallery that enlarges the hovered image. I need the images that are not being hovered on to resize and and rearrange themselves so they are visible around the image. I have tried jQuery but I cant figure out how to move the images over and resize them. I am happy to try css or jquery.
$(".picture").hover(function(){
$(this).animate({height: "500px",width: "500px" });
}, function() {
$(this).animate({ height: "200px", width: "200px" });
});
here is a link to the full project on my github
why not just use css, so in class picture,
.picture{
-webkit-transition: all 0.3s;
moz-transition: all 0.3s;
transition: all 0.3s;
//set initial height and width here (this is important)
}
.picture:hover{
height: 500px;
width: 500px;
}
I have a slider, what have an active item which is larger than others. When the controls are clicked, the next/prev item gets the active class. It is working, but I'd like to add a smooth effect for this. Any ideas?
Code:
$('#next').click(function(){
$('#wrap').find('.active').removeClass('active').next().addClass('active');
$('#wrap img:first').remove().appendTo('#wrap');
});
$('#prev').click(function(){
$('#wrap').find('.active').removeClass('active').prev().addClass('active');
$('#wrap img:last').remove().prependTo('#wrap');
});
Example: http://jsfiddle.net/zXjzU/1/
Thanks!
I'm not sure what you define as a "smooth" effect, but a really simple solution given your existing code would be to just add a transition:width 1s to your #wrap img CSS. See JSFiddle:
#wrap img {
width: 100px;
clear: both;
margin: 0 5px 30px 5px;
transition:width 1s;
}
I'm not sure that I'd construct a carousel like this, I'd probably use positions so that my elements scrolled into the center of screen, but it's pretty easy to Google a solution for that too if that's what you're after.
I'm displaying tooltips via pure CSS3 but the only problem I have is that the content of the tooltips has really different lengths. Some of them are just 1 line long, others up to 4 lines.
Now are these tooltips Shadow DOM elements, so how could I get the (different) height of these tooltips via JavaScript (or a pure CSS solution would be better (maybe CSS calc?)) to adjust the margin that all tooltips have the margin from the anchor element?
HTML:
Test #1
Test #2
CSS:
a:before {
content: attr(data-title);
position: absolute;
background: blue;
padding: 7px 10px;
width: 440px;
max-height: 72px;
text-align: left;
line-height: 18px;
margin: 0 0 0 0;
opacity: 0;
color: white;
transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}
a:hover:before {
opacity: 1;
margin-top: -40px;
transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}
Live demo: http://jsfiddle.net/qq3YJ/
This is the jsfiddle solution: http://jsfiddle.net/kwJz9/2/
This is what I did:
Make a relative, so this means that a:before element will have position relative to his parent a.
To place tooltip right under links I used bottom attribute instead of margin-top. Because I used position: relative to link - this means that bottom:0 for example it is when tooltip has it's bottom border right on the bottom border of the parent a.
Because you want to see tooltips under links - in :hover I changed bottom to 1.4em, which is little bit under text (.4em will be distance between them).
Because you want to see it animated I changed transition to include bottom property instead of 'margin-top'.
The last problem was that because you had :before element always in html flow - in case of second tooltip (which is big) - it occupies more space than a, so when you hover it (not the link) - you can see it. So I also added visibility: hidden to :before element to make sure that if mouse will be over it you will not see it.