Is it possible to add a duration of a css change so that when I change the left, top, width and height of a div this could be animated?
In the jQuery code I want to animate the duration of the css properties.
Thanks a lot if you could help me, Its appreciated!
My code
HTML:
<div id="slideshow">
<img class="image1" src="images/car1.jpg"></img>
<img class="image2" src="images/car2.jpg"></img>
<img class="image3" src="images/car3.jpg"></img>
<img class="image4" src="images/car4.jpg"></img>
<img class="image5" src="images/car5.jpg"></img>
</div>
CSS:
#slideshowshadow{
background: yellow;
border-radius: 100px;
width: 700px;
height: 500px;
position: absolute;
opacity: 0.2;
margin: 50px 50px;
box-shadow: 0px 0px 100px 15px yellow;
-moz-box-shadow: 0px 0px 100px 15px rgba yellow;
-webkit-box-shadow: 0px 0px 100px 15px yellow;
}
#slideshow{
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
}
#slideshow img{
color: white;
}
.image2, .image3, .image4, .image5{
position: absolute;
width: 300px;
height: 200px;
}
.image1{
position: absolute;
width: 350px;
height: 250px;
top: 175px;
left: 225px;
z-index: 2;
}
.image2{
top: 0px;
left: 250px;
z-index: 1;
}
.image3{
top: 200px;
left: 500px;
z-index: 1;
}
.image4{
top: 400px;
left: 250px;
z-index: 1;
}
.image5{
top: 200px;
left: 0px;
z-index: 1;
}
JQUERY (This is where the magic happens :p):
$(".image2").click(function(){
$(".image1").css("top", "0px");
$(".image1").css("left", "250px");
$(".image1").css("width", "300px");
$(".image1").css("height", "200px");
$(".image1").css("z-index", "1");
//middle
$(".image2").css("top", "175px");
$(".image2").css("left", "225px");
$(".image2").css("width", "350px");
$(".image2").css("height", "250px");
$(".image2").css("z-index", "2");
$(".image3").css("top", "200px");
$(".image3").css("left", "500px");
$(".image3").css("width", "300px");
$(".image3").css("height", "200px");
$(".image3").css("z-index", "1");
$(".image4").css("top", "400px");
$(".image4").css("left", "250px");
$(".image4").css("width", "300px");
$(".image4").css("height", "200px");
$(".image4").css("z-index", "1");
$(".image5").css("top", "200px");
$(".image5").css("left", "0px");
$(".image5").css("width", "300px");
$(".image5").css("height", "200px");
$(".image5").css("z-index", "1");
});
You should either use animate where 5000 is the time in milliseconds.
$( ".image5" ).animate({
opacity: 0.25,
left: "+=50",
height: "25px"
// css goes here, last one should not have comma
}, 5000, function() {
// Animation complete.
});
Or to use CSS animations, set the CSS transition time via jQuery:
var time = 5000
$('.image5').css({
'webkitTransition': 'all ' + time + 's ',
'mozTransition': 'all ' + time + 's ',
'msTransition': 'all ' + time + 's ',
'oTransition': 'all ' + time + 's ',
'transition': 'all ' + time + 's '
});
Perhaps you looking for:
transition-duration
see: http://css-tricks.com/almanac/properties/t/transition-duration/ for further details
Related
css
.head {
width: 100%;
left: 0px;
top: 0px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height > 0) {
console.log("no 0");
$("#tt-body-index .head").animate(
{
marginTop: 0,
},
1000,
"swing"
);
} else if (height === 0) {
console.log("0");
$("#tt-body-index .head").animate(
{
marginTop: -76,
},
1000,
"swing"
);
}
});
I'm writing a script using jQuery.
When scrolling starts .head appears and tries to make scrollTop 0 disappear.
.head appearing is good, but when scrollTop is zero, it doesn't become marginTop: -76.
Use CSS transitions and animation whenever possible which is more smooth compared to jquery animations, this can be done using css transition check the below code. Also, one thing you need to trigger scroll on page load in case if the browser scrolls the page to some part from the cache.
CSS
.head {
width: 100%;
left: 0px;
top: -80px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
background-color: aqua;
transition: top 1s;
}
body.showHeader .head{
top: 0px;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height < 76) {
$('body').removeClass('showHeader')
} else {
$('body').addClass('showHeader')
}
}).scroll();
I am trying to rotate background image while scrolling. The effect should look like cube. Sadly I could not find a way with css and jquery to make it look like in the video. On the gif, when scrolling down from gallery to next page, there is grill background which rotates and stretches by amount of page shown.
EDIT: Rotating animation has to look like this
What have I tried so far (unsuccessfully)
$(function() {
var rotation = 0,
scrollLoc = 0;
$(window).scroll(function() {
$("#galerie").text($(document).scrollTop() + "=ScrollTop,WinHeight=" + $(window).height());
var newLoc = $(document).scrollTop();
var diff = scrollLoc - newLoc;
rotation += diff, scrollLoc = newLoc;
var rotationStr = "rotateX(" + rotation / ($(window).height() * 2) + "turn)";
$("#home").css({
"-webkit-transform": rotationStr,
"-moz-transform": rotationStr,
"transform": rotationStr,
"background-size": -rotation
});
});
})
body,
html {
height: 100%;
}
body {
background-color: #090909;
}
#home {
height: 100%;
position: relative;
overflow: hidden;
}
#galerie {
color: green;
}
#home:before {
content: "";
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center bottom;
background-color: grey;
background-attachment: initial;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id=box>
<div id="home">
TestText
</div>
</div>
<div id="galerie">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="gale">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
I've made the top part for you. And I'm sure you'll make the bottom one yourself (see the snippet in the Full page mode):
$(function() {
$(window).scroll(function() {
$('#home_bg').css({
'transform': 'rotateX(' + 30 * (1 + Math.PI * Math.atan($(document).scrollTop() / 300)) + 'deg)'
});
});
})
html,
body {
height: 100%; margin:0 ;padding:0
}
body {
background-color: #333;
}
#home {
height: 30vh;
position: relative;
overflow: hidden;
perspective: 300px;
color:#fff;
text-align:center;
}
#home_bg {
content: "";
background: repeating-linear-gradient(45deg, #555, #555 2px, transparent 0, transparent 60px), repeating-linear-gradient(-45deg, #555, #555 2px, transparent 0, transparent 60px) 30px 30px / 170px 170px;
position: absolute;
z-index: -1;
top: -100%;
left: -50%;
width: 200%;
height: 200%;
transform: rotateX(30deg);
transform-origin: 50% 100%;
}
#galerie {
color: green;
display: flex;
justify-content: center;
flex-flow: row wrap;
width: 50%;
margin: 0 auto 70vh;
}
#galerie img {
width: 45%;
margin: 0 auto 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="home">
<h1>Lorem ipsum?</h1>
<div id="home_bg"></div>
</div>
<div id="galerie">
<p></p>
<img src="https://picsum.photos/100/100?1">
<img src="https://picsum.photos/100/100?2">
<img src="https://picsum.photos/100/100?3">
<img src="https://picsum.photos/100/100?4">
<img src="https://picsum.photos/100/100?5">
<img src="https://picsum.photos/100/100?6">
</div>
</body>
Hope you want like this.
$(function() {
var rotation = 0;
var interval;
var gear = $('.gear');
function animate() {
gear.css('transform', 'rotate('+rotation+'deg)');
rotation += 10;
rotation %= 360;
}
function startAnim() {
if (!interval) {
interval = setInterval(animate, 50);
}
}
function stopAnim() {
clearInterval(interval);
interval = null;
}
$(document).scroll(startAnim).mouseup(stopAnim);
});
body{
height: 1000px;
}
.gear{
background: url("https://cdn.pixabay.com/photo/2016/01/03/11/24/gear-1119298_960_720.png") no-repeat;
width: 100%;
height: 100px;
position: fixed;
background-position: center center;
background-size: contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gear"></div>
I am making a slideshow and am having some trouble with the javascript.
When I click right once it works all good and then if I hit left it works too but then if I click on right again it should just go to the next image but it skips it and goes to the following. Anyone knows the solution?
$('#droite').click(function() {
if (photo == 4) {} else {
$('#plateau-gallerie').animate({
left: (-300 * photo) + 'px'
}, 500);
photo++;
}
});
$('#gauche').click(function() {
if (photo == 1) {} else {
$('#plateau-gallerie').animate({
left: (-300 * (photo - 2)) + 'px'
}, 500);
photo--;
}
});
#gallerie {
width: 60vw;
height: 300px;
background-color: #a9a9a9;
border-radius: 10px;
border: 3px solid #999;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#plateau-gallerie {
width: 1780px;
float: left;
top: 50px;
position: absolute;
}
#gallerie img {
height: 200px;
margin: 0 0px 0 80px;
float: left;
}
.bouton {
position: absolute;
height: 100px;
width: 60px;
top: 100px;
background-color: #444;
opacity: 0.7;
cursor: pointer;
z-index: 99;
font-size: 3em;
}
.bouton:hover {
background-color: #222;
}
#gauche{
left:15px;
}
#droite{
right:15px;
}
<section id="gallerie">
<button class="bouton" id="gauche"><</button>
<section id="plateau-gallerie">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
</section>
<button class="bouton" id="droite">></button>
</section>
Anyone got an idea on why this is?
I have change the script, change the logic of slide left and right
Change the image width to 300px, and align it to center
#gallerie img {
height: 200px;
float: left;
width:300px;
text-align: center;
}
Here is the js fiddle https://jsfiddle.net/bqg2aheh/
$('#left').click(function() {
if (!(photo < 0)) {
photo--;
$('#plateau-gallerie').animate({
left: (-300 * (photo)) + 'px'
}, 500);
console.log(photo + ' ' + (-300 * photo));
}
});
$('#right').click(function() {
if (!(photo > 5)) {
photo++;
$('#plateau-gallerie').animate({
left: (-300 * photo) + 'px'
}, 500);
console.log(photo + ' ' + (-300 * photo));
}
});
please ignore the style
I am not able to reproduce the behavior you are describing. I've created a fiddle (fiddle id eozpp6vo) with your code and the gallery seems to be working as expected.
I have a strange issue that only affects Firefox.
In my dev website, I have this jQuery code:
jQuery('body').on('click', '.sidebar-toggle', function(e){
if (sidebarStatus == "OFF") {
jQuery('.panel-sidebar').animate({
marginLeft: "0px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "200px",
width: '-=200px',
'padding-right' : 0
}, 400);
setTimeout(function(){
jQuery('.products-listing-contents').css("width","calc(100% - 200px)");
}, 420);
sidebarStatus = "ON";
}
else {
jQuery('.panel-sidebar').animate({
marginLeft: "-184px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "15px",
width: '100%',
'padding-right' : "15px"
}, 400);
sidebarStatus = "OFF";
}
setCookie('sidebarStatus', sidebarStatus, 9999999);
});
What it basically does is pushing a left sidebar to the left and right while adjusting the content width that appears to the left of it.
It works fine in IE11 and Chrome, but in FF the content area jumps to the bottom and back up whenever I click the slide toggle.
I have been trying to adjust the numbers, but that doesn't help. Any help would be greatly appreciated. Thank you.
I had issues with setTimeout in FF before. In your case try to avoid using setTimeout and it might just work.
You don't have to call a setTimeout to invoke something after the Animation ends. There is a built in callback for that. You can write a callback function with a comma after the timedelay. Check if that helps. Even if it doesn't help with your problem doing like given below is definitely better practice than using an async like setTimeout.
Like this:
if (sidebarStatus == "OFF") {
jQuery('.panel-sidebar').animate({
marginLeft: "0px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "200px",
width: '-=200px',
'padding-right' : 0
}, 400, function(){
jQuery('.products-listing-contents').css("width","calc(100% - 200px)");
});
sidebarStatus = "ON";
}
Use css transitions. Much easier and cleaner than using jQuery.
$("#sidebar-container").on("click", function () {
$(this).toggleClass('maximized-sidebar-container');
$("#content-container").toggleClass('minimized-content-container');
});
#application-container {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow: auto;
}
#sidebar-container {
position: absolute;
left: -160px;
width: 170px;
height:400px;
background-color: #0F0;
overflow: hidden;
transition: 350ms left ease-out;
z-index: 3;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.maximized-sidebar-container {
left: 0px !important;
}
#content-container {
position: absolute;
right: 0px;
left: 10px;
height: 400px;
background-color: #808080;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
transition: 350ms left ease-out;
z-index: 0;
}
.minimized-content-container {
left: 170px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="application-container">
<div id="sidebar-container"></div>
<div id="content-container">Content</div>
</div>
What happens is, when you click on Img2, it does the animation, but afterwards Img3 just snaps to the left of Img1! I don't know why.
$(document).ready(function() {
$(document).on('click', '.left', function() {
$idr = $('.right').attr("id")
$idl = $('.left').attr("id")
$idt = $('.top').attr("id")
$('#' + $idl).animate({
'margin-top': '0',
'width': '500'
}, 650, function() {
$('#' + $idl).removeClass('left').addClass('top')
})
$('#' + $idt).animate({
'margin-left': '253',
'margin-top': '358',
'width': '247'
}, 650, function() {
$('#' + $idt).removeClass('top').addClass('right')
})
$('#' + $idr).animate({
'margin-left': '0'
}, 650, function() {
$('#' + $idr).removeClass('right').addClass('left')
})
})
})
#img1 {
position: absolute;
width: 500px;
height: auto;
}
.left,
.right {
position: absolute;
height: auto;
margin-top: 1px;
cursor: pointer;
}
#img2 {
margin-top: 358px;
width: 247px;
}
#img3 {
margin-top: 358px;
margin-left: 253px;
width: 247px;
}
#slider {
width: 504px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<img id="img1" class="top" draggable="false" src="http://s9.postimg.org/ygz34rwv3/pr1.jpg">
<img id="img2" class="left" draggable="false" src="http://s9.postimg.org/c2heoju3j/pr2.jpg">
<img id="img3" class="right" draggable="false" src="http://s9.postimg.org/rch9vqplr/pr3.jpg">
</div>
It happens because top image is not absolutely positioned so after animation it occupies space. You can fix it by adding position property to the .top class:
.top, .left, .right {
position: absolute;
height: auto;
margin-top: 1px;
cursor: pointer;
}
Demo: http://jsfiddle.net/z3neveug/2/
Here is one more version of the same with a little refactored javascript code.
Add display:inline; to your .left, .right pseudo-classes.
Also, add this rule:
.left {
left:0
}
Demo: http://jsfiddle.net/t6u6h6x9/1/