الجمعة، 3 أبريل 2015

3 تأثيرات hover حركية رائعة لمحبي التطوير


السلام عليكم أهلا بكم من جديد على مطورون نستمر دائما مع دروس تطوير المواقع واليوم سأقدم لكم تأثيرات لن أقول عنها احترافية وإنما خرافية تأثيرات ستبهركم خاصة محبي الحركة داخل الموقع هذه التأثيرات تأتي مع خاصية Hover لكن بشكل ذكي ومتطور وذلك باستغلال الجافا سكريبت.

إذا كما رأيت فالتأثيرات جميلة جدا نأتي الأن إلى كيفية العمل .
طريقة التركيب :
1- نبحث عن <head> ثم نضيف أسفله الكودين التاليين:
<link href='https://dl.dropboxusercontent.com/u/280199022/normalize.css' rel='stylesheet'/>
<script src='https://dl.dropboxusercontent.com/u/280199022/snap.svg-min.js'/>
2- ابحث </body> وأضف فوقه الكود التالي :
		<script>
			(function() {
	
				function init() {
					var speed = 330,
						easing = mina.backout;

					[].slice.call ( document.querySelectorAll( &#39;#grid &gt; a&#39; ) ).forEach( function( el ) {
						var s = Snap( el.querySelector( &#39;svg&#39; ) ), path = s.select( &#39;path&#39; ),
							pathConfig = {
								from : path.attr( &#39;d&#39; ),
								to : el.getAttribute( &#39;data-path-hover&#39; )
							};

						el.addEventListener( &#39;mouseenter&#39;, function() {
							path.animate( { &#39;path&#39; : pathConfig.to }, speed, easing );
						} );

						el.addEventListener( &#39;mouseleave&#39;, function() {
							path.animate( { &#39;path&#39; : pathConfig.from }, speed, easing );
						} );
					} );
				}

				init();

			})();
		</script>
3- ابحث عن */]]></b:skin> وأضف فوقه الكود التالي :
.grid {
margin: 40px auto 12px;
  max-width: 100%;
  width: 100%;
  height: 490px;
  background: #F1F1F1;
  font-family: 'lolblogger';
  font-size: 18px;
}
.grid a {
	float: left;
	max-width: 250px;
	width: 25%;
	color: #333;
  margin-top: 30px;
  margin-left: 12px;
}
.grid a:nth-child(odd) {
  margin: 30px 0px 0px 12px;
}
.grid figure {
	position: relative;
	overflow: hidden;
	margin: 5px;
	background: #333;
}
.grid figure img {
	position: relative;
	display: block;
	width: 100%;
	opacity: 0.7;
	transition: opacity 0.3s;
}
.grid figcaption {
	position: absolute;
	top: 0;
	z-index: 11;
	width: 100%;
	height: 100%;
	text-align: center;
}
.grid figcaption h2 {
	margin: 10px 0 20px 0;
	color: #3498db;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
	font-size: 130%;
	transition: transform 0.3s;
}

.grid figcaption p {
	padding: 0 20px;
	color: #aaa;
	font-weight: 300;
	transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption h2,
.grid figcaption p {
	transform: translateY(50px);
}
.grid figure button {
  padding: 8px 20px;
  border: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  transition: opacity 0.3s, transform 0.3s;
  width: 100%;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  margin-top: 250px;
  background: #FFFFFF;
  color: #ccc;
  z-index: 99999;
}
.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
	backface-visibility: hidden;
}
.grid svg {
	position: absolute;
	top: -1px; /* fixes rendering issue in FF */
	z-index: 10;
	width: 100%;
	height: 100%;
}
.grid svg path {
	fill: #fff;
}
.grid a:hover figure img {
	opacity: 1;
}

.grid a:hover figcaption h2,
.grid a:hover figcaption p {
	transform: translateY(0);
}

.grid a:hover figcaption p {
	opacity: 0;
}

.button1 {
  opacity: 0;
}

.button1:hover {
  opacity: 1;
}

.button2 {
  margin-top: -2px;
  opacity: 0;
}

.button2:hover {
  opacity: 1;
}

.button3 {
  opacity: 0;
}

.button3:hover {
  opacity: 1;
}
4- اختر كود HTML للتأثير الذي أعجبك وضعه في المكان الذي تريد
● التأثير الأول :
<section class='grid clearfix' id='grid'>
				<a data-path-hover='m 180,34.57627 -180,0 L 0,0 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 180,160 0,218 0,0 180,0 z'/></svg>
						<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button3'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='m 180,34.57627 -180,0 L 0,0 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 180,160 0,218 0,0 180,0 z'/></svg>
						<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button3'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='m 180,34.57627 -180,0 L 0,0 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 180,160 0,218 0,0 180,0 z'/></svg>
						<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button3'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='m 180,34.57627 -180,0 L 0,0 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 180,160 0,218 0,0 180,0 z'/></svg>
						<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button3'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='m 180,34.57627 -180,0 L 0,0 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 180,160 0,218 0,0 180,0 z'/></svg>
						<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button3'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='m 180,34.57627 -180,0 L 0,0 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 180,160 0,218 0,0 180,0 z'/></svg>
						<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button3'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
			</section>
● التأثير الثاني :
<section class='grid clearfix' id='grid'>
		<a data-path-hover='m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z' href='#'>
		<figure>
			<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
			<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z'/></svg>
			<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button1'>
<button>معاينة</button>
  </div>
			</figcaption>
		</figure>
	</a>
	<!-- ... -->
		<a data-path-hover='m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z' href='#'>
		<figure>
			<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
			<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z'/></svg>
			<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button1'>
<button>معاينة</button>
  </div>
			</figcaption>
		</figure>
	</a>
	<!-- ... -->
		<a data-path-hover='m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z' href='#'>
		<figure>
			<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
			<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z'/></svg>
			<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button1'>
<button>معاينة</button>
  </div>
			</figcaption>
		</figure>
	</a>
	<!-- ... -->
		<a data-path-hover='m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z' href='#'>
		<figure>
			<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
			<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z'/></svg>
			<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button1'>
<button>معاينة</button>
  </div>
			</figcaption>
		</figure>
	</a>
	<!-- ... -->
		<a data-path-hover='m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z' href='#'>
		<figure>
			<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
			<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z'/></svg>
			<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button1'>
<button>معاينة</button>
  </div>
			</figcaption>
		</figure>
	</a>
    <!-- ... -->
		<a data-path-hover='m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z' href='#'>
		<figure>
			<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
			<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z'/></svg>
			<figcaption>
				<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button1'>
<button>معاينة</button>
  </div>
			</figcaption>
		</figure>
	</a>
	<!-- ... -->
</section>
● التأثير الثالث :
<section class='grid clearfix' id='grid'>
				<a data-path-hover='M 0,0 0,38 90,58 180.5,38 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z '/></svg>
						<figcaption>
							<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button2'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='M 0,0 0,38 90,58 180.5,38 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z '/></svg>
						<figcaption>
								<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button2'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='M 0,0 0,38 90,58 180.5,38 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z '/></svg>
						<figcaption>
								<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button2'>
<button>معاينة</button>
  </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='M 0,0 0,38 90,58 180.5,38 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z '/></svg>
						<figcaption>
								<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button2'>
<button>معاينة</button>
                          </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='M 0,0 0,38 90,58 180.5,38 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z '/></svg>
						<figcaption>
									<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button2'>
<button>معاينة</button>
                          </div>
						</figcaption>
					</figure>
				</a>
				<a data-path-hover='M 0,0 0,38 90,58 180.5,38 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z '/></svg>
						<figcaption>
											<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button2'>
<button>معاينة</button>
                          </div>
						</figcaption>
					</figure>
				</a>			
			</section>
ملاحظة :
- قم بتغيير رابط الصورة
- قم بتغيير العنوان
- قم بتغيير الوصف
- لزيادة عدد الصناديق قم بتكرار الكود من بداية الوسم <a>.... إلى نهايته ....</a> على حسب التأثير.
<a data-path-hover='M 0,0 0,38 90,58 180.5,38 180,0 z' href='#'>
					<figure>
						<img src='http://www.shy22.com/upfilpng/cki08566.png'/>
						<svg preserveAspectRatio='none' viewBox='0 0 180 320'><path d='M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z '/></svg>
						<figcaption>
											<h2>قوالب</h2>
				<p>قالب مطورون لمدونات البلوجر</p>
				<div class='button2'>
<button>معاينة</button>
                          </div>
						</figcaption>
					</figure>
				</a>
كنتم مع موضوع تكلمنا فيه عن 3 تأثيرات رائعة Hover متحركة إلى هنا انتهى الدرس نلتقي مع درس أخر قريبا.
مرسلة بواسطة في
التسميات:

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)