Combiner Circletype.js avec jQuery animate

Question

Je souhaite utiliser Circletype.js en conjonction avec jQuery .animate() pour que le texte s'incurve autour de mon logo/image lorsque j'anime la largeur de son conteneur. J'applique .circleType({fluid:true}); au div #demo4. Cela, avec le css correct, provoque le chemin de texte à plier pour s'adapter à son conteneur (#resize).

Exécuter l'extrait de code pour illustrer:

rayon de texte
1. ne change lorsque le conteneur est redimensionné manuellement
rayon de texte
2. ne change pas lorsque redimensionnée via .animate(). Pourquoi pas?

$(function() { 
 
    $("#resize").resizable(); 
 
    $("#resize").draggable(); 
 
    }); 
 
    $("button").click(function() { 
 
    $("#resize").animate({ 
 
     left: '50px', 
 
     width: '650px' 
 
    }); 
 
    }); 
 

 

 

 
    $('#demo4').circleType({ 
 
    fluid: true, 
 
    dir: -1 
 
    });

#resize { 
 
    position: relative; 
 
    width: 220px; 
 
    height: auto; 
 
    padding: 0.5em; 
 
    border: 1px solid; 
 
} 
 
#resize h4 { 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
.demo-box { 
 
    position: relative; 
 
    max-width: 700px; 
 
    margin: 10% auto; 
 
    color: #476A50; 
 
    background-color: #ccc; 
 
} 
 
#logo { 
 
    position: absolute; 
 
    bottom: 44%; 
 
    width: 60%; 
 
    height: auto; 
 
    margin-left: 23%; 
 
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="http://www.kernjs.com/js/lettering.js"></script> 
 
<script src="http://circletype.labwire.ca/js/circletype.js"></script> 
 
<button>Start Animation</button> 
 
<div id="resize" class="ui-widget-content"> 
 
    <h4 class="ui-widget-header">Resize/Drag/Animate</h4> 
 

 
    <div class="demo-box" id="demo-box4"> 
 
    <h2 id="demo4" class="demo strong">Anything in WordPress </h2> 
 

 
    <img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" /> 
 
    </div> 
 
</div>

Answer 1

Vous pouvez essayer mais si vous voulez juste le résultat final. Si vous souhaitez que le texte soit également animé, le code ci-dessous ne fonctionnera pas. Voir si cela fonctionne pour vos besoins

$(function() { 
 
    $("#resize").resizable(); 
 
    $("#resize").draggable(); 
 
    circleInit(); 
 
    }); 
 
    $("button").click(function() { 
 
    $("#resize").animate({ 
 
     left: '50px', 
 
     width: '650px' 
 
    },400,'swing',function() { circleInit(); }); 
 
    }); 
 

 
function circleInit() { 
 
    $('#demo4').circleType({ 
 
    fluid: true, 
 
    dir: -1 
 
    }); 
 
}

#resize { 
 
    position: relative; 
 
    width: 220px; 
 
    height: auto; 
 
    padding: 0.5em; 
 
    border: 1px solid; 
 
} 
 
#resize h4 { 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
.demo-box { 
 
    position: relative; 
 
    max-width: 700px; 
 
    margin: 10% auto; 
 
    color: #476A50; 
 
    background-color: #ccc; 
 
} 
 
#logo { 
 
    position: absolute; 
 
    bottom: 44%; 
 
    width: 60%; 
 
    height: auto; 
 
    margin-left: 23%; 
 
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="http://www.kernjs.com/js/lettering.js"></script> 
 
<script src="http://circletype.labwire.ca/js/circletype.js"></script> 
 
<button>Start Animation</button> 
 
<div id="resize" class="ui-widget-content"> 
 
    <h4 class="ui-widget-header">Resize/Drag/Animate</h4> 
 

 
    <div class="demo-box" id="demo-box4"> 
 
    <h2 id="demo4" class="demo strong">Anything in WordPress </h2> 
 

 
    <img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" /> 
 
    </div> 
 
</div>

Answer 2

Le code circletype montre que le text is only reflowed when the window is resized:

if (settings.fluid && !settings.fitText) { 
     $(window).resize(function() { 
      layout(); 
     }); 
    }