إضافة تأثير التموج لمدونات بلوجر | waves effect & ripple

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي شرح اليوم يتعلق ب افكت التموج و هوا متواجد بكثرة في قوالب التي تعمل ب المتريال ديزاين و يصادفكم حتى في محرك البحث جوجل عندا الضغط على محرك البحث يظهر لك تموج يزيد جمالية الموقع 

شرح اليوم يعلمك كيف تضيف ذاك الافكت و التعامل معه ايضا

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

<style> .waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;will-change:opacity, transform;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out} .waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;opacity:0;background:rgba(0,0,0,0.2);-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;-ms-transition:all 0.7s ease-out;transition:all 0.7s ease-out;-webkit-transition-property:-webkit-transform, opacity;-moz-transition-property:-moz-transform, opacity;-o-transition-property:-o-transform, opacity;transition-property:transform, opacity;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);pointer-events:none} .waves-effect.waves-light .waves-ripple{background-color:rgba(255,255,255,0.45)} .waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none !important;transition:none !important} .waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%)} .waves-input-wrapper{border-radius:0.2em;vertical-align:bottom;width:100%} .waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1} .waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%;-webkit-mask-image:none} .waves-block{display:block} a.waves-effect .waves-ripple{z-index:-1} .ripple{display:inline-block;text-decoration:none;overflow:hidden;position:relative;z-index:0} .ink{display:block;position:absolute;background:rgba(255,255,255,0.4);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .55s linear;-moz-animation:ripple .55s linear;-ms-animation:ripple .55s linear;-o-animation:ripple .55s linear;animation:ripple .55s linear} @-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}} @-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}} @-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}} @keyframes ripple{100%{opacity:0;transform:scale(2.5)}} </style>

1. الان إبحث على </body> وضع هذا الكود فوقه

<script type='text/javascript'>//<![CDATA[ // New Waves !function(t){"use strict";function e(t){return null!==t&&t===t.window}function n(t){return e(t)?t:9===t.nodeType&&t.defaultView}function i(t){var e,i,a={"top":0,"left":0},o=t&&t.ownerDocument;return e=o.documentElement,void 0!==t.getBoundingClientRect&&(a=t.getBoundingClientRect()),i=n(o),{"top":a.top+i.pageYOffset-e.clientTop,"left":a.left+i.pageXOffset-e.clientLeft}}function a(t){var e="";for(var n in t){t.hasOwnProperty(n)&&(e+=n+":"+t[n]+";")}return e}function o(t){if(!1===d.allowEvent(t)){return null}for(var e=null,n=t.target||t.srcElement;null!==n.parentElement;){if(!(n instanceof SVGElement||-1===n.className.indexOf("waves-effect"))){e=n;break}if(n.classList.contains("waves-effect")){e=n;break}n=n.parentElement}return e}function r(e){var n=o(e);null!==n&&(c.show(e,n),"ontouchstart"in t&&(n.addEventListener("touchend",c.hide,!1),n.addEventListener("touchcancel",c.hide,!1)),n.addEventListener("mouseup",c.hide,!1),n.addEventListener("mouseleave",c.hide,!1))}var s=s||{},u=document.querySelectorAll.bind(document),c={"duration":750,"show":function(t,e){if(2===t.button){return!1}var n=e||this,o=document.createElement("div");o.className="waves-ripple",n.appendChild(o);var r=i(n),s=t.pageY-r.top,u=t.pageX-r.left,d="scale("+n.clientWidth/100*10+")";"touches"in t&&(s=t.touches[0].pageY-r.top,u=t.touches[0].pageX-r.left),o.setAttribute("data-hold",Date.now()),o.setAttribute("data-scale",d),o.setAttribute("data-x",u),o.setAttribute("data-y",s);var l={"top":s+"px","left":u+"px"};o.className=o.className+" waves-notransition",o.setAttribute("style",a(l)),o.className=o.className.replace("waves-notransition",""),l["-webkit-transform"]=d,l["-moz-transform"]=d,l["-ms-transform"]=d,l["-o-transform"]=d,l.transform=d,l.opacity="1",l["-webkit-transition-duration"]=c.duration+"ms",l["-moz-transition-duration"]=c.duration+"ms",l["-o-transition-duration"]=c.duration+"ms",l["transition-duration"]=c.duration+"ms",l["-webkit-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["-moz-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["-o-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",o.setAttribute("style",a(l))},"hide":function(t){d.touchup(t);var e=this,n=(e.clientWidth,null),i=e.getElementsByClassName("waves-ripple");if(!(i.length>0)){return!1}var o=(n=i[i.length-1]).getAttribute("data-x"),r=n.getAttribute("data-y"),s=n.getAttribute("data-scale"),u=350-(Date.now()-+n.getAttribute("data-hold"));0>u&&(u=0),setTimeout(function(){var t={"top":r+"px","left":o+"px","opacity":"0","-webkit-transition-duration":c.duration+"ms","-moz-transition-duration":c.duration+"ms","-o-transition-duration":c.duration+"ms","transition-duration":c.duration+"ms","-webkit-transform":s,"-moz-transform":s,"-ms-transform":s,"-o-transform":s,"transform":s};n.setAttribute("style",a(t)),setTimeout(function(){try{e.removeChild(n)}catch(t){return!1}},c.duration)},u)},"wrapInput":function(t){for(var e=0;e<t.length;e++){var n=t[e];if("input"===n.tagName.toLowerCase()){var i=n.parentNode;if("i"===i.tagName.toLowerCase()&&-1!==i.className.indexOf("waves-effect")){continue}var a=document.createElement("i");a.className=n.className+" waves-input-wrapper";var o=n.getAttribute("style");o||(o=""),a.setAttribute("style",o),n.className="waves-button-input",n.removeAttribute("style"),i.replaceChild(a,n),a.appendChild(n)}}}},d={"touches":0,"allowEvent":function(t){var e=!0;return"touchstart"===t.type?d.touches+=1:"touchend"===t.type||"touchcancel"===t.type?setTimeout(function(){d.touches>0&&(d.touches-=1)},500):"mousedown"===t.type&&d.touches>0&&(e=!1),e},"touchup":function(t){d.allowEvent(t)}};s.displayEffect=function(e){"duration"in(e=e||{})&&(c.duration=e.duration),c.wrapInput(u(".waves-effect")),"ontouchstart"in t&&document.body.addEventListener("touchstart",r,!1),document.body.addEventListener("mousedown",r,!1)},s.attach=function(e){"input"===e.tagName.toLowerCase()&&(c.wrapInput([e]),e=e.parentElement),"ontouchstart"in t&&e.addEventListener("touchstart",r,!1),e.addEventListener("mousedown",r,!1)},t.Waves=s,document.addEventListener("DOMContentLoaded",function(){s.displayEffect()},!1)}(window), // Effect $(function(){var t,e,n,i;$(".ripple").click(function(a){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({"height":e,"width":e})),n=a.pageX-$(this).offset().left-t.width()/2,i=a.pageY-$(this).offset().top-t.height()/2,t.css({"top":i+"px","left":n+"px"}).addClass("animate")})}); //]]></script>


الان في مكان تريد ظهور فيه التموج تضيف هذا في كلاص waves-effect
مثال

1.  <a class="waves-effect" href="http://www.abdoutech.com" title="تجربة"><span>تجربة</span></a>

الان لو تريد ان يضهر التموج في مكان يكون لونه ابيض او لون فاتح اضف هذا class='waves-effect'

واذا كان للون غامق مثل الاسود ضف هذا  class='waves-effect waves-light'

اذا  اعجبك شرح لا تنسى الاشتراك في المدونة و اي استفسار يمكنك مراسلتي من هنا

شارك هذا