How to Make Div Slide from Right to Left

how to make div slide from right to left

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/

Slide div from right to left

Create a wrapper div with height and width, set the overflow property to hidden in order to get rid of the horizontal scroll issue.

HTML:

<div id="container">
    <div class="message-window">Here I am !</div>
    <div class="red-box">Fixed div</div>
</div>

<a href="#" class="photo-details-messages" style="position:absolute; top:400px">Show/hide Slide Panel</a>

CSS:

#container{
  width:100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.red-box, .message-window {
    height:350px;
}

.red-box {
    width: 100%;
    background: red;
    z-index:1;
    position:absolute;
}

.message-window {
    width:100%;
    z-index:2;
    position:absolute;
    left:100%;
    background:#f90;
    color:#000;
}

JS:

$(document).ready(function(){
    $('.photo-details-messages').click(function(){
    var hidden = $('.message-window');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"100%"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0"}, "slow").addClass('visible');
    }
    });
});

check this

Make image in div slide from right to left loop

Instead of giving the width and height for the .imgslide as a percentage, give it in px or em. You could also delete the overflow:hidden; from the .slideshow.

This will show if your image is not appearing or if it is appearing and being hidden.

How would I make a transition for the div to slide to the left and come out through the right side?

Here is a simple example where the div first slides out completely to the left and then comes in from the right.

It uses CSS animation to do this, for the first half of the animation sliding it to the left and out of view and for the second half sliding it in from the right.

Note, there is a little 'fiddle' at the half way point where we take the div from the left to the right, but with opacity very temporarily at 0. This is to prevent any possibility of a slight 'flash' as the div is moved across the screen.

const div = document.querySelector('div');
const button = document.querySelector('button');
div.addEventListener('animationend', function() {
  div.classList.remove('move');
});
button.addEventListener('click', function() {
  div.classList.add('move');
});

* {
  margin: 0;
}

button {
  position: fixed;
  z-index: 1;
}

div {
  background-image: linear-gradient(to right, red, blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.move {
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100%);
    opacity: 1;
  }
  50.001% {
    opacity: 0;
    transform: translateX(100vw);
  }
  50.002% {
    opacity: 1;
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}

<button>Click me</button>
<div>This is the div</div>

Slide div right to left inside image

By default your #slider-div starts from left:0; position. So it will animate to the right. If you want to make it left just position your #slider-div at the beginning as right:0;.

Using CSS to slide text from right to left until the end the text string

I have a similar need so here's the solution I've came up with.

transform: translateX(calc(-100% + 200px));

This did the trick for me.

Only issue is that the speed of the scrolling depends on the length of the text. It doesn't bother me so I won't be trying to 'fix' it.

:root {
  --slider-width: 400px;
}

body {
  background-color: gray;
}

.slider {
  width: var(--slider-width);
  height: 40px;
  overflow: hidden;
  background-color: blue;
  white-space: nowrap;
}

.text {
  font-size:26px;
  display: inline-block;
  animation: slide 20s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(calc(-100% + var(--slider-width)));
    }
    
    100% {
        transform: translateX(0%);
    }
}

<div class="slider">
      <div class="text">
        Hello world, I need a very long text to show how the text will move
      </div>
    </div>

Slide a div from left-right or right left with preserving div size

Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.

$(document).ready(function(){  $('.slideLeft').click(function(){   $('.slider').animate(     {'left':'-600px'},      1000,      function(){        $('.slider').hide();      }    );  });});

.slider{  height: 300px;  width: 600px;  font-size: 20px;  background-color: yellow;  position: relative;}.container{  border: 1px solid red;  height: 300px;  width: 600px;  background-color: silver;  overflow: hidden;}.slideLeft{  margin-top: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <div class="slider">    Hi, I have some content!  </div></div><button class="slideLeft">Slide me left!</button>

Slide div to the right and left on click

You can use CSS translation to achieve this, activated upon a button click or something similar.

$("#btn").click(function() {
  $("#test").css("transform", "translateX(100px)");
});

https://codepen.io/anon/pen/MRJzog

DIV Slide to the left and stay on top

I would start with 2 floating div like this :

#left{
    background-color: red;
    width:50%;
    height:150px;
    float: left;
}
#right{
    background-color: green;
    width: 50%;
    height:150px;
    float: left;
}

The moving div has an absolute positioning to be always over the 2 floating div, and a transition property to manage the sliding effect :

#moving{
    position: absolute;
    top: 0;
    left: 50%;
    width:50%;
    background-color: blue;
    height: 150px;
    transition: all 0.5s;
} 

For the absolute positioned div, we need the wrapper div to be relative positioned :

#wrapper{
    position: relative;
    overflow: hidden;
}

And then we add a class for the top left position :

#moving.left{
    transform: translateX(-100%);
}

The javascript has just to toggle the moving div "left" class when clicking on it, the sliding effect being managed with CSS transition property :

$(document).ready(function() {
   $("#moving").click(function(){
      $("#moving").toggleClass("left");
   });
});

See this fiddle :

https://jsfiddle.net/mq2c2129/5/

---

Related Topics