How to take a div that is off screen and translate it to the middle of the screen using translateX()


Tags: jquery,html,css,css3

Problem :

Let me explain a little more in depth. I'm looking to have a div off screen. When a user clicks on a button I want the div to transition onto the screen.

<a href="#" id="button">Click Me</a>
   <div style="position:absolute;left:-100%;width:80%;height:80%;background:yellow; id="block" class="objecttransition"></div>

Here is the JS:

$("#button").click(function(){
 $("#block".addClass("move");
}):

Here is the CSS:

.move
  {
    transform: translateX($$);
    -webkit-transform: translateX($$); /** Safari & Chrome **/
    -o-transform: translateX($$); /** Opera **/
    -moz-transform: translateX($$); /** Firefox **/
  }

.objecttransition
  {
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear; /** Chrome & Safari **/
    -moz-transition: all 0.5s linear; /** Firefox **/
    -o-transition: all 0.5s linear; /** Opera **/
  }

My question now is by how much do I move the block to the right to make sure that the block is always in the middle of the screen regardless of the screen size??



Solution :

This actually can be done without any Javascript, anyway here's a working example using jQuery.

<div>Hello!</div>
div {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 100%;
    width: 5rem;
    line-height: 5rem;
    text-align: center;
    background: red;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50 -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 1200ms;
    -moz-transition: 1200ms;
    transition: 1200ms; }

div.foo {
    opacity: 1;
    left: 50%;
}
$( document ).on('click', function() {
    $( 'div' ).toggleClass( 'foo' );
});

    CSS Howto..

    How to create a “shiny” effect like this using CSS gradients?

    How to make a circular button out of a PNG image?

    How to prevent inherit for H1?

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    how do you set css to add an asp img?

    How to get the correct mouse position in relation to a div that has has a scale transform applied

    How would you style this html so that everything falls into a table?

    Beginner: How to get a fixed element to a left position (float left?) - JSFiddle included

    How to define link text color in UIWebView

    How to ensure updated files are served instead of cached ones?

    HTML/ CSS: A href exceeds linking image - how to avoid?

    How to set the box width same as the screen width?

    How to adjust the height of the footer automatically

    Gulp Sass - How to properly name the output css?

    How to move hamburger menu to the front of overlay menu

    Why is the icon shown in some browsers while other it is not

    How to determine if image is hyperlinked?

    How to make width of element full width of screen and not parent css

    How to add padding to a reapeating CSS background without padding the content?

    How is table layout fixed rendered?

    How to link to a CSS if a certain condition happens?

    How i can make it wiht css3?

    How do I add a margin between bootstrap columns without wrapping

    Hide / show element if text is / isn't to long in jQuery

    how to effect td on fixed table layout

    How to select the las Li with Xpath or Css Selector

    How to keep images locked at specific height within Bootstrap container

    how to show text in a button with css

    How do you keep zoom between pages consistent? via CSS?

    CSS: how to stop text from taking up more than 1 line?