We Keep Coding

How to stop a css slide animation (starting on load) when user scrolls?

There's a trick in JS I can't achieve, it relies on stopping a slidding animation made in CSS. In the moment, I have a long div with a random images content that slides in from the top and then out from the bottom. The animation runs at page load thanks to a 'slide down' class, calling the desired slide effect. I also set a scroll effect that allows the user to scroll in this div, BUT I'd like the scroll to take priority over the animation. The animation is finally only a way to encourage the user to scroll. I tried the following code but it has no effect :
$(window).scroll(function() {
('#scroller').removeClass("slidedown");
});
Could that be linked to the animation, like if it was considered as a 'scroll action' ? I attempt to handle this with 'if (ScrollTop < = >)' parameters but it simply has no effect or it just cancels the animation, which is unwanted.
'.on('mousewheel', function(){' doesn't seem to work. Replace '$(window)' by $('#scroller') has no effect either. I'm just thinking on the best way to settle this, but I need at least some advices to understand what I'm doing wrong (and I have to precise that I'm a beginner) !
Please find some key codes below :
----
HTML
----
<div id="scroller-wrapper">
<div id="scroller" class="slidedown">
<div id="img-defile1" class="img-defile">
<img src="img/ceaac.jpg"/>
</div>
<div id="img-defile2" class="img-defile">
<img src="img/ceaac2.jpg"/>
</div>
</div>
</div>
---
CSS
---
#scroller-wrapper {
top:0;
left:0;
width:102vw;
height:100%;
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
transform: scale(1, -1);
z-index:2;
}
#scroller {
max-width:100%;
width:60%;
height:1250%;
position:relative;
z-index:800;
display:block;
transform: scale(1, -1);
}
.slidedown {
animation-duration:120s;
animation-name: slidedown;
animation-timing-function:linear;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes slidedown {
0% {
bottom: -75%;
}
100% {
bottom: 1150%;
}
}
.img-defile {
display:block;
max-width:100%;
height:auto;
position:absolute;
overflow:hidden;
}
.img-defile img {
width:600px;
}
.custom-scroll {
height: calc(80% - 20px);
}
---------
JS/Jquery
---------
$('#scroller').scroll(function () {
if ($(this).scrollTop() > 0) {
$('#scroller').addClass("custom-scroll");
return false;
} else {
$('#scroller').removeClass("custom-scroll");
}
});
$('.img-defile').each(function(i) {
$pT=$("#scroller").height();
$pL=$("#scroller").width();
$(this).css({
top:Math.floor(Math.random()*$pT),
left:Math.round(Math.random()*$pL)
});
});
Many thanks in advance !

How can I make this Jquery animate() with css3 animations?

This is my jfiddle
And this is my actual code
$card.animate({
left: "1000px"
}, 500, function(){
$card.hide(500);
});
(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated

First of all, create a class that you can trigger via jQuery that will have the animation.
Then, using you have two options: transition or animation. Transitions are simpler and more direct, but you can do more with animations.
Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function.
#keyframes hide {
99% { display: auto; }
100%{ display: none; opacity: 0; }
}
.myelement {
transition: all .5s;
position: absolute;
left: 0;
}
.myelement.toLeft {
left: 2000px;
animation: hide .5s 1 forwards;
}
To trigger it, simply do this:
$(".myelement").addClass("toLeft");
Here is a working JSFiddle.
And like #MohitBhardwaj said, it is necessary for you to set position to absolute, relative, or static in order for positioning (i.e., the left property) to work.
It's also important to note that a transition needs an initial value. I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.
Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden, so that the extraneous scroll bar doesn't appear.

Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.
var my_div = $('.myelement');
my_div.on('click', function() {
var $this = $(this);
$this.addClass("gone");
setTimeout(function(){
$this.hide();
}, 600 );
})
#mywrapper
{
overflow: hidden;
}
.myelement {
height: 200px;
width: 200px;
background-color: red;
opacity: 1;
position: relative;
transition: all 0.5s ease;
opacity: 1;
left: 0px;
}
.myelement.gone
{
left: 500px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
Click me please
</div>
</div>

How to stop a CSS animation when it meets the screen edge?

I created this demo:
http://cristiantraina.altervista.org/boxfall/
When you click, it creates a red falling box.
The problem is that using only css there are no ways to detect the size of the screen, in fact in my demo I specify that the box has to fall for 1000px, regardless of the actual height of the screen.
This is the code of the keyframe:
#include keyframes("fall"){
to{
top: 1000px;
}
}
I can't use bottom:0px; because I wouldn't know from where to start the fall, and I didn't solve my main problem.
This is the FallBox.js script:
function FallBox(x, side, parent){
this.x = x;
this.parent = parent || $("body");
this.side = side || Math.random()*200;
this.createBox();
this.fall();
}
FallBox.prototype.createBox = function(){
box = document.createElement('div');
$box = $(box); // I hate brackets
$box.addClass("box");
$box.css({
width: this.side+"px",
height: this.side+"px",
left: this.x+"px",
top: "-"+(this.side+5)+"px"
});
this.box = $box;
}
FallBox.prototype.fall = function(){
this.parent.append(this.box);
this.box.addClass("fall");
}
I know that I could use overflow:hidden; in the parent div, but I don't think that this is the ideal solution. First because a user can have got a screen with a superior height, then because I want to the box stops when it meets the edge, as the border was ground and it shouldn't pass through.
Another solution that I found on the web, it's to use the CSSOM API, but not even mozilla developers are sure of the compatibilty of these.
So, how can I stop an animation when it meets the screen edge, since javascript fails to inject properties?
Thank you.

If you're looking for a css-only solution, you could use the css calc feature (http://caniuse.com/#feat=calc) in combination with vh (http://caniuse.com/#search=vh).
document.querySelector(".box").addEventListener("click", function() {
this.classList.toggle("is-dropped");
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background: red;
transition: top 2s;
}
.box.is-dropped {
top: calc(100vh - 100px);
}
<div class="box"></div>

You coul use the translatey() CSS transform function to shift each div up by 100% of its own height. That way you would just need 2 rules to change the value of the top position without having to worry about height in each case.
(function(d,M){
var div=d.createElement("div"),
wait=0,size;
d.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(1);
div.classList.remove("go");// necessary so that newly created divs don't just get added to the bottom of the page
size=M.max(M.floor(M.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=M.max(M.floor(M.random()*this.offsetWidth)-size,0)+"px";
this.appendChild(div);
setTimeout(function(){
div.classList.add("go");// adding this class starts the animation.
wait=0;
},5);
}
},0);
})(document,Math);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear;
position:absolute;
top:0;
transform:translatey(-100%);
}
div.go{
top:100%;
}
ORIGINAL SOLUTION
As the height of the box is being set dynamically in your JavaScript, your CSS isn't going to know the height of each box but that doesn't stop you using the CSS calc() function to set the top position you want to animate each to, much like you currently do to set its starting top position. Here's a quick, rough example, with an alternative solution in the comments that doesn't use calc(), if you'd prefer.
var div=document.createElement("div"),
wait=0,size;
document.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(0);
size=Math.max(Math.floor(Math.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=Math.max(Math.floor(Math.random()*this.offsetWidth)-size,0)+"px";
div.style.top="-"+size+"px";
this.appendChild(div);
setTimeout(function(){
div.style.top="calc(100% - "+size+"px)"; /* This is the important bit */
// div.style.top=document.body.offsetHeight-size+"px"; /* Alternative solution, without using calc() */
wait=0;
},5);
}
},0);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear; /* Using a transition instead of an animation */
position:absolute;
}

Can you fix a div and make it change opacity, size and position as you scroll with CSS3

I'm not even sure how to search this question. But effectively I'm trying to figure out how this website is achieving this fixed opacity/size changing effect on their table: http://sqlzoo.net/wiki/SELECT_within_SELECT_Tutorial . If you scroll down you'll see the effect on the table. When you hover over it it pops out having the data more visible.
The only thing I can think of is using a fixed div that when scrolled past a certain point triggers a jquery UI event that shrinks while decreasing opacity and then an on hover event that reverses this effect.
Achieving this animation in the way I described above seems inefficient and I'm not sure if more (or all) can be done with CSS3. So basically can you achieve the effect shown on the page provided completely or almost completely in CSS3.
Also i looked at the source of the page and couldn't fish it out of the css and scripts they include.
Here's a fiddle of what I have so far. Haven't started on scrolling yet:
HTML
<div id="stuff">Blahblah</div>
CSS
div {
width:250px;
height:250px;
border:2px solid #a1a1a1;
}
JavaScript
$( "#stuff" ).click(function() {
$( "#stuff" ).animate({
width: "20%",
height:"20px",
opacity: 0.4
}, 1500 );
});
http://jsfiddle.net/thed0ctor/1kx5jg1e/

You could do this easily with a combination of CSS3 transform and a bit of Javascript / jQuery:
Demo Fiddle: http://jsfiddle.net/abhitalks/hcwyth8n/2/
Relevant CSS:
#hanger {
width: 200px; height: 200px;
background-color: #00f;
position: fixed; /* Position fixed important */
top: 10px; right: 10px;
opacity: 1;
transition: 0.5s all; /* Animate transitions */
}
#hanger.dim { /* Style to make it appear dimmed */
transform: scale(.75); /* Make it smaller */
opacity: 0.5; /* Make it dimmer */
}
#hanger.dim:hover { /* To change back on hover only when it is dimmed */
transform: scale(1); /* Back to original size */
opacity: 1; /* Back to original opacity */
}
Relevant jQuery Code:
$(window).on("scroll", function() { /* When window scrolls, */
if ($(window).scrollTop() > 50) { /* Check if it scrolls more than 50 pixels */
$("#hanger").addClass("dim"); /* Apply class dim */
} else {
$("#hanger").removeClass("dim"); /* Otherwise remove class dim */
}
});
Hope that helps.
.

Pseudo code only:
window.scroll(function(){
if (window.scrolltop > selectedElement.offset().top){
selectedElement.animate({
transform: scale(.75),
opacity: .5
position: fixed
});
}else{
selectElement.animate({
transform: scale(.75),
opacity: 1
position: static
});
}
});
The links provided in the he pseudo code should point you in the right direction.

how to make div slide from right to left

got a code here from someone....
what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.
HTML
<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>
CSS
#loginPanel {
color: #000;
cursor:pointer;
}
#userNav {
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
Jquery
// Open / Close Panel According to Cookie //
if ($.cookie('panel') == 'open'){
$('#userNav').slideDown('fast');
} else {
$('#userNav').slideUp('fast');
}
// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){
$('#userNav').slideToggle('fast', function(){
if ($(this).is(':hidden')) {
$.cookie('panel', 'closed');
} else {
$.cookie('panel', 'open');
}
});
});
Please need help on this one. just to make the div slide right to left
here is the fiddle http://jsfiddle.net/7m7uK/195/

You can use jQueryUI and additional effects Slide
http://docs.jquery.com/UI/Effects/Slide
Example:
$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);
You can't use .slideToggle() to slide from left to right or vice versa, from http://api.jquery.com/slideToggle/:
The .slideToggle() method animates the height of the matched elements.
This causes lower parts of the page to slide up or down, appearing to
reveal or conceal the items. If the element is initially displayed, it
will be hidden; if hidden, it will be shown.
You should try and change your code to implement this code, but I think it's maybe better if you try with #s15199d answer, than you don't need to use jQueryUI
Ok, I created jsfiddle, you must include jQueryUI in order to work, you have different combinations of slide directions:
http://jsfiddle.net/7m7uK/197/
Ok, created another fiddle with cookies
http://jsfiddle.net/7m7uK/198/

Without depending on JQuery-UI
You need to place the content <div> you mean to slide inside a wrapper <div>. You then set the right margin of the content div to its negative width. The trick with the wrapper <div> is to have its x-overflow set to hidden so that it hides the content <div>. You can then use jQuery's native animate() routine to set the right margin to 0 to make the content <div> appear with a horizontal sliding effect.
HTML:
<div id="slider-wrapper">
<div id="slider-content">
</div>
CSS:
#slider-wrapper {
overflow-x: hidden;
}
#slider-content {
width: 300px;
margin-right: -300px;
}
JavaScript:
$("#slider-button").click(function () {
$("#slider-content").animate({ "margin-right": 0 }, "slow");
});
Here's a demo that uses a handle <div> to expand and collapse a div:
http://jsfiddle.net/gingi/KUCaL/

SLIDE DIV FROM RIGHT TO LEFT AND LEFT TO RIGHT
<div class="nav ">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</div>
CSS:
/*nav*/
.nav{
position: fixed;
right:0;
top: 70px;
width: 250px;
height: calc(100vh - 70px);
background-color: #333;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.nav-view{
transform: translateX(0);
}
JS:
$(document).ready(function(){
$('a#click-a').click(function(){
$('.nav').toggleClass('nav-view');
});
});
http://www.themeswild.com/read/slide-navigation-left-to-right

$("#DivName").animate({"left": "-=300px", "opacity":1}, "slow");

Have you tried this ?
if ($.cookie('panel') == 'open'){
$('#userNav').slideLeft('fast');
} else {
$('#userNav').slideRight('fast');
}