تأثير الإنزلاق بجميع الإتجاهات بطريقة حصرية كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

يونيو 02, 2017

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

قم بالبحث عن الوسم التى هذاثم ضع فوقه الكود التالى

اقرا ايضا :اضافة صفحة اختصار روابط لمدونات بلوجر مقدمة من الخبير عامر بشير كتبها: المدون التقني - الخبير عامر بشير

<script type='text/javascript'>//<![CDATA[ (function() { var Util, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; Util = (function() { function Util() {} Util.prototype.extend = function(custom, defaults) { var key, value; for (key in custom) { value = custom[key]; if (value != null) { defaults[key] = value; } } return defaults; }; Util.prototype.isMobile = function(agent) { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent); }; return Util; })(); this.WOW = (function() { WOW.prototype.defaults = { boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true }; function WOW(options) { if (options == null) { options = {}; } this.scrollCallback = __bind(this.scrollCallback, this); this.scrollHandler = __bind(this.scrollHandler, this); this.start = __bind(this.start, this); this.scrolled = true; this.config = this.util().extend(options, this.defaults); } WOW.prototype.init = function() { var _ref; this.element = window.document.documentElement; if ((_ref = document.readyState) === "interactive" || _ref === "complete") { return this.start(); } else { return document.addEventListener('DOMContentLoaded', this.start); } }; WOW.prototype.start = function() { var box, _i, _len, _ref; this.boxes = this.element.getElementsByClassName(this.config.boxClass); if (this.boxes.length) { if (this.disabled()) { return this.resetStyle(); } else { _ref = this.boxes; for (_i = 0, _len = _ref.length; _i < _len; _i++) { box = _ref[_i]; this.applyStyle(box, true); } window.addEventListener('scroll', this.scrollHandler, false); window.addEventListener('resize', this.scrollHandler, false); return this.interval = setInterval(this.scrollCallback, 50); } } }; WOW.prototype.stop = function() { window.removeEventListener('scroll', this.scrollHandler, false); window.removeEventListener('resize', this.scrollHandler, false); if (this.interval != null) { return clearInterval(this.interval); } }; WOW.prototype.show = function(box) { this.applyStyle(box); return box.className = "" + box.className + " " + this.config.animateClass; }; WOW.prototype.applyStyle = function(box, hidden) { var delay, duration, iteration; duration = box.getAttribute('data-wow-duration'); delay = box.getAttribute('data-wow-delay'); iteration = box.getAttribute('data-wow-iteration'); return box.setAttribute('style', this.customStyle(hidden, duration, delay, iteration)); }; WOW.prototype.resetStyle = function() { var box, _i, _len, _ref, _results; _ref = this.boxes; _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { box = _ref[_i]; _results.push(box.setAttribute('style', 'visibility: visible;')); } return _results; }; WOW.prototype.customStyle = function(hidden, duration, delay, iteration) { var style; style = hidden ? "visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;" : "visibility: visible;"; if (duration) { style += "-webkit-animation-duration: " + duration + "; -moz-animation-duration: " + duration + "; animation-duration: " + duration + ";"; } if (delay) { style += "-webkit-animation-delay: " + delay + "; -moz-animation-delay: " + delay + "; animation-delay: " + delay + ";"; } if (iteration) { style += "-webkit-animation-iteration-count: " + iteration + "; -moz-animation-iteration-count: " + iteration + "; animation-iteration-count: " + iteration + ";"; } return style; }; WOW.prototype.scrollHandler = function() { return this.scrolled = true; }; WOW.prototype.scrollCallback = function() { var box; if (this.scrolled) { this.scrolled = false; this.boxes = (function() { var _i, _len, _ref, _results; _ref = this.boxes; _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { box = _ref[_i]; if (!(box)) { continue; } if (this.isVisible(box)) { this.show(box); continue; } _results.push(box); } return _results; }).call(this); if (!this.boxes.length) { return this.stop(); } } }; WOW.prototype.offsetTop = function(element) { var top; top = element.offsetTop; while (element = element.offsetParent) { top += element.offsetTop; } return top; }; WOW.prototype.isVisible = function(box) { var bottom, offset, top, viewBottom, viewTop; offset = box.getAttribute('data-wow-offset') || this.config.offset; viewTop = window.pageYOffset; viewBottom = viewTop + this.element.clientHeight - offset; top = this.offsetTop(box); bottom = top + box.clientHeight; return top <= viewBottom && bottom >= viewTop; }; WOW.prototype.util = function() { return this._util || (this._util = new Util()); }; WOW.prototype.disabled = function() { return !this.config.mobile && this.util().isMobile(navigator.userAgent); }; return WOW; })(); }).call(this); wow = new WOW( { animateClass: 'animated', offset: 100 } ); wow.init(); //]]></script>

قم بالبحث عن الوسم التى هذاثم ضع فوقه الكود التالى

<link href='https://daneden.github.io/animate.css/animate.min.css' rel='stylesheet'/>

و الان لتطبيق التأثير ما عليك الا اضافة هذا الكود مع الكلاس الذي تريده

class='wow animated fadeInUp' data-wow-delay='0.1s' data-wow-duration='0.8s'

اقرا ايضا :اضافة تأثير التحرك للخلفيات - css animation linear-gradient كتبها: المدون التقني - الخبير عامر بشير

و اذا اردت ان تضيف التأثير على سبيل المثال في

فيمكن جعله هكذا

class='sidebar wow animated fadeinup' data-wow-delay='0.1s' data-wow-duratico='0.8s'

ويمكن ايضا تغيير شكل التأثير من هذا الموقع من هنا

بأخذ اسم التأثير و هوا  fadeinup و تغغيره بما تحب انت

و لشروحات اخرا على الانيميشن و استعمال التأثيرات فعليك بهذا الشرح

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2017/06/blog-post_2.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2017/06/blog-post_2.html">تأثير الإنزلاق بجميع الإتجاهات بطريقة حصرية كتبها: المدون التقني - الخبير عامر بشير</a>

الموضوع من قسم:

اضافات بلوجربلوجر

شاركه على

الفيسبوكجوجل بلس

تنويه : الصور والفيديوهات في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.