I have a row of 4 divs that are floated left. On click, the div disappears and its siblings move to the left and take up its position. However, I'm struggling with smoothing this animation since the remaining 'divs' just jump to their new position instead of sliding over
http://jsfiddle.net/G9x8V/
Is there any way to smooth out the transition, preferably without using specific values, ie: margin-left: x pixels;? Also, is it possible to do this with css transitions?
You can switch fadeOut() with hide()
Here is the updated fiddle
$(function(){
$('.box').on('click', function(){
$(this).hide(1000);
})
});
EDIT
One of the directions is to wrap boxes into invisible divs that will hide after the boxes fade out. Here is the updated fidle
HTML
<div class="container">
<div class="outer-box">
<div class="box">1</div>
</div>
<div class="outer-box">
<div class="box">2</div>
</div>
<div class="outer-box">
<div class="box">3</div>
</div>
<div class="outer-box">
<div class="box">4</div>
</div>
</div>
CSS
.container {
width: 600px;
}
.box {
width: 100%;
height: 120px;
background: red;
float: left;
}
.outer-box {
width: 20%;
height: 120px;
margin-left: 2.5%;
float: left;
}
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(1000, function(){
$(this).parents('.outer-box').hide(1000);
});
});
});
I'd go with Bojana's answer, but I'll give you another option, as I worked a little on it(it's not done, implementation isn't as easy as bojana's):
http://jsfiddle.net/G9x8V/4/
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {margin-left: 18%;}
25% {margin-left: 12%;}
50% {margin-left: 6%;}
100% {margin-left: 0%;}
}
And then you'd have to update the javascript so it occured on click, not on page load, and you might want to put in more points on that animation and switch to px.
Is this what you are looking for? Or do you actually want the blocks to slide along?
CSS3 Ease
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
JSFIDDLE
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(function() {
$(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000);
});
})
});
JSFIDDLE jQuery
Related
I am making a marquee in Javascript and CSS that displays various notifications.
Right now, I am using Javascript to update the transform: translateX() on a specified interval.
Here's a codepen of what I have working so far.
I would like to have the marquee wrap around so that there is always text present on the screen. Currently, it does not wrap around until everything has disappeared.
I have found a similar example (using CSS keyframes) that seems to have solved this issue by including the marquee text twice in a row. I would prefer not to have to do this if at all possible, as the marquee won't be text when live, but rather a bunch of icons and other elements, and that could get messy.
You have to have the text twice to achieve the effect you are looking for. The codepen you reference controls the widths so that both texts are never in the visible marquee simultaneously. Here is another example that does this by tying the width of the outer div to the width of the inner div with jQuery, and uses white-space: nowrap. I didn't write this codepen, BTW.
HTML
<div id="maindiv">
<div id="div1">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
<div id="div2">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
</div>
CSS
#maindiv{
border: 2px solid black;
overflow: hidden;
white-space: nowrap;
}
#div1 {
display: inline-block;
animation: marquee 10s linear infinite;
}
#div2 {
display: inline-block;
animation: marquee2 10s linear infinite;
animation-delay: 5s;
}
#keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
#keyframes marquee2 {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200%);
}
}
jQuery
$('#maindiv').width($('#div1').width());
I have an image slider, it's going to the next/previous image fine.
The problem is that when you click the previous image button, the animation takes longer than when you click in the next image button, and the animation is the same for both!Can you tell me why is this happening?
JSFIDDLE:
http://jsfiddle.net/v6d16jza/
HTML:
<div id="slider">
<div id="setas-navegacao" style="position:absolute;height:100%;width:100%;">
<i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i>
<i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i>
</div>
<div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');">
</div>
<div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');">
</div>
<div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');">
</div>
</div>
CSS:
html{
overflow: hidden;
width:100%;
}
div#slider{
position:relative;
overflow: hidden;
width: 300%;
height:300px;
}
.slide{
position:relative;
width:33.3%;
height:100%;
float:left;
background-size: cover;
-webkit-transform: translateZ(0);
-webkit-transition: margin-left 0.9s ease-out;
-moz-transition: margin-left 0.9s ease-out;
-o-transition: margin-left 0.9s ease-out;
transition: margin-left 0.9s ease-out;
}
jQuery:
$(".sprite-slider_prox").on("click", function(){
if($(".slide_ativo").next().is(".slide")){
$(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo");
}
});
$(".sprite-slider_ant").on("click", function(){
if($(".slide_ativo").prev().is(".slide")){
$(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo");
}
});
You are adding more margin than it's actually needed to shift the image to the left.
You can see what's happening with the Chrome inspector, hovering the images while they change (raising the animation time to some higher value will help you). You will notice that the delay before the slider starts moving back is spent removing the extra margin.
I recorded a video of the debugging.
If you change:
.css("margin-left", "-100%")
to:
.css("margin-left", "-33.333%")
the animation will work correctly (see the fiddle)
Also, note that I had to remove the padding and margin from html and body elements to achieve the correct shifting.
I'm trying to make the h1 fade in once visible on scroll
http://jsfiddle.net/robcleaton/dfggat6b/
HTML
<div class="hero">
Scroll down
</div>
<h1 class="animated fadeInUp">Animate fadeIn</h1>
CSS
.hero {
background: green;
height: 1000px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
I don't think there is a way to do this without JavaScript. If you are using jQuery, you can add a handler to $(window).scroll() that checks to see if your h1 is in viewport and adds the animation class.
You can use the jQuery inViewport plugin to detect if an element is in viewport: http://www.appelsiini.net/projects/viewport
I have put some elements around it to make it more clear, but this should do the job.
http://jsfiddle.net/chkrmqmx/
HTML
<div class="hero">
Scroll down
</div>
<h1 class="animated fadeInUp" id="fadein">Animate fadeIn</h1>
<div class="hero" id="spacer"></div>
CSS
.hero {
background: green;
height: 1000px;
}
.animated {
display: none;
height: 200px;
}
#spacer {
margin-top: 200px;
}
Javascript (with jQuery)
$(window).scroll(function() {
var $this = $(window);
if ($this.scrollTop() >= 800) {
$("#spacer").css('margin-top', '0');
$("#fadein").fadeIn(1000);
}
});
You can try headroom js. They provide the functionality similar to what you are looking for. Check out this link -> http://wicky.nillia.ms/headroom.js/
I've started using this js plugin that seems to cater for all I need
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Element-Fade-Slide-Effects-As-You-Scroll-FadeThis/
I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the same time.
My HTML code is like this:
<body>
<div id="content">
<div id="page1">
<!-- Content Area 1 -->
</div>
<div id="page2">
<!-- Content Area 1 -->
</div>
</div>
</body>
Currently I am using
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "inline";
to switch between the pages, but I would like to have the transition as smooth as possible.
Is there a way I can do this, without jQuery and preferably just in CSS?
If not, how can I do it in jQuery?
Yes you can do it with pure css by using animation keyframes.
HTML
<div id="content">
<div id="page1" class="page">
<!-- Content Area 1 -->
</div>
<div id="page2" class="page">
<!-- Content Area 1 -->
</div>
</div>
CSS
html,body {
height: 100%;
overflow: hidden;
}
#content {
position: relative;
height: 100%;
}
.page {
position: absolute;
top:0;
height: 100%;
width: 100%;
}
#page1 {
background: #d94e4e;
left:-100%;
-webkit-animation: left-to-right 5s linear forwards;
animation: left-to-right 5s linear forwards;
}
#page2 {
background: #60b044;
left:0;
-webkit-animation: right-to-left 5s linear forwards;
animation: right-to-left 5s linear forwards;
}
#-webkit-keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#-webkit-keyframes right-to-left{
from{left:0}
to{left:100%}
}
#keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#keyframes right-to-left{
from{left:0}
to{left:100%}
}
However there is one huge limitation to this method. CSS can't handle any real events. So if you want this animation to appear when a button is clicked or something, you'll have to use JavaScript.
Demo jsFiddle
Edited
Now the left one enters and the right one exits at the same time.
UPDATE
The same example using translate3d => jsFiddle
here's an (almost) full CSS solution:
If you can be more specific about what you want I can happily tweak or guide you through the code to help you.
It relies on using translate3d:
transform: translate3d(-200px, 0, 0);
DEMO
using jQuery
http://jsfiddle.net/5EsQk/
<div id="content">
<div id="page1" style="width: 100px; height: 100px; color: white; background-color:silver; float: left; margin-left: -90px;">
Content Area 1
</div>
<div id="page2" style="width: 100px; height: 100px; color: white; background-color:silver; float: right; margin-right: -90px;">
Content Area 1
</div>
</div>
$(document).ready(function() {
$('#page1').animate({
marginLeft: "+=90"
}, 5000);
$('#page2').animate({
marginRight: "+=90"
}, 5000);
});
edited fiddle => http://jsfiddle.net/5EsQk/1/
Very much possible without jQuery, using only CSS and CSS transitions.
You can set up your CSS so that if <div id="content"> has no class .showPage2, it shows page 1. If it does have .showPage2, it shows page 2.
The transition is then only triggered by toggling the class using (native) Javascript. The animation is handled by CSS transitions. This means that if by any change the browser does not support CSS3 transitions, the user will still see the correct page; only not with the fancy transition. CSS3 transitions are generally very smooth.
This is what the CSS would look like:
#content
{
position: relative;
overflow: hidden;
}
#content #page1
{
position: absolute;
left: 0%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content #page2
{
position: absolute;
left: 100%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content.showPage2 #page1
{
left: -100%;
}
#content.showPage2 #page2
{
left: 0%;
}
And the Javascript could look something like this:
function showPage1()
{
document.getElementById("content").setAttribute("class", "")
}
function showPage2()
{
document.getElementById("content").setAttribute("class", "showPage2")
}
I hope this handles it in a way that fits your needs.
I need to implement fade effect with climb text on my web page.
Example: http://www.believein.co.uk/
In this example on the main page we see when we hover mouse over image then image fade and text climb from the top. All what I imagine is that:
<div class="row pageTitle2">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 marPadReset">
<img src="~/Content/Images/4.jpg"/>
</div>
</div>
</div>
$(".pageTitle2 img").fadeTo("slow", 1.0);
$(".pageTitle2 img").hover(function () {
$(this).fadeTo("slow", 0.6);
}, function () {
$(this).fadeTo("slow", 1.0);
});
Does anybody help?
You can use CSS3 transitions for this, on hover you need to affect the opacity of the overlay background and the margin of the overlay text.
For example:
div#overlay_container:hover div#background {
transition: opacity 1s ease-in-out;
opacity: 0.6;
}
The above on hover of the overlay will change the opacity to 0.6 in an "eased" fashion.
div#overlay_container:hover div#text {
transition: margin-top 2s ease-in-out, opacity 2s ease-in-out;
opacity: 1;
margin-top: 0px;
}
The above on hover of the overlay will change the opacity to 1 and the margin-top to 0.
You can see the JSFiddle here.
You may need to fall back to a Javascript based solution if you wish to cater for outdated browsers.
You could use jQuery with some mouseenter and mouseleave effects
$(function(){
$(".bg").mouseenter(function(){
$(".text").fadeIn(500);
});
$(".bg").mouseleave(function(){
$(".text").slideUp(500);
});
});
JSFIDDLE
Link: http://jsfiddle.net/FCpc8/1/
CSS
a { position: relative; display: inline-block }
a span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: black;
color: #fff;
opacity:0;
transition:1s;
}
a:hover span {
opacity:1;
}
HTML
<div class="row pageTitle2">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 marPadReset">
<a href="#">
<span>Some Text</span>
<img src="~/Content/Images/4.jpg"/></a>
</div>
</div>
</div>
Explanation
First of all, you need to wrap the image in anchor tag and include the text you want to show on hover in a span tag. By default, the opacity of text will be 0, that is hidden. On hover (a:hover span) opacity is set to 1 - visible. and background is black hence the image behind is not visible. Transition property of css will help it move the effect smoothly.