+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: طراحی وب (/forum-21.html)
+--- انجمن: قالب های HTML (/forum-124.html)
+---- انجمن: صفحات اینترو (/forum-126.html)
+---- موضوع: صفحه اینترو طرح لیزر رایگان jQuery and CSS3 Animation effect (/thread-8851.html)
صفحه اینترو طرح لیزر رایگان jQuery and CSS3 Animation effect - Reza Ganji - ۱۳-۸-۱۳۹۱ ۰۹:۱۰ عصر
![[تصویر: 1351933670_1_144a6aea14.jpg]](http://forums.parsjoom.ir/imgup/1/1351933670_1_144a6aea14.jpg)
درود
این یک صفحه اینترو ساده و رایگان طرح لیزر می باشد که میتوانید به عنوان صفحه اینترو سایت خود استفاده کنید.
در داخل بسته یک تصویر به نام photoID موجود است که میتونید با تصویر خود جایگزین کنید.
توضیحات سازنده که بخاطر واضح بودن در چند بخش در داخل تگ کد قرار میدهم البته در سایت سازنده توضیحات بسیار کامل و جامعی موجود است :
کد:
The markup is not difficult, we used two unordered lists, the first list follow insert all graphics (via CSS3) and animations, while the second list social will have links to social networks always with a nice animation. As you will see the first list is composed of lines, points and special effect, the latter two are accompanied by an control layer to adjust the delay of the animation. While in the second list, they are also accompanied by a control layer that control the animation and delay, and a specific class that as you will see later, to determine the exact position.کد:
01 <div class="ID-Image">
02 <ul id="follow">
03 <li class="line1">
04 <span id="layerBall" class="ball">LINKED IN</span><span id="layerPulse" class="pulse"></span>
05 </li>
06
07 <li class="line2">
08 <span id="layerBall1" class="ball1">FOORST</span><span id="layerPulse1" class="pulse1"></span>
09 </li>
10
11 <li class="line3">
12 <span id="layerBall2" class="ball2">TWITTER</span><span id="layerPulse2" class="pulse2"></span>
13 </li>
14
15 <li class="line4">
16 <span id="layerBall3" class="ball3">FACEBOOK</span><span id="layerPulse3" class="pulse3"></span>
17 </li>
18 </ul>
19
20 <ul id="social">
21 <li id="layerSocialControl3" class="facebook"><a href="#">Facebook</a></li>
22 <li id="layerSocialControl2" class="twitter"><a href="#">Twitter</a></li>
23 <li id="layerSocialControl" class="linked"><a href="#">Linked In</a></li>
24 <li id="layerSocialControl1" class="forrst"><a href="#">Forrst</a></li>
25 </ul>
26
27 </div>
28 <a id="trigger" href="#">Follow Me!</a>کد:
CSS
This first part of the CSS will make you understand how all the elements are positioned in the scene, and how to apply the animations. Take care some classes are accompanied by a .running, it will serve with the help of jQuery to determine the start animation to the button click.دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.