Alguien sabe como se hace este efecto slide ??

jonysi_d · #1 (**permalink**) 02/01/2013, 06:47

Hola..
trabajo con prestashop y necesito que la foto de mi producto haga el mismo efecto que el que hace el carrito de la compra de este enlace ( que cuando añades algo al carrito, la foto haga un efecto slide hacia abajo de la pantalla.

http://prestatest.obsolutions.es/

Imagino que se hace con css:

Código PHP:

  .fixed {
    position: fixed;
    top: 0px;
}

pero imagino que hay efecto de código Javascript ¿¿ verdad ?? ya que si aplico este css, la imagen siempre está en el top:0px , pero yo quiero que inicialmente este en su posición natural, pero que cuando el usuario baje la pagina la foto también baje, pero en el top:0px de la página.

gracias.

usuario12 · #2 (**permalink**) 02/01/2013, 07:27

no se si te servira

Código HTML:

<html>
<head>
<title></title>
</head>
<body>
&nbsp; <br>
<div
style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"
align="center">
<table align="center" border="0" width="350">
<tbody>
<tr>
<title></title>
<br>
<div
style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"
align="center"> </div>
</tr>
</tbody>
</table>
<table align="center" border="0" width="350">
<tbody>
<tr>
<td>
<marquee width="350"><br>
<img
src="data:image/jpeg;base64,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"></marquee>
</td>
</tr>
</tbody>
</table>
</div>
<span
style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: rgb(230, 230, 230); display: inline ! important; float: none;"></span><br
style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<br
style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</body>
</html>

jonysi_d · #3 (**permalink**) 02/01/2013, 09:06

Hola usuario12

gracias por tu aportación, pero no es lo que necesito, ya que la foto solo se debe de mover SI EL USUARIO BAJA LA PAGINA.
tipo :

Código PHP:

  position: fixed;

jonysi_d · #4 (**permalink**) 02/01/2013, 10:09

solucionado..!!!

pero me sale una duda, el código que utilizo es este:

Código PHP:

  <script type="text/javascript">
        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 2;
            
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

pero si quiero aplicarle una variable para que me genere la misma funcion que el topPadding pero para un lateral, es decir QUE HAGA LOS 2 EFECTOS, desplazarse hacia abajo y hacia un lado, una tipo asi:

leftPadding
he provado combinaciones, como por ejemplo asi:

Código PHP:

  <script type="text/javascript">
        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 2;

        var leftPadding = 300;

            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding;
                        marginLeft: $(window).scrollLeft() - offset.left + leftPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

pero no hay manera , alguna ayuda por favor..??!!

supongo que ya habreis visto que estoy muy falto de conocimiento de Javascript..

gracias

jonysi_d · #5 (**permalink**) 02/01/2013, 12:14

acabo de solucionarlo, aunque me ha surjido otro problema, como puedo hacer que si el usuario baja la vista de la página y se ejecutan estos javascript, cuando el usuario vuelve a subir la vista de la pagina hacia arriba, como puedo hacer que la imagen vuelva otra vez a su sitio inicial ?? ya que se me queda en la posicion del ( Left: -200 ) ???

dejo el código por si a alguien le interesa:

Código PHP:

  <script type="text/javascript">
        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 2;

        var leftPadding = 300;

            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                      
                    });
                } 
                else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
   </script>
<script type="text/javascript">
        $(function() {
            var offset = $("#sidebar2").offset();
            

        var leftPadding = 200;

            $(window).scroll(function() {
                if ($(window).scrollLeft() > offset.top) {
                    $("#sidebar2").stop().animate({
                       
                        marginLeft: $(window).scrollLeft() - offset.left + leftPadding
                    });
                } 
                else {
                    $("#sidebar2").stop().animate({
                        marginLeft: -200
                    });
                };
            });
        });
    </script>

jonysi_d · #6 (**permalink**) 04/01/2013, 06:53

con el código que puse en el anterior comentario, les adjunto un vídeo para que vean el efecto. Alguien podría indicarme como hacer que la foto vaya a su sitio inicial al subir la página ??

vídeo ejemplo

gracias

emprear · #7 (**permalink**) 04/01/2013, 09:21

a ver si esto te orienta

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Arriba - abajo jquery</title>
</head>
<body>
    <div>arriba</div><br />    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <div>abajo</div><br /><br />
 
<script type="text/javascript">
//<![CDATA[
        $(document).ready(function() {
             var ventana = $(window);
 
             ventana.scroll(function () {
                 if (ventana.scrollTop() == 0)
                     alert('Scroll arriba');
                     // reposicionas la imagen
                 else if (ventana.height() + ventana.scrollTop() == $(document).height()) {
                     alert('scroll abajo');
                 }
             });
         });
//]]>
</script>
</body>
</html>

Saludos