[RESOLU][parallax][scroll] zoom/dezoom d'un image

Bonjour,

Je n'arrive pas à trouver le bon script qui permet de modifier la taille d'un image pendant le scroll
Le but est de simuler la pousse d'un fleur.

Est ce possible ?

Merci
Modifié par mezoo (30 Oct 2013 - 00:14)

Difficle de voir exactement ce que tu veux comme ca !! aurait tu plus sd'element a nous fournir afin de comprendre exactement l'effet désiré ...

Bonjour

Je voudrais qu'une image voit sa taille augmenter ou diminuer selon qu on scrolle dans le div où elle est contenu.

J'ai commencé avec ça :

$(document).ready(function () {
		 $(window).scroll(function () {
			 console.log($(this).scrollTop());
			 if ($(this).scrollTop() > 4089 && $(this).scrollTop() < 4551) {
				$("#fleur").animate({ 
					width: "100px", height: "100px" }, 3000, 'linear'); 

Mais évidement l'animation demarre quand on arrive sur le DIV mais pas selon le scroll

Merci

as tu l'image d ela fleur qui doit pousser de facon à ce que je puisse voir exactement l'effet qui conviens et je te mettrais le script js en details par la suite ..
Modifié par tazzkiller (28 Oct 2013 - 14:59)

je t'ai fait un petit script de demo ici : http://jsfiddle.net/AFTef/272/

et le code en question :

<style>
body { 
height:1500px;
}

#myDiv {
    position:absolute;
    overflow:hidden;
    left:0;
    top:500px;
    height:0px;
    width:0px;
    background-color:#458963;
    color:#00f;
}
</style>

<div id="myDiv"><img src="http://www.cadeau-maestro.com/1847-7362-thickbox_default/recharge-plante-click-and-grow-.jpg" width="300" /></div>


<script>
$(function(){
    $(window).on('scroll', function() {
        var $myDiv = $('#myDiv');
        var st = window.scrollY;
        var $myDivTop = ($myDiv.position().top) - 300;
        if ( st >= $myDivTop && st <= ($myDivTop + 300) ) {
            $myDiv.animate({'width':+(st-$myDivTop)+'px','height':+(st-$myDivTop)+'px' }, 10);
        }
        
        else if (st <= $myDivTop) {
            $myDiv.animate({'width':'0px','height':'0px' }, 10);
        }
        
        else if (st >= ($myDivTop + 300) ) {
            $myDiv.animate({'width':'300px','height':'300px' }, 10);
        }
    })
    .scroll();                     
})
</script>

et une autre version avec un volet qui s'ouvre au scrolldown : http://jsfiddle.net/AFTef/282/
Modifié par tazzkiller (28 Oct 2013 - 18:45)

Bonjour,

Merci pour ton script
Ceci dit il me semble que c'est le div qui est resizé (?)
Du coup j'ai modifié comme ceci :

<img id="myDiv" src="http://www.cadeau-maestro.com/1847-7362-thickbox_default/recharge-plante-click-and-grow-.jpg" width="300" />

Ca m'a l'air très bien...plus qu'a bien comprendre le script

Merci bcp !!!
Modifié par mezoo (28 Oct 2013 - 19:23)

Grace à ton script voici ce que j'ai pu faire :

$(function(){
    $(window).on('scroll', function() {
        var $myDiv = $('#myDiv');
        var st = window.scrollY;
        
        var $myDivTop = ($myDiv.position().top)-300;
        
        var $size = 300+($myDivTop-st);
        
        if ( st >= $myDivTop && st <= ($myDivTop + 300)) {
            $myDiv.stop().animate({'width':+$size+'px','height':+$size+'px' }, 10);
            
        }
    })
    .scroll();                     
})

Modifié par mezoo (30 Oct 2013 - 00:13)