I'm using the below; but the margin isn't nearly as approximate as text-align:center; is there anyway I could toggle text-align: center; to occur with a animation transition until it gets to the point of text-align: center; similar to that which is achieved with the below.
if ($(".resource-section").hasClass("resource-section--expanded")) {
$(".resources__header h2").animate({"marginLeft": "40%"}, "slow");
}
You can use a centering technique that allows you to horizontally center any element.
It can be animated using only CSS
.test {
position: absolute;
transform: translateX(0%);
left: 0%;
animation: center 2s infinite;
}
#keyframes center {
0%, 10% {
transform: translateX(0%);
left: 0%;
}
90%, 100% {
transform: translateX(-50%);
left: 50%;
}
}
<h1 class="test">TEST</h1>
You could animate center align using margin-left like this
var h1 = $('h1').width();
var parent = $('.container').width();
$('h1').animate({'margin-left':(parent/2-h1/2)}, 1500);
.container {
border: 1px solid black;
height: 100px;
}
h1 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Text</h1>
</div>
From what i understood if you want to use the text-align:center property something like this could be of help to you, but the text-align property can't be animated
$(function(){
$('.resources_header h2').click(function(){
$(this).toggleClass('align-center');
});
});
.align-center{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>
A problem with this is the animation so if what you want to achieve is to animate from left to center then why not:
$(function(){
$('.resources_header h2').click(function(){
var windowHalfWidth = $(window).width()/2;
$(this).css('position','absolute');
var elemHalfWidth = $(this).width()/2;
var left = windowHalfWidth - elemHalfWidth;
$(this).animate({
marginLeft: left
},"slow",function(){
$(this).css('position','static');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>
Related
I have been trying to figure out how to rotate a div based off of my scrolling. I have a codepen that demonstrates the behaviour that I would like to achieve.
However, I do not know hot to make it work with scrolling. Essentially, I would like to scroll down and have the word Data move in a counter-clockwise rotation. And if I decide to scroll up and down it should move with the speed of the scroll. I only want it to move 90deg up or down.
Thanks!
var btn = document.querySelector('.button');
var btnUp = document.querySelector('.button-up')
btnUp.addEventListener('click', function() {
document.querySelector(".parent").style.webkitTransform = "rotate(-90deg)";
document.querySelector(".child").style.webkitTransform = "rotate(90deg)";
});
btn.addEventListener('click', function() {
document.querySelector(".parent").style.webkitTransform = "rotate(0deg)";
document.querySelector(".child").style.webkitTransform = "rotate(0deg)";
});
.parent {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
transform: rotate(-0deg);
transition: transform 0.7s linear;
margin: 100px auto 30px auto;
}
.child {
position: absolute;
transform: rotate(-0deg);
transition: transform 0.7s linear;
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center;
top: 278px;
/* -child size/2 */
left: 130px;
/* parent size/2 - child size/2 */
}
<div class="parent">
<div class="child">
Data
</div>
</div>
<button class="button">Click Down</button>
<button class="button-up">Click Up</button>
Add
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
and in script
<script>
AOS.init();
</script>
then in div
<div data-aos="fade-down"></div> //you can use whatever you want's
for further information
this website helps you on how to make it work
and
You can find out more at AOS Animation
I was searching a while but didn't found a post about this: I'm using jQuery fadeOut() to animate an element.
I want to fade out the element with a scale of 1.75 (175%) by using jQuery's fadeOut() function. At the moment it's a common fade out animation, but I'd like that the fade out animation scales out (element inflates).
I've made an example (the lightblue element) with a CSS animation using keyframes. I would like to solve the animation with fadeOut() (maybe you have to scroll down the snippet to see the example), is this possible? I hope this is clear enough.
$('.hide').click(function() {
$('.animate').fadeOut(500);
});
$('.show').click(function() {
$('.animate').fadeIn(500);
});
.animate {
width: 150px;
height: 150px;
background-color: lightcoral;
margin-top: 20px;
}
.animate--css {
background-color: lightblue;
}
.animate--css {
width: 150px;
height: 150px;
background-color: lightblue;
margin-top: 20px;
animation: zoomOut 1s infinite;
}
#keyframes zoomOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.75);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>
<div class="animate--css"></div>
You can use start to apply a CSS before fading the element:
$('.hide').click(function() {
$('.animate').fadeOut({'start':function() {$(this).css('transform','scale(1.75)') },'duration':500});
});
$('.show').click(function() {
$('.animate').fadeIn({'start':function() {$(this).css('transform','scale(1)') },'duration':500});
});
.animate {
width: 150px;
height: 150px;
background-color: lightcoral;
margin-top: 20px;
transition:0.5s all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>
I want to make an auto scrolling image. Here is what I've tried.
Scrolling image
Here is my code.
<style>
.scroll_container {
width: 100%;
height: 200px;
/* background-color: #ddd; */
overflow: hidden;
}
.ads_box_holder {
width: 100%;
white-space: nowrap;
min-width:100%;
width: auto !important;
width: 100%;
}
.ads_box {
display: inline-block;
position: relative;
top: 0;
left: 0;
width: 190px;
height: 200px;
padding: 10px 10px;
margin-right: 10px;
}
.ads_box img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: slide 20s infinite;
}
#keyframes slide {
0%{ transform:translateX(0px) }
10%{ transform:translateX(-200px) }
20%{ transform:translateX(-400px) }
30%{ transform:translateX(-600px) }
40%{ transform:translateX(-800px) }
50%{ transform:translateX(-1000px) }
60%{ transform:translateX(-1200px) }
70%{ transform:translateX(-1400px) }
80%{ transform:translateX(-1600px) }
90%{ transform:translateX(-1800px) }
100%{ transform:translateX(0px) }
}
<style>
<div class="scroll_container">
<div class="ads_box_holder">
<div class="ads_box"><img src="images/ads.png"></div>
<div class="ads_box"><img src="images/blur.jpg"></div>
<div class="ads_box"><img src="images/foot.jpg"></div>
<div class="ads_box"><img src="images/body.jpg"></div>
<div class="ads_box"><img src="images/s.png"></div>
<div class="ads_box"><img src="images/menu.jpg"></div>
<div class="ads_box"><img src="images/face.jpg"></div>
<div class="ads_box"><img src="images/c.jpeg"></div>
<div class="ads_box"><img src="images/foot2.jpg"></div>
<div class="ads_box"><img src="images/b.jpg"></div>
</div>
</div>
Now, I used keyframe css. So, when images move to left one after another, there has empty space in the right side as shown in below
---------
| |
| image | empty space are left here
| |
---------
In the reality, I want to add my images dynamically and images may be over 20 images. So, I'm not sure this keyframes is ok or not when images add dynamically.
I want to replace that empty space to the all of the images inside this box.
So, there is no empty space left and images are always scroll one after another.
But, I don't know how to replace images when space found inside ads_box_holder div.
And I remove css animation and also tried with javascript like this.
<script>
$(document).ready(function(){
var childCount = $(".ads_box_holder :visible").children().length;
var move = 0;
var hideImageTime = 0;
window.setInterval(function(){
hideImageTime += 1;
move += 200;
$(".ads_box_holder").css({
"margin-left":-move+"px",
});
if(hideImageTime > childCount) {
jQuery('.ads_box_holder .ads_box').each(function(){
var next = jQuery(this).next();
count += 1;
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
});
}
},2000);
});
</script>
But it is the same result when I use keyframe css.
NOTE: The image moving style is ok but I just want to place all images when empty space found inside ads_box_holder.
I have no idea how to achieve what I want. I'm really appreciate for any suggestion.
Finally I got what I want. Clone first child and append at last of ads_box_holder and remove first child.
$(document).ready(function(){
function animation() {
$('.ads_box_holder').children(':first').clone().appendTo(".ads_box_holder");
$('.ads_box_holder').children(':first').css({
"margin-left":"-204px",
"-webkit-transition": "all 0.7s ease-out",
"-moz-transition": "all 0.7s ease-out",
"-ms-transition": "all 0.7s ease-out",
"-o-transition": "all 0.7s ease-out",
"transition": "all 0.7s ease-out"
});
setTimeout(function(){$('.ads_box_holder').children(':first').remove()},1500);
}
window.setInterval(animation,2000);
});
I hope it will help for someone.
I use several buttons to create motion, now i have a problem when i use marginLeft for move the element to left and right div#ball, it doesn't fit in the page and jumps out and exit form both left and right side. how i can set a limitation and avoid element from exiting ?
$(document).ready(function() {
$('#fastleft').click(function() {
$('#ball').toggleClass('rotated');
$('#ball').animate({
'marginLeft': "-=300px"
});
});
$('#moveleft').click(function() {
$('#ball').toggleClass('rotated');
$('#ball').animate({
'marginLeft': "-=20px"
});
});
$('#moveright').click(function() {
$('#ball').toggleClass('rotated');
$('#ball').animate({
'marginLeft': "+=20px"
});
});
$('#fastright').click(function() {
$('#ball').toggleClass('rotated');
$('#ball').animate({
'marginLeft': "+=300px"
});
});
});
#ball {
width: 50px;
height: 50px;
display: inline-block;
/*background-image: url(./boll.png);*/
background-color:red;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.rotated {
animation-duration: 0.5s;
animation-name: ball;
}
#keyframes ball {
0% {
transform: rotate(100deg)
}
25% {
transform: rotate(200deg)
}
50% {
transform: rotate(300deg)
}
100% {
transform: rotate(360deg)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="butts">
<button id="fastleft" type="button">FastLeft</button></button>
<button id="moveleft" type="button">Left</button>
<button id="moveright" type="button">Right</button>
<button id="fastright" type="button">FastRight</button>
</div>
<br>
<div id="ball"></div>
</div>
Here's a more optimized version of your code using function and data attribute. Examine it and let me know if you have any questions understanding it.
var ball = $('#ball');
var position = 0;
var bw = ball.width();
var ww = $('body').width();
$('button').click(function() {
var speed = $(this).data('speed');
moveBall(speed);
});
function moveBall(px){
position+= px;
position = Math.min(position,ww-bw);
position = Math.max(position,0);
console.log(position);
ball.toggleClass('rotated').animate({
'marginLeft': position+"px"
});
}
#ball {
width: 50px;
height: 50px;
display: inline-block;
/*background-image: url(./boll.png);*/
background-color:red;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.rotated {
animation-duration: 0.5s;
animation-name: ball;
}
#keyframes ball {
0% {
transform: rotate(100deg)
}
25% {
transform: rotate(200deg)
}
50% {
transform: rotate(300deg)
}
100% {
transform: rotate(360deg)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="butts">
<button data-speed="-300" id="fastleft" type="button">FastLeft</button>
<button data-speed="-20" id="moveleft" type="button">Left</button>
<button data-speed="20" id="moveright" type="button">Right</button>
<button data-speed="300" id="fastright" type="button">FastRight</button>
</div>
<br>
<div id="ball"></div>
</div>
Try using other CSS properties like float and align instead of giving such large values in pixel to margin or padding properties. This will almost always push your elements out of your page especially if you are working with small screen sizes . Also you should try using bootstrap. It will make your life much easier.
This is my first post here. I'm looking for some help.
I have multiple div contents which should fade in out and out dynamically. I have got this jsfiddle and made it work for 2 divs, but need it to work for multiple, for example 5 different DIVs.
Is this jsfiddle the best way to go or is there a better option. Here is the code. Here is the jquery.
var fadeinBox = $("#box2");
var fadeoutBox = $("#box1");
function fade() {
fadeinBox.stop(true, true).fadeIn(2000);
fadeoutBox.stop(true, true).fadeOut(2000, function() {
// swap in/out
var temp = fadeinBox;
fadeinBox = fadeoutBox;
fadeoutBox = temp;
// start over again
setTimeout(fade, 1000);
});
}
// start the process
fade();
Here is the html
<div id="wrapper">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
and the CSS
.box {
position: absolute;
height: 100px;
width: 100px;
}
#wrapper {position: relative;}
#box1 {background-color: #F00;}
#box2 {background-color: #00F; display: none;}
Thank you in advance, and the link is below.
Dynamically changing DIV jsfiddle
You could use the same code but make it dynamic instead of two static elements:
var $boxes = $(".box").hide();
var current = 0;
function fade() {
$boxes.eq(current).stop(true, true).fadeOut(2000);
current = (current + 1) % $boxes.length;
$boxes.eq(current).stop(true, true).fadeIn(2000, function(){
setTimeout(fade, 1000);
});
}
fade();
http://jsfiddle.net/3XwZv/637/
What about doing it with CSS3 animations? Depending on your target browsers, this should work well:
Simplify your markup to a single div like this:
<div id="box"></div>
and then the CSS handles all the animation:
#keyframes colorCycle
{
0% {background-color:red;}
20% {background-color:orange;}
40% {background-color:yellow;}
60% {background-color:green;}
80% {background-color:blue;}
100% {background-color:purple;}
}
#-webkit-keyframes colorCycle /* Safari and Chrome */
{
0% {background-color:red;}
20% {background-color:orange;}
40% {background-color:yellow;}
60% {background-color:green;}
80% {background-color:blue;}
100% {background-color:purple;}
}
#box {
height: 100px;
width: 100px;
animation: colorCycle 10s 0s infinite;
-webkit-animation: colorCycle 10s 0s infinite;
}
Here's a Fiddle You can play with the key stops, timings, and colors to get the effect you need.
Depending on your specific application, you could toggle the fade for all boxes and use jQuery's promise() to determine when all boxes have finished fading.
HTML:
<div class="wrapper">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
<div class="wrapper">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
<div class="wrapper">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
CSS:
.box {
position: absolute;
height: 100px;
width: 100px;
}
.wrapper {
position: relative;
width:100px;
height:100px;
margin-bottom:10px;
}
.box1 {
background-color: #F00;
}
.box2 {
background-color: #00F;
display: none;
}
JS:
function fade() {
jQuery('.box').stop(true, true).fadeToggle(2000);
jQuery('.box').promise().done(function(){fade();});
}
fade();
http://jsfiddle.net/3XwZv/638/