صندوق منبثق بتأثير اوريجامي

السلام عليكم ورحمة

الله وبركاته

--

نعود لكم بتدوينة جديدة نقدم لكم فيها صندوق منبثق بتقنية اوريجامي

• معاينة

طريقة التركيب:

1. توجه الى القالب ثم تحرير html
2. ضع الكود التالي في المكان الذي يناسبك ((الزر))

<div class="main-ctr">
  <div class="dialog-wrapper">
 <button class="open">افتحني !</button>
    <button class="close">X</button>
    <p>مرحبا, معكم عصام<br>عصام ويب!</p>
    <svg width="369" height="249" viewBox="0 0 369 249" xmlns="https://www.w3.org/2000/svg">
      <g id="Page-1" fill="none" fill-rule="evenodd">
        <path d="M264.483 102v45h-160v-45h160z" id="step-0" fill="#FFF"/>
        <path d="M264.483 102v45h-160L-.004-.025 264.483 102z" id="step-1" fill-opacity=".1" fill="#D8D8D8"/>
        <path d="M369.02-.025L264.484 147h-160L-.004-.025H369.02z" id="step-2" fill-opacity=".2" fill="#D8D8D8"/>
        <path d="M369.01-.025L264.482 147-.004 249V-.024H369.01z" id="step-3" fill-opacity=".3" fill="#D8D8D8"/>
        <path d="M.042-.004h368.97v249H-.003l.045-249z" id="step-4" fill-opacity=".4" fill="#D8D8D8"/>
        <path d="M264.483 102v45h-160v-45h160z" id="box" fill="#FFF"/>
      </g>
    </svg>
  </div>
</div>
  

1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي

/* ISSAMWEEB */
button:focus { outline: none; } .main-ctr { display: table-cell; vertical-align: middle; text-align: center; } .dialog-wrapper { position: relative; display: inline-block; height: 249px; width: 369px; } .dialog-wrapper p { position: absolute; top: 50%; margin-top: -24px; left: 0; right: 0; text-align: center; line-height: 1.5; font-family: 'ge_dinar_tworegular'; padding: 0 20px; box-sizing: border-box; font-weight: 300; opacity: 0; color: #999; transition: .45s all ease; pointer-events: none; letter-spacing: 1.5px; } .dialog-wrapper p.show { opacity: 1; } .dialog-wrapper .open { position: absolute; top: 50%; left: 50%; font-family: 'ge_dinar_tworegular'; width: 160px; height: 45px; margin-top: -22.5px; margin-left: -80.5px; border: none; background: white; font-size: 14px; color: black; cursor: pointer; transition: .3s all ease; letter-spacing: 1.5px; } .dialog-wrapper .open.off { pointer-events: none; opacity: 0; } .dialog-wrapper .close { position: absolute; top: 25px; right: 25px; width: 40px; height: 40px; border-radius: 50%; border: none; background: -webkit-linear-gradient(90deg, #1CD8D2 10%, #93EDC7 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #1CD8D2 10%, #93EDC7 90%); /* FF3.6+ */ background: -ms-linear-gradient(90deg, #1CD8D2 10%, #93EDC7 90%); /* IE10 */ background: -o-linear-gradient(90deg, #1CD8D2 10%, #93EDC7 90%); /* Opera 11.10+ */ background: linear-gradient(90deg, #1CD8D2 10%, #93EDC7 90%); /* W3C */ color: white; font-size: 16px; /* box-shadow: 0 1px 6px rgba(0,0,0,0.2); */ cursor: pointer; } .dialog-wrapper svg #step-0, .dialog-wrapper svg #step-1, .dialog-wrapper svg #step-2, .dialog-wrapper svg #step-3, .dialog-wrapper svg #step-4 { visibility: hidden; } 

1. ثم ابحث عن </body> وضع الكود التالي فوقه

<script type='text/javascript'>
var box = $("#box"),
    open = $(".open"),
    close = $(".close"),
    text = $("p"),
    step0 = "#step-0",
    step1 = "#step-1",
    step2 = "#step-2",
    step3 = "#step-3",
    step4 = "#step-4";

TweenMax.set(close, {
  scale: 0,
  transformOrigin: "center center"
});

var tl = new TimelineMax({
});

open.on("click", function(){

  $(this).addClass("off");

  tl
  .to(box, .2, {
    morphSVG:{
      shape: step1
    },
    delay: .3,
    ease: Power4.easeOut
  })
  .to(box, .2, {
    morphSVG:{
      shape: step2
    },
    ease: Power4.easeOut
  })
  .to(box, .2, {
    morphSVG:{
      shape: step3
    },
    ease: Power4.easeOut
  })
  .to(box, .2, {
    morphSVG:{
      shape: step4
    },
    ease: Power4.easeOut
  })
  .set(text, {className:"+=show"})
  
  .to(close, .3, {
    scale: 1,
    delay: .3,
    ease: Bounce.easeOut
  })

});

close.on("click", function(){

  tl
  .to(close, .3, {
    scale: 0,
    ease: Power4.easeOut
  })
  .set(text, {className:"-=show"})
  .to(box, .2, {
    morphSVG:{
      shape: step3
    },
    delay: .3,
    ease: Power4.easeOut
  })
  .to(box, .2, {
    morphSVG:{
      shape: step2
    },
    ease: Power4.easeOut
  })
  .to(box, .2, {
    morphSVG:{
      shape: step1
    },
    ease: Power4.easeOut
  })
  .to(box, .2, {
    morphSVG:{
      shape: step0
    },
    ease: Power4.easeOut
  })

  .set(open, {className:"-=off"});

})

// copy
balapaCop("Origami Dialog Effect", "rgba(255,255,255,.9)");
</script>

1. ثم ابحث عن </head> وضع الكود التالي فوقه

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>

<script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>

1. غير ما يناسبك