حصرياتالمزيد

الاثنين، 13 نوفمبر 2017

احصل على هذة الاداة من هنا

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



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




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

    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. غير ما يناسبك



        EmoticonEmoticon