Line Animation while using jQuery

user_8529954 0
Viewed 852

My client is asking for lines that connect text (basic p tags) with buttons from an image (please see attached photo), I am having a hard time finding out how to accomplish this and make sure it's responsive.

End Result

I had two ideas on how to accomplish this:

Import the line image (the client gave me a png file) and use CSS to make the line fit correctly on the image. The problem with that is it loses the correct placement once I size down the screen. I have my code here on codepen, I have everything working from the image above except those dang lines: https://codepen.io/dec23rd1986/full/PdEoZa/

I also thought about SVG animation but I'm not sure how I would incorporate that with the jQuery I'm using for my buttons. Which I'm using to go back and forth between the two buttons and the side arrow buttons, along with the fade effect.

If anyone can point in me the right direction on how to accomplish this (articles, videos, best approach) I would greatly appreciate it!
Best Regards, 

   <div class="container-fluid jumbo_features">
    <div class="row">
     <div class="col-md-6">
      <img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meeting_img">

      <img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks_img"></div>

     <div class="col-md-6">
      <button type="button"  class="btn active" aria-pressed="true" id="meeting_button">Meeting</button>
      <button type="button" class="btn" aria-pressed="true" id="tasks_button">Tasks</button>

       <br>
     <p class="meeting_info"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
     <p class="meeting_info "><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <!--Tasks-->
       <p class="tasks_info"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="tasks_info"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="tasks_info"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>

         </div>
          </div>
       </div>

      <br>
       </div>
      </div>  
    </div>

</div>
</div>
       <div class ="meeting_info">
<img src="https://thumb.ibb.co/c4yUFU/line1.png" id="line">
animation svg css jquery javascript
2 Answers

While I'm not clear on precisely why your jQuery might interfere with your use of lines, here's a simple SVG example which will scale as you change the window size. All you have to do to make it scale is use percentage values rather than literal pixel values.

If you have some proportional changes as screen sizes change, then you might have to alter this code programmatically. If you provide more information on why you have concerns about interacting with jQuery, please share them and I'll update my answer.

Edit: I've updated my example to give a rough idea (for example, the message doesn't always line up properly) of what I think you're looking for. If I understand you right, you can refine it from there. Also, you may wish to change your percentages with screens of different sizes. If so, use @media queries in your CSS.

div {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}

#myImg img {
  width: 100%;
}

#mySVG {
  margin-top: 20%;
  margin-left: -10%;
}

#myMsg {
  margin-top: 28.5%;
  padding-left: 10px;
}
<div id="myImg">
  <img src="https://www.yotako.io/images/documentation/balsamiq/containers/android_balsamiq.png" />
</div>
<div id="mySVG">
  <svg height="100%" width="100%">
  <line x1="0" y1="0" x2="50%" y2="0" style="stroke:#000;stroke-width:2" />
  <line x1="50%" y1="0" x2="50%" y2="50%" style="stroke:#000;stroke-width:2" />
  <line x1="50%" y1="50%" x2="100%" y2="50%" style="stroke:#000;stroke-width:2" />
</svg>
</div>
<div id="myMsg">
  <p>Your message goes here</p>
</div>

user_4904540

For the line animation part, you do not need to use anything else but svg's own animation feature:

<svg height="120" width="120">
  <polyLine
    id="myLine"
    points="120,0 60,0 60,60 0,60"
    fill="none"
    stroke-width="2"
    stroke="red"
    stroke-dasharray="240"
    stroke-dashoffset="240"
  />

  <animate
    xlink:href="#myLine"
    attributeName="stroke-dashoffset"
    from="240"
    to="0"
    dur="3s"
    begin="1s"
    fill="freeze"
   />   
</svg>

PS: you can get the total length (240) with calculation, but for a limited number of lines it is ok to manually calc it.

user_55067300
Related